yxt_product
/
yxt-yyth-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2023-12-12

master
guoxing 1 year ago
parent
123b725ac3
commit
180fb9c332
9 changed files with 678 additions and 407 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      common/config.js
  2. 4
      common/request.api.js
  3. 2
      manifest.json
  4. 21
      pages.json
  5. 241
      pages/card/card - 副本.vue
  6. 357
      pages/card/card-223-12-12.vue
  7. 188
      pages/card/card.vue
  8. 138
      pages/card/card_bind3.vue
  9. 130
      pages/enterprise/corporateCard.vue

4
common/config.js
View File

@ -6,8 +6,8 @@
* loginTimeoutPage = "/pages/login/index", // 登录超时或失效的情况下，跳转到的登录页面
*/
module.exports = {
baseUrl: 'http://192.168.2.106:7201',
// baseUrl: 'https://supervise.yxtsoft.com/lpkapi',
// baseUrl: 'http://192.168.2.106:7201',
baseUrl: 'https://supervise.yxtsoft.com/lpkapi',
// baseUrl: 'http://jianguan.yyundong.com/api',
tokenName: "Authorization", // 请求头中token的名字，与服务器端对应
loginTimeoutCode: "5001", // 登录超时或失效的情况下，服务器端返回的错误码

4
common/request.api.js
View File

@ -6,6 +6,8 @@ export default {
// 不显示loading true
// 提货卡列表
cardList: (params = {}) => request.post("/lpkgiftcard/gifCardByCustomerSid", params, {}, {}, true),
// 企业卡列表
empcardList: (params = {}) => request.post("/empcard/getEmpCardByCustomerSid", params, {}, {}, true),
// 提货卡详情
cardDetail: (params = {}) => request.get("/lpkgiftcard/getGifCardBySid/" + params, params, {}, {}, true),
// 提货日期 周六日的日期组合
@ -16,6 +18,8 @@ export default {
cardBookingSave: (params = {}) => request.post("/lpksreservoorder/submission", params),
// 绑定提货卡
cardBind: (params = {}) => request.post("/lpkgiftcard/bindCard", params),
// 绑定企业卡
empcardBind: (params = {}) => request.post("/empcard/bindCard", params),
// 单一提货卡预约记录
orderByCardSid: (params = {}) => request.get("/lpksreservoorder/orderByCardSid/" + params, params, {}, {}, true),
// 预约记录

2
manifest.json
View File

@ -50,7 +50,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx11565021714ba796",
"appid" : "wx4724e3a3c27f36b5",
"setting" : {
"urlCheck" : false
},

21
pages.json
View File

@ -51,7 +51,14 @@
"style": {
"navigationStyle": "custom"
}
}, {
},
{
"path": "pages/card/card_bind3",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/BindPhone",
"style": {
"navigationBarTitleText": "绑定账号",
@ -129,12 +136,12 @@
"iconPath": "static/bomicon/bom_notRecord.png",
"selectedIconPath": "static/bomicon/bom_record.png"
}
, {
"pagePath": "pages/enterprise/corporateCard",
"text": "企业卡",
"iconPath": "static/bomicon/bom_notCard.png",
"selectedIconPath": "static/bomicon/bom_card.png"
}
// , {
// "pagePath": "pages/enterprise/corporateCard",
// "text": "企业卡",
// "iconPath": "static/bomicon/bom_notCard.png",
// "selectedIconPath": "static/bomicon/bom_card.png"
// }
]
},
"uniIdRouter": {}

241
pages/card/card - 副本.vue
View File

@ -1,241 +0,0 @@
<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/binding.png" style="width: 15px;height: 15px;">
</image>
<text
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text>
</view>
</view>
</view>
<view
style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">
<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/pack.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.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 {
page: {
remarks: '',
startHeight: 0,
endHeight: 0
},
data: [],
}
},
onLoad() {
uni.$on("order", (e) => {
// 相当与下拉刷新
this.$refs.paging.reload(true);
})
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);
})
},
dialogInputConfirm(val) {
// 网络请求 绑定
},
bind() {
uni.navigateTo({
url: '/pages/card/card_bind'
})
},
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
})
}
},
booking(item) {
if (!item.notRese) {
this.shortToast("该卡商品已全部预约。")
return
} else {
uni.navigateTo({
url: '/pages/card/card_booking?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/hmoe_bj.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;
}
.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);
}
.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>

357
pages/card/card-223-12-12.vue
View File

@ -0,0 +1,357 @@
<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/binding.png" style="width: 15px;height: 15px;">
</image>
<text
style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text>
</view>
</view>
</view>
<view
style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false">
<view
style=" display: flex;flex-direction: row;align-items: center;justify-content: center;padding-top: 5vw;">
<view style="margin-right: 8vw;" :class="(currentTab!=0)?'tab-bj2':'tab-bj1'" @click="tab(0)">提货卡
</view>
<view style="margin-left: 8vw;" :class="(currentTab!=0)?'tab-bj1':'tab-bj2'" @click="tab(1)">
福礼卡</view>
</view>
<!-- 页面内容 -->
<swiper class="tab-box" :current="currentTab" duration="300" bindchange="switchTab" @change=tabChange>
<swiper-item class="tab-content">
<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/pack.png" mode="aspectFill"
v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.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>
</swiper-item>
<swiper-item class="tab-content">
<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/pack.png" mode="aspectFill"
v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.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,#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>
</swiper-item>
</swiper>
</z-paging>
</view>
</view>
</template>
<script>
export default {
data() {
return {
page: {
remarks: '',
startHeight: 0,
endHeight: 0
},
data: [],
currentTab: 0,
}
},
onLoad() {
uni.$on("order", (e) => {
// 相当与下拉刷新
this.$refs.paging.reload(true);
})
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);
})
},
dialogInputConfirm(val) {
// 网络请求 绑定
},
bind() {
uni.navigateTo({
url: '/pages/card/card_bind'
})
},
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
})
}
},
booking(item) {
if (!item.notRese) {
this.shortToast("该卡商品已全部预约。")
return
} else {
uni.navigateTo({
url: '/pages/card/card_booking?sid=' + item.sid
})
}
},
tab(index) {
this.currentTab = index
},
tabChange(event) {
console.log("eeee", event.detail.current)
this.currentTab = event.detail.current
}
}
}
</script>
<style>
._ellipsis {
overflow-wrap: break-word;
}
.top {
width: 100vw;
/* height: 126.66vw; */
height: 85vw;
/* 加载背景图 */
background-image: url(https://supervise.yxtsoft.com/lpk/image/hmoe_bj.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;
}
.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);
}
.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;
}
.tab-box {
box-sizing: border-box;
height: 100vw;
}
.tab-content {
overflow-y: scroll;
}
.tab-bj1 {
background: #FFF6EF;
color: #FF7200;
font-size: 16px;
border-radius: 25px;
border: 1px solid #FF7200;
padding: 5px 30px;
}
.tab-bj2 {
background: #E7E7E7;
color: #9D9D9D;
font-size: 16px;
border-radius: 25px;
padding: 5px 30px;
border: none;
}
</style>

