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

2023-12-12

Browse Source
This commit is contained in:
guoxing
2023-12-12 15:41:08 +08:00
parent 123b725ac3
commit 180fb9c332
9 changed files with 691 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
pages/enterprise/corporateCard.vue
View File

@@ -1,7 +1,8 @@
<template>
<view style="background-color: #FE9039;padding-top: 5vw;">
<view style="display: flex;flex-direction: column;background: #fff; border-radius: 25px; align-items: center; margin-left: 5vw;margin-right: 5vw;">
<view
style="display: flex;flex-direction: column;background: #fff; border-radius: 25px; align-items: center; margin-left: 5vw;margin-right: 5vw;">
<view class="btn" @click="bind">
<image src="https://supervise.yxtsoft.com/lpk/image/binding.png" style="width: 15px;height: 15px;">
</image>
@@ -14,7 +15,69 @@
style="display: flex;flex-direction: column;background-color: #fff; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: 5vw;">
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="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 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/welfare_Card.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/welfare_Card2.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: #FF7100;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: #FF7200;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,#FF7405,#FFAD6D);">发放福礼卡</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>
@@ -24,14 +87,20 @@
export default {
data() {
return {
data: [],
}
},
onLoad() {
uni.$on("order2", (e) => {
// 相当与下拉刷新
this.$refs.paging.reload(true);
})
},
methods: {
// 分页的请求
// 分页的请求
queryList(pageNo, pageSize) {
let _this = this
_this.$api.cardList({
_this.$api.empcardList({
"current": pageNo,
"size": pageSize,
"params": {
@@ -45,10 +114,63 @@
_this.$refs.paging.complete(false);
})
},
bind() {
uni.navigateTo({
url: '/pages/card/card_bind3'
})
}
}
}
</script>
<style>
.gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
transition: filter 0.2s;
}
.oragin {}
._ellipsis {
overflow-wrap: break-word;
}
.item {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.item2 {
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/card_item2.png);
/* 让背景图基于容器大小伸缩 */
background-size: 100% 100%;
width: calc(100% - 18px);
}
.state1 {
height: 17px;
border: 1px #FED4B3 solid;
margin-left: 10px;
border-radius: 15px;
padding: 3px 10px;
font-size: 12px;
color: #FF6000;
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>