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

<template>
    <div class="myshop">
        <!-- <div class="card">
            <div class="acc">商户余额</div>
            <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 class="btn1" @click="getToConvert">
                <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({merchant_id:i.merchant_id,shop_id:i.shop_id,name:i.name})">&#xe635;</div> -->
                    <div class="twocode iconfont" @click.stop="goto('/pagesC/invi-img/index',{merchant_id:i.merchant_id,shop_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 class="elseMoney1 flex_r flex_jb flex_ac">
                    <div class="total_money" @click.stop="goto('/pagesC/settledMerchant/shopOrderLog',{s:1,shop_id: i.shop_id})">总收入<span>￥{{i.total_money || "0.00"}}</span></div>
                    <div class="day_income" @click.stop="goto('/pagesC/settledMerchant/shopOrderLog',{s:1,shop_id: i.shop_id})">今日收入<span>￥{{i.day_income || "0.00"}}</span></div>
                </div>
            </div>
            <view class="flex_r flex_jc" @click="getProPage">
                <view class="settle_btn flex_r flex_ac flex_jc">查看入驻协议</view>
            </view>
        </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 })
        },
        // 跳转到转化页面
        getToConvert() {
            this.goto("/pagesC/convert/index")
        },
        // 跳转到店铺详情
        goDetail(id) {
            this.goto("/pagesC/settledMerchant/merchantDetail", { id })
        },
        showcode(da) {
            if(da.merchant_id) this.$refs.createCode.showCanvas(da)
        },
        // 复制账号
        copyText(e) {
            uniCopy({
                content: e,
                success: (res) => {},
                error: (e) => {},
            });
        },
        getProPage() {
            uni.navigateTo({
                url: "/pages/agreement/index?tit=商家入驻协议&type=30})"
            });
        },
    },
    onLoad(da) {},
    onShow() {
        this.getList()
    },
    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;
    .acc{
        font-size: 26rpx;
        padding-left: 38rpx;
        padding-top: 30rpx;
    }

    .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% - 65rpx);
        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;
        }
    }

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

        .iconfont {
            color: #fff;
            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: 0 0 30rpx;

    .list-item {
        margin-bottom: 150rpx;
        border-radius: 16rpx 16rpx 0 0;
        padding: 28rpx 32rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.12);
        box-shadow: 4rpx 0 8rpx 4rpx rgba(0, 0, 0, 0.12);
        position: relative;
        width: 100%;

        .elseMoney1{
            height: 90rpx;
            background-color: #ECECEC;
            border-radius: 0 0 30rpx 30rpx;
            // margin-top: -50rpx;
            padding: 0 32rpx 0;
            font-size: 26rpx;
            color: #666;
            position: absolute;
            width: 100%;
            bottom: -86rpx;
            left: 0;
            box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
            // border-right: 2rpx solid rgba(0, 0, 0, 0.12);
            // border-left: 2rpx solid rgba(0, 0, 0, 0.12);
            // border-bottom: 2rpx solid rgba(0, 0, 0, 0.12);

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

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

    .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;
        }
    }
}
.settle_btn {
    width: 300rpx;
    height: 70rpx;
    // padding: 40rpx 60rpx;
    background: #2db48a;
    font-size: 26rpx;
    color: #fff;
    border-radius: 12rpx;
    margin-bottom: 30rpx;
}
</style>