188
pages/card/card.vue
View File

@ -21,139 +21,59 @@
<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false">
<view
style=" display: flex;flex-direction: row;align-items: center;justify-content: center;padding-top: 5vw;">
<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 style="margin-right: 8vw;" :class="(currentTab!=0)?'tab-bj2':'tab-bj1'" @click="tab(0)">提货卡
</view>
<view style="margin-left: 8vw;" :class="(currentTab!=0)?'tab-bj1':'tab-bj2'" @click="tab(1)">
福礼卡</view>
<view class="item" :class="{ item2: !item.showBtn }">
</view>
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<!-- 页面内容 -->
<swiper class="tab-box" :current="currentTab" duration="300" bindchange="switchTab" @change=tabChange>
<swiper-item class="tab-content">
<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)">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill"
v-show="item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
<view class="item" :class="{ item2: !item.showBtn }">
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill"
v-show="!item.showBtn" style="width: 50px;height: 50px;margin-right: 10px;" />
</view>
<!-- 外边 18px 内边 32px = 50px -->
<view
style="padding: 16px;display: flex;flex-direction: row;width: 100%;box-sizing: border-box;">
<view
style="flex: 1;display: flex;flex-direction: column;box-sizing: border-box;flex-wrap: nowrap;">
<!-- 礼包图标 总60px -->
<view style="flex-shrink: 0;">
<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill"
v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<view style="width: 100%;display: flex;flex-direction: row;">
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill"
v-show="!item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<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>
<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>
<!-- 按钮 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>
</swiper-item>
<swiper-item class="tab-content">
<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/pack.png" mode="aspectFill"
v-show="item.showBtn"
style="width: 50px;height: 50px;margin-right: 10px;" />
<image src="https://supervise.yxtsoft.com/lpk/image/pack2.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>
</view>
</swiper-item>
</swiper>
</view>
</z-paging>
</view>
@ -171,7 +91,6 @@
endHeight: 0
},
data: [],
currentTab: 0,
}
},
onLoad() {
@ -243,14 +162,6 @@
})
}
},
tab(index) {
this.currentTab = index
},
tabChange(event) {
console.log("eeee", event.detail.current)
this.currentTab = event.detail.current
}
}
}
@ -327,31 +238,4 @@
page {
background: #FFFFFF;
}
.tab-box {
box-sizing: border-box;
height: 100vw;
}
.tab-content {
overflow-y: scroll;
}
.tab-bj1 {
background: #FFF6EF;
color: #FF7200;
font-size: 16px;
border-radius: 25px;
border: 1px solid #FF7200;
padding: 5px 30px;
}
.tab-bj2 {
background: #E7E7E7;
color: #9D9D9D;
font-size: 16px;
border-radius: 25px;
padding: 5px 30px;
border: none;
}
</style>

