Client-Teapay/src/pages/orderingfood/merchantlist.vue

<template>
    <div class="merchantlist">
        <div class="head">
            <div class="bg" v-if="IsMobile"></div>
            <div class="card" :style="{marginTop:IsMobile?'-110rpx':'30rpx'}">
                <div class="live_name">{{ typeto(localInfo.level_id) }}</div>
                <view class="regional">
                    <template v-if="localInfo.regional">
                        <img src="@/static/my/regional.png" alt="" srcset="" class="ico">
                        <!-- <span class="ico iconfont">&#xf727;</span> -->
                        <span class="txtinfo">区域节点：{{ localInfo.regional }}</span>
                    </template>
                </view>
                <div class="mm">
                    <span>账户余额</span>
                    <span class="balance dinB">{{ localInfo.integral || 0 }}</span>
                </div>
            </div>
        </div>
        <div class="l_tabBar flex_r flex_jb">
            <div class="item" v-for="(i,s) in tabs" :key="s" @click="goto(i.url)">
                <img :src="i.ico" alt="" class="ico">
                <!-- <div class="tit">{{ i.tit }}</div> -->
            </div>
        </div>
        <view class="loadingBox" v-if="loading">
            <img class="loading" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/2caa2ae4dc849856f3eca4ff2b3abf7fd19e7632gif" />
        </view>
        <div class="list" v-else>
            <div class="li_item" v-for="(i,s) in merchantList" :key="s" @click="goMerchant(i)">
                <div class="li_title">{{ i.brand_name }}</div>
                <div class="logo_img">
                    <img :src="i.restaurant_img" alt="">
                </div>
                <div class="con_box">
                    <div class="p1 ellipsis">{{ i.restaurant_name }}</div>
                    <div class="p2">{{ i.restaurant_address }}</div>
                    <div class="p3">{{ $h.Div(i.distance, 1000).toFixed(2) }} km</div>
                </div>
            </div>
        </div>
        <activation ref="activation" tit="激活" :close="isActivation"/>
    </div>
</template>
<script>
import activation from "@/components/activation/activation.vue"
import tabs from './tabs'
import { post } from "@/request/api.js";
export default {
    name: "merchantlist",
    props: {},
    components: { activation },
    data() {
        return {
            IsMobile: true,
            loading: true,
            Query: {
                lat: 113.9367,
                lng: 22.5325,
                page: 1,
                rows: 20
            },
            merchant: {},
            merchantList: [],
            localInfo: {},
            tabs,
        };
    },
    methods: {
        // 获取附近商家
        getlists() {
            post("local/getMerchant", this.Query).then(res => {
                if (res.code == 0) {
                    this.loading = false
                    let merchantList = res.data.data
                    delete res.data.data
                    this.merchant = res.data
                    this.merchantList = [...this.merchantList, ...merchantList]
                    this.Query.page++
                }
            })
        },
        // 获取当前位置
        async getLocation() {
            let adres = await uni.Location();
            this.Query = { ...this.Query, ...adres };
            this.getlists();
        },
        // 去店铺
        goMerchant(da) {
            uni.setStorageSync("MerchantItem", da)
            this.goto("/pagesB/orderingfood/orderingfood", {
                brand_id: da.brand_id,
                restaurant_id: da.restaurant_id
            })
        },
        // 是否激活数智生活
        isActivation() {
            post("local/isActivation").then(res => {
                if (res.code == -1) {
                    this.activation();
                } else {
                    this.getLocation();
                    this.getLU();
                }
            })
        },
        // 打开激活弹窗
        activation(){
            this.$refs.activation.open()
        },
        async getLU() {
            this.localInfo = await uni.Luserfun()
        },
        typeto(va) {
            switch (va) {
                case 1: return "消费商";
                case 2: return "推广大使";
                case 3: return "合伙人";
                case 4: return "联合创始人";
                case 5: return "联合发起人";
                default: return ""
            }
        }
    },
    onLoad(da){
        let app = uni.getSystemInfoSync();
        if(["android","ios","devtools"].includes(app.platform)){
            this.IsMobile = true
        }else this.IsMobile = false
    },
    onShow() {
        this.isActivation();
    },
    onReachBottom() {
        if (this.Query.page < this.merchant.last_page) this.getlists();
    },
};
</script>
<style scoped lang='scss'>
.head {
    .bg {
        height: 300rpx;
        background-image: url("http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/a5500a3c12f967a83d123f774b333e2b2d9729bcpng");
        background-size: 100% 100%;
    }

    .card {
        width: calc(100% - 60rpx);
        margin: -110rpx 30rpx 0;
        // background-color: #473D31;
        background: url("http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/33ce780a63d0cedd92868b1784a355d2bfaad827jpg");
        background-size: 100% 100%;
        border-radius: 16rpx;
        padding: 28rpx 30rpx;
        height: 280rpx;
        position: relative;

        .balance {
            font-size: 46rpx;
            margin-top: 8rpx;
            margin-left: 26rpx;

            &:before {
                content: "￥";
                font-size: 24rpx;
            }
        }

        .live_name {
            font-size: 36rpx;
            color: #CD7C2B;
            position: absolute;
            top: 16rpx;
            left: 90rpx;

        }

        .mm {
            margin: auto 0;
            text-align: center;
            line-height: 98rpx;
        }
    }
    .regional {
        height: 30rpx;
        line-height: 30rpx;
        margin-top: 40rpx;
        
        
        // .ico {
        //     font-size: 26rpx;
        //     margin-right: 12rpx;
        // }

        .ico {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .txtinfo {
            font-size: 22rpx;
            color: #333;
        }
        .ico, .txtinfo {
            vertical-align: middle;
        }
    }
}

.list {
    padding: 30rpx;

    .li_item {
        margin-bottom: 20rpx;
        padding: 28rpx 32rpx;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
    }

    .li_title {
        font-size: 36rpx;
        margin-bottom: 16rpx;
    }

    .logo_img,
    .con_box {
        display: inline-block;
        vertical-align: top;
    }

    .logo_img {
        img {
            height: 180rpx;
            width: 180rpx;
            border-radius: 10rpx;
        }
    }

    .con_box {
        height: 180rpx;
        width: calc(100% - 180rpx - 28rpx);
        margin-left: 28rpx;
        position: relative;

        .p1 {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 6rpx;
        }

        .p2 {
            font-size: 24rpx;
            color: #999;
        }

        .p3 {
            font-size: 24rpx;
            color: #666;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
}

.l_tabBar {
    margin: 32rpx 32rpx 0;
    background-color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
    flex-wrap: wrap;

    .item {
        width: 105rpx;
        margin: 10rpx 10rpx;
    }

    .ico {
        width: 100%;
        height: 138rpx;
    }

    // .tit{
    //   font-size: 26rpx;
    //   text-align: center;
    // }
}

.loadingBox {
    text-align: center;
    padding: 100rpx 0;

    .loading {
        width: 280rpx;
        height: 280rpx;
    }
}
</style>