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

<template>
    <div class="hotel">
        <navcustom :config="config" class="navcustom" v-if="customShow"/>
        <div class="head_img" @click="onpreview(0)">
            <image :src="detail.atlas[0]" mode="aspectFill" class="bg_img" />
        </div>
        <div class="head_info">
            <div class="head_info_row flex_r flex_ac">
                <image class="logo" :src="detail.logo"/>
                <div class="head_name">
                    <div class="name">{{ detail.name }}</div>
                    <div class="flex_r flex_ac">
                        <uni-rate :max="5" :value="detail.score" :size="12" allow-half />
                        <span class="commentScore">{{detail.score}}分</span>
                    </div>
                </div>
            </div>
            <div class="h_address flex_r flex_jb flex_ac">
                <div class="hil">
                    <div class="h_tags flex_r flex_ac flex_wrap">
                        <span class="tag">距您 {{ $h.Div(Number(detail.distance), 1000).toFixed(2) || 0 }} km</span>
                    </div>
                    <div class="address">{{ detail.address }}</div>
                </div>
                <div class="iconfont ico" @click="openm">&#xe6b3;</div>
            </div>
            <div class="summary" v-if="detail.summary">
                <div class="tit">店铺介绍</div>
                <div class="txt ellipsis3">{{detail.summary}}</div>
            </div>
            <div class="atlas_list">
                <image v-for="(i,s) in detail.atlas" :key="s" :src="i" @click="onpreview(s)" mode="aspectFill" class="atlas_img" />
            </div>
        </div>
        <div class="btn-box">
            <div class="btn" @click="topay">快捷买单</div>
        </div>
        <!-- 图片查看组件 -->
        <preview ref="previewimg" :listType="2" @close="previewclose"/>
        <!-- 授权 -->
        <!-- <authorize-module ref="autho" :shopInfo="shopInfo" @authGetTelSuccess="onauthGetTelSuccess" /> -->
    </div>
</template>
<script>
let app = getApp();
import preview from "@/components/swiper-preview/index";
import navcustom from "@/components/navigationCustom/navigation-custom.vue"
import authorizeModule from "@/components/authorize-module/index";
import { post } from "@/request/api.js";
export default {
    name: "hotel",
    props: {},
    components: { preview, navcustom, authorizeModule },
    data() {
        return {
            query: {},
            shopID: "",
            detail: {},
            config: {
                title: "",
                bgcolor: "",
                type: 1,
                linear: false,
                transparent: true,
                fontcolor: "#000",
                menuIcon: "",
                menuText: ""
            },
            customShow: true,

            shopInfo: {}, // 商铺信息
            unid: "",
        };
    },
    methods: {
        async merchant(){
            uni.showLoading({ title: '加载中',mask: true });
            let adres = await uni.Location();
            post("v1/merchant/detail", {
                shop_id: this.shopID,
                longitude: adres.lng,
                latitude: adres.lat
            }).then((res) => {
                uni.hideLoading();
                if (res.code == 0) {
                    let da = res.data;
                    if(da.atlas) da.atlas = JSON.parse(da.atlas)
                    else da.atlas = []
                    this.detail = da
                }
            });
        },
        onpreview(current) {
            if (this.detail.atlas.length) {
                this.customShow = false
                this.$refs.previewimg.open({
                    imgs: this.detail.atlas,
                    current,
                });
            }
        },
        previewclose(){
            this.customShow = true
        },
        openm() {
            let { name, address, latitude, longitude } =  this.detail
            uni.openLocation({
                latitude: Number(latitude), longitude: Number(longitude), scale: 18, name, address,
                success: function() {
                    console.log('success');
                }
            });
        },
        topay(){
            this.setLS("topay_merchant",this.detail)
            this.goto("/pagesC/settledMerchant/pay")
        },
        // SoHAuth() {
        //     this.$refs.autho.onSoHAuth();
        // },
        login(invite) {
            const deviceInfo = wx.getDeviceInfo()
            let that = this;
            // #ifdef  MP-WEIXIN
            wx.login({
                success(res) {
                    if (res.code) {
                        post("v1/appletLogin", {
                            code: res.code,
                            phone_model: deviceInfo.model,//设备型号
                            phone_brand: deviceInfo.brand,//设备品牌
                            invite: uni.getStorageSync("inviteCode") || ""
                        }).then((res) => {
                            if (res.code === 0) {
                                if (res.data.token) {
                                    uni.setStorageSync("token", res.data.token);
                                    that.merchant();
                                } else {
                                    that.unid = res.data.unid;
                                    uni.setStorageSync("unid", res.data.unid);
                                    that.shopInfo = app.globalData.shopInfo;
                                    // that.SoHAuth(); //调取授权弹窗
                                }
                            }
                        });
                    }
                },
            });
            // #endif
        },
        // onauthGetTelSuccess(da) {
        //     this.SoHAuth();
        //     post("v1/getMobile", {
        //         unid: this.unid,
        //         ...da.detail,
        //     }).then((res) => {
        //         if (res.code === 0) {
        //             uni.setStorageSync("token", res.data.token);
        //             this.merchant();
        //         }
        //     });
        // },
        sceneToObject(scene) {
            scene = decodeURIComponent(scene);
            let ret = {}
            let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
            let strParam = scene;
            let result
            while ((result = regParam.exec(strParam)) != null) {
                ret[result[1]] = result[2]
            }
            return ret;
        },
    },
    onLoad(da) {
        console.log("参数：", da);
        if(da.scene) da = this.sceneToObject(da.scene);
        console.log("参数：", da);
        this.shopID = da.id;
        let token = uni.getStorageSync("token");
        if (!token) this.login();
        else this.merchant();
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.navcustom{
    position: absolute;
    left: 0;
    top: 0;
}
.head_img {
    .bg_img {
        width: 100%;
        height: 460rpx;
    }
}

.head_info {
    padding: 30rpx;

    .head_info_row{
        .logo{
            width: 120rpx;
            height: 110rpx;
            border-radius: 12rpx;
            margin-right: 25rpx;
        }
        .head_name {
            .name{
                font-size: 36rpx;
                font-weight: 600;
                margin-bottom: 12rpx;
            }
            .commentScore {
                margin-left: 10rpx;
                font-size: 24rpx;
            }
        }
    }

    .h_tags {
        font-size: 25rpx;
        font-weight: 400;
        margin-bottom: 6rpx;

        span {
            margin-right: 18rpx;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .h_address {
        padding: 20rpx 0;
        margin-bottom: 26rpx;

        .address {
            font-size: 24rpx;
        }

        .hil{
            width: calc(100% - 100rpx);
        }

        .ico {
            width: 60rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            font-size: 50rpx;
        }
    }
    .summary{
        font-size: 26rpx;
        color: #666;
        margin-bottom: 18rpx;
        .tit {
            height: 30rpx;
            line-height: 30rpx;
            font-size: 30rpx;
            margin-bottom: 18rpx;
            padding-left: 12rpx;
            border-left: 6rpx solid #00A238;
        }
    }
}
.atlas_list{
    max-height: 334rpx;
    overflow: hidden;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 220rpx);
    grid-gap: 14rpx 0;
    .atlas_img{
        width: 220rpx;
        height: 160rpx;
        border-radius: 12rpx;
    }
}
.btn-box{
    padding: 0 30rpx;
    .btn{
        // display: inline-block;
        color: #fff;
        background: #00A238;
        font-size: 36rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        // padding: 6rpx 30rpx;
        border-radius: 46rpx;
        margin-top: 50rpx;
    }
}
</style>