138
pages/card/card_bind3.vue
View File

@ -0,0 +1,138 @@
<template>
<view style="display: flex;flex-direction: column;background-color: #fff;">
<view class="top">
<NavBar ref="nav" navTitle="绑定企业卡" :showIcon="true" :start-change-height="page.startHeight"
:end-change-height="page.endHeight">
</NavBar>
<view >
<image src="https://supervise.yxtsoft.com/lpk/image/card_example.png" mode="scaleToFill" style="width: 100%;height: 70vw"></image>
</view>
</view>
<!-- <view style="display: flex;flex-direction: column;margin-top: -10vw;box-sizing: border-box;">
<view
style="display: flex;flex-direction: column;border-radius: 20rpx;background: #FFFFFF;z-index: 1;align-items: center;box-sizing: border-box;">
<view style="margin: 15px;">绑定云菜窖卡</view>
<view
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;">
<input maxlength="20" placeholder="请输入/扫码 提货编码"
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;margin-right: 10px;padding-left: 10px;"
type="number" :value="page.code" @input="onKeyInput1" />
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;" @click="scan" />
</view>
<view
style="display: flex;flex-direction: row;justify-content: space-between;box-sizing: border-box;width: calc(100vw - 60px);align-items: center;margin-top: 10px;">
<input maxlength="6" placeholder="请输入提货密码"
style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;"
type="number" :value="page.codeKey" @input="onKeyInput2" />
</view>
</view>
</view>
<view
style="margin: 30px;background-color: #fd3655;width: calc(100% - 60px);border-radius: 100rpx;height: 80rpx;display: flex;flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;"
@click="save">
绑定</view> -->
<view style="display: flex;flex-direction: column;padding:20px;">
<view style="display: flex;flex-direction: row;align-items: center;">
<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
<text style="margin-left: 8px;font-size: 18px;color: #333;">绑定企业卡</text>
</view>
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货编码</text>
<view style="display: flex;flex-direction: row;justify-content: space-between;
background: #F8F8F8;border-radius: 5px;box-sizing: border-box;
width: calc(100vw -40px);align-items: center; padding:10px 0px;margin-top: 5px;">
<input maxlength="20" placeholder="请输入/扫码"
style="font-size: 30rpx;flex: 1;margin-right: 20px;padding-left: 10px;" type="number"
:value="page.code" @input="onKeyInput1" />
<view style="width: 1px;height: 20px;background: #ccc; margin-right: 10px;"></view>
<uni-icons type="camera-filled" color="#c0c4cc" size="22" style="flex-shrink: 0;margin-right: 10px;"
@click="scan" />
</view>
<text style="margin-left: 8px;font-size: 14px;color: #333;margin-top: 20px;">提货密码</text>
<view style="display: flex;flex-direction: row;justify-content: space-between;
background: #F8F8F8;border-radius: 5px; padding:10px 0px;
box-sizing: border-box;width: calc(100vw - 40px);align-items: center;margin-top: 10px;">
<input maxlength="6" placeholder="请输入提货密码" style="font-size: 30rpx;flex: 1;padding-left: 10px;"
type="number" :value="page.codeKey" @input="onKeyInput2" />
</view>
<view style="background: -webkit-linear-gradient(left,#FFB176,#FE923B); position: absolute; bottom: 30px;
width: 90%;border-radius: 100rpx;height: 80rpx;display: flex;
flex-direction: column;align-items: center;line-height: 80rpx;color: #FFFFFF;font-size: 36rpx;" @click="save">
绑定</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
page: {
code: '',
codeKey: '',
customerSid: '',
startHeight: 0,
endHeight: 0
}
}
},
onLoad() {
this.page.customerSid = getApp().globalData.sid
let info = uni.getSystemInfoSync();
this.page.startHeight = info.windowWidth * 0.6
this.page.endHeight = info.windowWidth * 0.8
},
methods: {
onKeyInput1(event) {
this.page.code = event.target.value
},
onKeyInput2(event) {
this.page.codeKey = event.target.value
},
scan() {
// 只允许通过相机扫码
let _this = this
uni.scanCode({
onlyFromCamera: true,
success(res) {
_this.page.code = res.result.substring(res.result.length - 20, res.result.length)
}
});
},
save() {
if (this.stringIsEmpty(this.page.code) || this.page.code.length != 20) {
this.shortToast('请输入或扫描20位提货编码')
return
}
if (this.stringIsEmpty(this.page.codeKey) || this.page.codeKey.length != 6) {
this.shortToast('请输入6位提货密码')
return
}
let _this = this
_this.$api.empcardBind(this.page).then((resp) => {
uni.navigateBack()
uni.$emit('order2', {})
}).catch(e => {
_this.longToast(e.msg)
})
}
}
}
</script>
<style>
.top{
width: 100vw;
height: 70vw;
}
</style>

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>
Write Preview
Loading…
Cancel
Save