jje_uniapp/myPages/familyCard/index.vue

<template>
    <view class="page">
        <view class="scroll-y">

            <view class="title">
                <text>我收到的亲情卡</text>
            </view>

            <view class="loveCard" v-if="gotList.length === 0">
                <view class="flex-row justify-center">
                    <image src="/static/me/zhanwu.png" class="nullIcon"></image>
                </view>
                <view class="flex-row justify-center nullMsg">
                    <text>暂无收到的亲情卡</text>
                </view>
            </view>

            <view v-else>
                <view class="loveCard" v-for="(item,index) in gotList" :key="index" @click="jumpToDetail(item,2)">
                    <image src="/static/familyCard/shoudaoLove.png" class="imgBack"></image>
                    <view class="loveCardMsg">
                        <view class="flex-row">
                            <view>
                                <image :src="item.url || '/static/me/ud4.png'" class="avatar"></image>
                            </view>
                            <view class="flex-col">
                                <text class="name">{{item.presentUserName}}</text>
                                <text class="vipNo">{{item.presentUserNo}}</text>
                            </view>
                        </view>
                        <view class="flex-row justify-between">
                            <view class="flex-col priceView">
                                <text class="priceTitle">每月上限</text>
                                <view>
                                    <!--<text class="priceSymbol">￥</text>-->
                                    <text class="price">{{item.amountCap}}</text>
                                </view>
                            </view>
<!--                            <view class="flex-col priceView borderRight1">-->
<!--                                <text class="priceTitle">可用额度</text>-->
<!--                                <view>-->
<!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
<!--                                    <text class="price">{{item.totalBalance || 0}}</text>-->
<!--                                </view>-->
<!--                            </view>-->
                            <view class="flex-col priceView borderRight1">
                                <text class="priceTitle">已用额度</text>
                                <view>
                                    <!--<text class="priceSymbol">￥</text>-->
                                    <text class="price">{{item.amount || '0'}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="title">
                <text>我赠送的亲情卡</text>
            </view>

            <view class="loveCard" v-if="giveList.length === 0">
                <view class="flex-row justify-center">
                    <image src="/static/me/zhanwu.png" class="nullIcon"></image>
                </view>
                <view class="flex-row justify-center nullMsg">
                    <text>暂无赠送的亲情卡</text>
                </view>
            </view>

            <view v-else>
                <view class="loveCard" v-for="(item, index) in giveList" :key="index" @click="jumpToDetail(item,1)">
                    <image src="/static/familyCard/zengsLove.png" class="imgBack"></image>
                    <view class="loveCardMsg">
                        <view class="flex-row">
                            <view>
                                <image :src="item.url || '/static/me/ud4.png'" class="avatar"></image>
                            </view>
                            <view class="flex-col">
                                <text class="name">{{item.userName}}</text>
                                <text class="vipNo">{{item.userNo}}</text>
                            </view>
                        </view>
                        <view class="flex-row justify-between">
                            <view class="flex-col priceView ">
                                <text class="priceTitle">每月上限</text>
                                <view>
                                    <!--<text class="priceSymbol">￥</text>-->
                                    <text class="price">{{item.amountCap}}</text>
                                </view>
                            </view>
<!--                            <view class="flex-col priceView borderRight2">-->
<!--                                <text class="priceTitle">可用额度</text>-->
<!--                                <view>-->
<!--                                    &lt;!&ndash;<text class="priceSymbol">￥</text>&ndash;&gt;-->
<!--                                    <text class="price">{{item.totalBalance || 0}}</text>-->
<!--                                </view>-->
<!--                            </view>-->
                            <view class="flex-col priceView borderRight2">
                                <text class="priceTitle">已用额度</text>
                                <view>
                                    <!--<text class="priceSymbol">￥</text>-->
                                    <text class="price">{{item.amount || 0}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

            </view>

        </view>
        <view class="bottom">
            <view class="flex-row justify-center agreementView">
                <u-icon name="/static/me/o1.png" size="20" v-if="choose" @click="changeChoose"></u-icon>
                <u-icon name="/static/me/o.png" size="20" v-else @click="changeChoose"></u-icon>
                <text class="read">我已阅读并同意</text>
                <text class="agreement" @click="gotoAgreement">使用说明</text>
            </view>
            <view class="zsBtn" @click="jumpToGive">赠送亲情卡</view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {

                choose: false,
                giveList: [],
                gotList: []
            }
        },
        onShow() {
            this.getGiveList()
            this.getGotList()
        },
        onPullDownRefresh() {
            this.getGiveList()
            this.getGotList()
            uni.stopPullDownRefresh()
        },
        methods: {
            changeChoose() {
                this.choose = !this.choose
            },
            // 去协议页面
            gotoAgreement(type, name) {
                uni.navigateTo({
                    url: '/myPages/TermsOfService/index?name=' + name + '&type=' + type,
                })
            },
            jumpToGive() {
                if (!this.choose) {
                    uni.showToast({
                        icon: 'none',
                        duration: 3000,
                        title: '请勾选使用说明'
                    });
                } else {
                    uni.navigateTo({
                        url: '/myPages/familyCard/giveFamilyCard/giveFamilyCard'
                    })
                }
            },
            jumpToDetail(item,number) {
                uni.navigateTo({
                    url: '/myPages/familyCard/unbindFamilyCard/unbindFamilyCard?data=' + JSON.stringify(item) + '&type=' + number
                })
            },
            getImgUrlByOssId(list, number) {
                if (list) {
                    for (let i=0;i<list.length;i++){
                        let data = null
                        if (number == 1) {
                            data = list[i].userPhoto
                        } else {
                            data = list[i].presentUserPhoto
                        }
                        if (data) {
                            this.$api.getImage(data).then(res => {
                                list[i].url = res.data.data[0].url.replace(/^http:/, "https:")
                                this.$set(list,i,list[i])
                            });
                        }
                    }
                }
            },
            //获取我赠送的亲情卡列表
            getGiveList() {
                this.$api.getMyPresentList().then((res) => {
                    this.giveList = res.data.data
                    this.getImgUrlByOssId(this.giveList, 1)
                })

            },
            //查询我收到的情亲卡列表
            getGotList() {
                this.$api.getMyReceiveList().then((res) => {
                    this.gotList = res.data.data
                    this.getImgUrlByOssId(this.gotList, 2)
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../familyCard/index.scss";
</style>