<template>
|
<view class="container">
|
<navbar title = '水卡共享'></navbar>
|
<view class="content">
|
<view class="code-box">
|
<view v-if="userInfo.waterCardNumber && !isShareCard" class="code">
|
<l-qrcode :value="codeParams" size="260rpx" color="rgb(12, 15, 36)" :icon="headImg" iconSize="70rpx"></l-qrcode>
|
<text>会员卡：{{userInfo.waterCardNumber}}</text>
|
</view>
|
<view v-else class="none-code">
|
<image src="../../../../static/images/other/code-none.png"></image>
|
<text v-if="isShareCard">共享卡</text>
|
<text v-else>未绑定水卡</text>
|
</view>
|
</view>
|
<view class="scan-box">
|
<view class="scan-btn" @click="toScan()">扫码共享</view>
|
<view class="tips">
|
<text>1、被共享者完善用户信息，点击扫码共享扫描二维码。</text>
|
<text>2、扫描成功后跳转确认页面点击确认，等待共享者在共享列表里点击确认即可共享成功。</text>
|
<text>3、共享者可在共享列表里维护该卡的共享卡信息。</text>
|
</view>
|
</view>
|
<view @click="navTo()" class="btn-box">共享列表</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import head from '../../../../static/images/index/head.png'
|
const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
|
const isShareCard = ref(userInfo.value.userCardType)
|
const codeParams = ref(userInfo.value.waterCardNumber)
|
const headImg = ref(head)
|
function toScan(){
|
//调用二维码扫描接口
|
if(userInfo.value.waterCardNumber){
|
uni.showToast({
|
title:'已存在会员卡!',
|
icon:'none'
|
})
|
}else{
|
uni.scanCode({
|
scanType: ['qrCode'],
|
success: function (res) {
|
console.log('条码内容：' + res.result);
|
uni.navigateTo({
|
url:`/pages/functionList/share/shareConfirm/index?codeParams=${res.result}`
|
})
|
}
|
});
|
}
|
}
|
function navTo(){
|
uni.navigateTo({
|
url:'/pages/functionList/share/shareList/index'
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
box-sizing: border-box;
|
padding-top:60rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.code-box{
|
width: 80%;
|
height:560rpx;
|
background: #fff;
|
border-radius:26rpx;
|
border-bottom:2rpx solid #bdd7ff;
|
margin-bottom: 20rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.code{
|
width:300rpx;
|
height: 326rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
text{
|
color: #4878bf;
|
font-size:600;
|
}
|
}
|
.none-code{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
image{
|
width:300rpx;
|
height:300rpx;
|
}
|
text{
|
color: #4878bf;
|
font-size:600;
|
}
|
}
|
}
|
.scan-box{
|
width: 100%;
|
height:500rpx;
|
border-bottom:1rpx dashed #bdd7ff;
|
// border-top:1rpx solid #bdd7ff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
display: flex;
|
flex-direction: column;
|
justify-content:flex-start;
|
align-items: center;
|
padding:30rpx 0;
|
box-sizing: border-box;
|
.scan-btn{
|
width:300rpx;
|
height: 80rpx;
|
background: #78a3ff;
|
border-radius:40rpx;
|
text-align: center;
|
line-height: 80rpx;
|
color: #FFFFFF;
|
margin-bottom:50rpx;
|
}
|
.tips{
|
width:86%;
|
text{
|
display: block;
|
font-size:26rpx;
|
margin-bottom:20rpx;
|
color: #555555;
|
line-height:56rpx;
|
}
|
}
|
}
|
.btn-box{
|
width:400rpx;
|
height: 70rpx;
|
background: #688ee1;
|
border-radius:40rpx;
|
text-align: center;
|
line-height: 70rpx;
|
color: #FFFFFF;
|
position: absolute;
|
bottom:120rpx;
|
letter-spacing:5rpx;
|
}
|
}
|
}
|
|
</style>
|
