<template>
|
<view class="container">
|
<navbar title = '会员卡共享'></navbar>
|
<view class="content">
|
<block v-for="(item,index) in shareList" :key="index">
|
<view class="item-box">
|
<view class="item-img">
|
<image src="../../../../static/images/index/head.png"></image>
|
</view>
|
<view class="item-info">
|
<text>{{item.shareUserName}}</text>
|
<text>{{item.sharePhone}}</text>
|
</view>
|
<view class="item-handel">
|
<view class="btn">
|
<view class="btn1" v-if="item.shareType == 1" @click="shareConfirm(2,item.id)">确认共享</view>
|
<view class="btn2" v-if="item.shareType == 1 || item.shareType == 2 " @click="shareConfirm(3,item.id)">取消共享</view>
|
</view>
|
<view v-if="item.shareType == 1" class="status">待确认</view>
|
<view v-if="item.shareType == 2" class="status">共享中</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from 'vue'
|
import { askShareListApi ,editShareTypeApi} from '../../../../api/index.js'
|
const shareList = ref([
|
// {shareUserName:'',sharePhone:'',id:'',pictureUrl:'',shareType:1},
|
])
|
const userId = JSON.parse(uni.getStorageSync('userInfo')).id
|
//获取共享列表
|
async function getAskShareList(){
|
await askShareListApi(userId).then((res) =>{
|
console.log('res',res)
|
shareList.value = res.data
|
})
|
}
|
//共享确认
|
function shareConfirm(val,rowId){
|
let postData = {
|
shareType:val,//1:待确认，2：确认，3：已取消
|
id:rowId
|
}
|
if(val == 2){
|
uni.showModal({
|
title: '会员卡共享',
|
content: '确认共享您的会员卡？',
|
success: async function(res) {
|
if(res.confirm){
|
await editShareTypeApi(postData).then(async res1 =>{
|
if(res1.code == 200){
|
uni.showToast({
|
title:'共享成功！',
|
})
|
await getAskShareList()
|
}else{
|
uni.showToast({
|
title:'共享失败！',
|
icon:'none'
|
})
|
}
|
})
|
}
|
}
|
});
|
}else if(val == 3){
|
uni.showModal({
|
title: '会员卡共享',
|
content: '确认取消共享？',
|
success: async function(res) {
|
if(res.confirm) {
|
await editShareTypeApi(postData).then(async(res2) =>{
|
if(res2.code == 200){
|
uni.showToast({
|
title:'取消共享成功！'
|
})
|
await getAskShareList()
|
}else{
|
uni.showToast({
|
title:'取消失败！',
|
icon:'none'
|
})
|
}
|
})
|
}
|
}
|
});
|
}
|
}
|
onMounted(async() =>{
|
await getAskShareList()
|
})
|
</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:60rpx 32rpx 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
overflow:scroll;
|
.item-box{
|
position: relative;
|
width:100%;
|
height:160rpx;
|
background: #FFF;
|
border-radius:24rpx;
|
padding:10rpx 16rpx;
|
box-sizing: border-box;
|
margin-bottom:24rpx;
|
display: flex;
|
align-items: center;
|
box-shadow: 0 4rpx 6rpx 1rpx rgba(155, 180, 250, 0.3);
|
.item-img{
|
image{
|
width:90rpx;
|
height: 90rpx;
|
}
|
}
|
.item-info{
|
height:100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
margin-left: 16rpx;
|
}
|
.item-handel{
|
position: absolute;
|
right:20rpx;
|
display: flex;
|
flex-direction:column;
|
align-items: flex-end;
|
height:85%;
|
justify-content:flex-end;
|
.btn{
|
display: flex;
|
margin-bottom:5rpx;
|
.btn1{
|
margin-right:10rpx;
|
width:130rpx;
|
height:60rpx;
|
line-height: 60rpx;
|
border-radius:30rpx;
|
text-align: center;
|
font-size: 24rpx;
|
font-weight:600;
|
color: #4b73e3;
|
background: linear-gradient(to right,rgba(210, 222, 249, 0.8),#FFF);
|
}
|
.btn2{
|
width:130rpx;
|
height:60rpx;
|
line-height: 60rpx;
|
border-radius:30rpx;
|
text-align: center;
|
font-size: 24rpx;
|
font-weight:600;
|
color: #4b73e3;
|
// border:1rpx solid #869cd8;
|
box-shadow: 0 0 1rpx 1rpx rgba(166, 195, 249, 0.7);
|
}
|
}
|
.status{
|
color: #e3b745;
|
font-size:22rpx;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
