Client-Teapay/src/pagesC/settledMerchant/myShop.vue

<template>
    <div class="myshop">
        <div class="card">
            <div class="money" @click="goto('/pagesC/settledMerchant/balanceLog',{s:0})">￥{{money.withdraw_money || "0.00"}}</div>
            <div class="msg">可提现金额(元)</div>
            <div class="btn" @click="getToCash">
                <span>去提现</span>
                <span class="iconfont">&#xe62e;</span>
            </div>
        </div>
        <div class="elseMoney flex_r flex_jb flex_ac">
            <div class="total_money" @click="goto('/pagesC/settledMerchant/balanceLog',{s:1})">总收入<span>￥{{money.total_money || "0.00"}}</span></div>
            <div class="day_income" @click="goto('/pagesC/settledMerchant/balanceLog',{s:1})">今日收入<span>￥{{money.day_income || "0.00"}}</span></div>
        </div>
        <div class="list" v-if="list.length">
            <div class="list-item" v-for="(i,s) in list" :key="s" @click="goDetail(i.shop_id)">
                <div class="head_info_row flex_r flex_ac flex_jb">
                    <image class="logo" :src="i.logo" />
                    <div class="head_name">
                        <div class="name">{{ i.name }}</div>
                        <div class="flex_r flex_ac">
                            <uni-rate :max="5" :value="i.score" :size="12" allow-half />
                            <span class="commentScore">{{i.score}}分</span>
                        </div>
                    </div>
                    <div class="twocode iconfont" @click.stop="showcode({id:i.shop_id,name:i.name})">&#xe635;</div>
                </div>
                <div class="p1 flex_r flex_jb flex_ac">
                    <div class="l"><span class="iconfont">&#xe9d2;</span>业务员：{{i.nickname}}</div>
                    <div class="r" @click.stop="copyText(i.mobile)"><span class="iconfont">&#xe9d3;</span>电话：{{i.mobile}}<span class="iconfont copy">&#xe602;</span></div>
                </div>
                <div class="p1 flex_r flex_jb flex_ac" v-if="i.user_nickname">
                    <div class="l"><span class="iconfont">&#xe9b9;</span>区域商：{{i.user_nickname}}</div>
                    <div class="r" @click.stop="copyText(i.user_mobile)"><span class="iconfont">&#xe9d3;</span>电话：{{i.user_mobile}}<span class="iconfont copy">&#xe602;</span></div>
                </div>
            </div>
        </div>
        <empty v-else />
        <create-code ref="createCode" />
    </div>
</template>
<script>
import uniCopy from "@/utils/copy";
import empty from "@/pagesC/components/empty/empty"
import createCode from "@/pagesC/components/createCode/index"
import { post } from "@/request/api.js";
export default {
    name: "myshop",
    props: {},
    components: { empty, createCode },
    data() {
        return {
            list: [],
            money: {}
        };
    },
    methods: {
        getList(page) {
            uni.showLoading({ title: '加载中' })
            post("v1/merchant/myShop").then(res => {
                if (res.code == 0) {
                    this.list = res.data.list.data
                    let { day_income, total_money, withdraw_money } = res.data
                    this.money = { day_income, total_money, withdraw_money }
                    uni.hideLoading()
                }
            })
        },
        // 跳转到提现页面
        getToCash(type) {
            this.goto("/pages/cash/index", { type })
        },
        // 跳转到店铺详情
        goDetail(id) {
            // this.goto("/pagesC/settledMerchant/merchantDetail", { id })
        },
        showcode(da) {
            if(da.id) this.$refs.createCode.showCanvas(da)
        },
        // 复制账号
        copyText(e) {
            uniCopy({
                content: e,
                success: (res) => {},
                error: (e) => {},
            });
        },
    },
    onLoad(da) {
        this.getList()
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.myshop {
    padding: 28rpx 32rpx;
    min-height: 100vh;
    background-color: #fff;
}

.card {
    height: 260rpx;
    border-radius: 30rpx;
    background: linear-gradient(to right, #696EFD, #2E57FD);
    position: relative;
    color: #fff;

    .money {
        font-size: 56rpx;
        font-weight: 600;
        padding-left: 35rpx;
        height: 55rpx;
        line-height: 55rpx;
        position: absolute;
        left: 0;
        top: calc(50% - 50rpx);
    }

    .msg {
        position: absolute;
        bottom: 30rpx;
        left: 0;
        padding-left: 38rpx;
        font-size: 26rpx;
    }

    .btn {
        color: #2E57FD;
        position: absolute;
        right: 0;
        top: calc(50% - 50rpx);
        width: 170rpx;
        text-align: center;
        height: 55rpx;
        line-height: 55rpx;
        font-size: 30rpx;
        background-color: #fff;
        border-radius: 28rpx 0 0 28rpx;

        .iconfont {
            font-size: 25rpx;
            margin-left: 12rpx;
        }
    }
}

.elseMoney {
    height: 120rpx;
    background-color: #ECECEC;
    border-radius: 0 0 30rpx 30rpx;
    margin-top: -30rpx;
    padding: 30rpx 32rpx 0;
    font-size: 26rpx;
    color: #666;

    div:last-child {
        text-align: right;
    }

    span {
        color: #2E57FD;
        font-size: 28rpx;
        margin-left: 8rpx;
    }
}

.list {
    padding: 60rpx 0 30rpx;

    .list-item {
        margin-bottom: 50rpx;
        border-radius: 16rpx;
        padding: 28rpx 32rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.12);
        box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
    }

    .head_info_row {
        .logo {
            width: 120rpx;
            height: 110rpx;
            border-radius: 12rpx;
            margin-right: 25rpx;
            border: 1px solid #e5e5e5;
        }

        .head_name {
            width: calc(100% - 220rpx);

            .name {
                font-size: 36rpx;
                font-weight: 600;
                margin-bottom: 12rpx;
            }

            .commentScore {
                margin-left: 10rpx;
                font-size: 24rpx;
            }
        }

        .twocode {
            font-size: 60rpx;
        }
    }

    .p1 {
        font-size: 26rpx;
        margin-top: 20rpx;

        .iconfont {
            font-size: 26rpx;
            color: #2E57FD;
            margin-right: 10rpx;
        }
        .copy{
            color: #333;
            margin-left: 6rpx;
        }
    }
}
</style>