LJH_Shop/niucloud/addon/mall/uni-app/pages/shop/detail.vue

<template>
    <view  class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden" :style="themeColor()" v-if="Object.keys(shopDetail).length">
        <view class="px-[var(--sidebar-m)] top-mar">
            <view class="card-template mb-[var(--top-m)]">
                <view class="flex items-center justify-between">
					<view class="flex items-center">
						<view class="w-[100rpx] h-[100rpx] overflow-hidden">
                            <image v-if="shopDetail.icon" :src="img(shopDetail.icon)" class="w-[100rpx] h-[100rpx] rounded-full"></image>
                            <image v-else :src="img('addon/mall/shop/shop_default.png')" class="w-[100rpx] h-[100rpx] rounded-full"></image>
						</view>
						<view class="ml-[20rpx]">
							<view class="flex items-center mb-[12rpx]">
								<text class="tag w-[60rpx] h-[32rpx] flex-center mr-[10rpx] text-[22rpx] text-[#802502] rounded-[6rpx]" v-if="shopDetail.is_self">自营</text>
								<text class="text-[30rpx] font-500">{{ shopDetail.site_name }}</text>
							</view>
							<view class="text-[24rpx] text-[var(--text-color-light9)]">
								{{shopDetail.follow_number}}人关注
							</view>
						</view>
					</view>
                    <view>
                        <view class="w-[130rpx] h-[54rpx] flex-center primary-btn-bg rounded-full" v-if="!isFollow" @click="collectShop(shopDetail.site_id,1)">
                            <text class="nc-iconfont nc-icon-guanzhuV6xx text-[#fff] text-[26rpx]"></text>
                            <text class="text-[22rpx] font-500 text-[#fff] ml-[6rpx]">关注</text>
                        </view>
                        <view v-else class="w-[130rpx] h-[54rpx] flex-center primary-btn-bg rounded-full">
                            <text class="nc-iconfont nc-icon-xihuanV6mm text-[#fff] text-[26rpx]"></text>
                            <text class="text-[22rpx] font-500 text-[#fff] ml-[6rpx]" @click="collectShop(shopDetail.site_id,0)">已关注</text>
                        </view>
                    </view>
				</view>
            </view>
            <view class="card-template mb-[var(--top-m)]">
                <view class="card-template-item justify-between" @click="storePic = true">
                    <view class="text-[28rpx]">店铺资质</view>
                    <view class="nc-iconfont nc-icon-gerenziliaoV6xx text-[40rpx]"></view>
                </view>
                <view class="card-template-item justify-between" @click="qrcode = true">
                    <view class="text-[28rpx]">店铺二维码</view>
                    <view class="nc-iconfont nc-icon-erweimaV6xx-1 text-[40rpx]"></view>
                </view>
                <view class="card-template-item justify-between" @click="call(shopDetail.phone)">
                    <view class="text-[28rpx]">联系客服</view>
                    <view class="nc-iconfont nc-icon-kefuV6xx-4 text-[40rpx]"></view>
                </view>
            </view>
            <view class="card-template mb-[var(--top-m)]">
                <view class="card-template-item justify-between !items-stretch">
                    <view class="text-[28rpx] flex-shrink-0 mr-[20rpx]">店铺简介</view>
                    <view class="text-[28rpx] text-right">{{shopDetail.desc }}</view>
                </view>
                <view class="card-template-item justify-between !items-stretch">
                    <view class="text-[28rpx] flex-shrink-0 mr-[20rpx]">店铺地址</view>
                   <view class="flex-1 flex items-center justify-end" @click="getAddress" v-if="shopDetail.full_address">
                     <view class="text-[28rpx] text-right multi-hidden leading-[1.4]">{{shopDetail.full_address }}</view>
                     <text class="nc-iconfont nc-icon-dizhiguanliV6xx text-[30rpx] text-primary ml-[10rpx]"></text>
                   </view>
                   <view class="flex-1 flex items-center justify-end" v-else>商家暂未设置地址</view>
                </view>
                <view class="card-template-item justify-between" v-if="shopDetail.business_hours">
                    <view class="text-[28rpx]">营业时间</view>
                    <view class="text-[28rpx]">{{ shopDetail.business_hours }}</view>
                </view>
            </view>
            <view class="card-template text-center text-[30rpx] text-primary font-500" @click="redirect({url:'/addon/mall/pages/goods/list',param:{site_id:shopDetail.site_id}, mode: 'navigateTo'})">
                查看全部商品
            </view>
        </view>
        <view @touchmove.prevent.stop>
            <u-popup class="popup-type" :show="qrcode" @close="qrcode = false" mode="center" round="var(--rounded-big)">
                <view class="w-[540rpx] rounded-[24rpx] min-h-[300rpx] popup-common" @touchmove.prevent.stop>
                    <view class="title">店铺二维码</view>
                    <view class="flex-center">
                        <!-- #ifdef H5 -->
                        <image :src="wapImage" class="w-[120rpx] h-[120rpx]" mode="aspectFill"></image>
                        <!-- #endif -->
                        <!-- #ifdef MP-WEIXIN -->
                        <image :src="img(qrcodeImg)" class="w-[120rpx] h-[120rpx]" mode="aspectFill"></image>
                        <!-- #endif -->
                    </view>
                </view>
            </u-popup>
        </view>

        <view @touchmove.prevent.stop>
            <u-popup class="popup-type" :show="storePic" @close="storePic = false" mode="center" zIndex="995" :overlayStyle="{zIndex: 994}" round="var(--rounded-big)">
                <view class="w-[540rpx] rounded-[24rpx] min-h-[300rpx] popup-common" @touchmove.prevent.stop>
                    <view class="title">店铺资质</view>
                    <view class="flex-center pb-[56rpx]">
                        <view class="w-[400rpx]">
                            <template v-if="shopDetail.shop.business_image.length">
                                <u-swiper :list="shopDetail.shop.business_image" :indicator="shopDetail.shop.business_image.length" :indicatorStyle="{'bottom': '50rpx'}" indicatorMode="dot" :autoplay="true"  height="400rpx" radius="0" @click="swiperClick"></u-swiper>
                            </template>
                            <view v-else class="text-center">暂无店铺资质</view>
                        </view>
                    </view>
                </view>
            </u-popup>
        </view>
        <loading-page :loading="loading"></loading-page>
    </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { img, redirect} from '@/utils/common'
import { getShopInfo, editShopCollect } from '@/addon/mall/api/shop';
import { getShopQrcode } from '@/app/api/shop';
import { useLogin } from '@/hooks/useLogin'
import useMemberStore from '@/stores/member'
import QRCode from 'qrcode'

// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

const siteId = ref('')
const shopDetail = ref<Object>({});
const loading = ref<boolean>(true);
onLoad((option:any) => {
	siteId.value = option.site_id;
	shopInfoFn(siteId.value);
    // #ifdef MP-WEIXIN
    loadWeapp()
    // #endif
});

const shopInfoFn = (siteId:any) =>{
    loading.value = true;
    getShopInfo(siteId).then((res:any) =>{
        shopDetail.value = res.data;
        shopDetail.value.rate = 5
        shopDetail.value.shop.business_image = []
        if(shopDetail.value.shop.business_license){
            shopDetail.value.shop.business_license.split(',').forEach((item:any, index:any) => {
                shopDetail.value.shop.business_image.push(img(item))
            })
        }
        isFollow.value = shopDetail.value.member_info.is_follow
        loading.value = false;
    }).catch(() =>{
        loading.value = false;
    })
}

// 关注
let isFollow = ref<any>(0);
const collectShop = (site_id:any,is_follow:any) =>{
    // 检测是否登录
	if (!userInfo.value) {
		useLogin().setLoginBack({ url: '/addon/mall/pages/shop/detail', param: { site_id: shopDetail.value.site_id } })
		return false
	}
    editShopCollect({
        site_id: site_id,
		is_follow: is_follow
    }).then(res =>{
        isFollow.value = !isFollow.value;
        if (isFollow.value) {
			uni.showToast({
				title: '关注成功',
				icon: 'none'
			});
		} else {
			uni.showToast({
				title: '取消关注',
				icon: 'none'
			});
		}
    })
}
const storePic = ref(false)


const qrcode = ref(false)
const wapPreview = ref<any>('')
const wapImage = ref('') //公众号二维码
const qrcodeImg = ref('') //小程序二维码
// #ifdef H5 
const loadQrcode = () => {
    wapPreview.value = location.href
    // errorCorrectionLevel：密度容错率L（低）H(高)
    QRCode.toDataURL(wapPreview.value, { errorCorrectionLevel: 'L', margin: 0, width: 120 }).then(url => {
        wapImage.value = url
    })
}
loadQrcode()
// #endif

const loadWeapp = () => {
	getShopQrcode(siteId.value).then((res:any) =>{
		qrcodeImg.value = res.data
	})
}


const call = (data: any) => {
    if (!data) {
        uni.showToast({
            title: '商家暂未设置联系电话',
            icon: 'none'
        });
        return false
    }
    uni.makePhoneCall({
        phoneNumber: data,
        success: (res: any) => {
        },
        fail: (res: any) => {
        }
    })
}

const getAddress = () => {
	uni.openLocation({
		latitude: Number(shopDetail.value.latitude),
		longitude: Number(shopDetail.value.longitude),
		success: function () { }
	});
}
const swiperClick = (index:any)=>{
	if(typeof index == 'number')
		imgListPreview(shopDetail.value.shop.business_image,index)
}
//预览图片
const imgListPreview = (item:any,index:any) => {
	if(Array.isArray(item)){
		if (!item.length) return false
		var urlList =item;
		uni.previewImage({
			indicator: "number",
			current:index,
			loop: true,
			urls: urlList
		})
	}else{
		if (item === '') return false
		var urlList = []
		urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
		uni.previewImage({
			indicator: "number",
			loop: true,
			urls: urlList
		})
	}
}	
// 关闭预览图片
onUnload(()=>{
    // #ifdef  H5 || APP
    uni.closePreviewImage()
    // #endif
})
</script>
<style lang="scss" scoped>
.tag{
	background: linear-gradient( 90deg, #FFD6B5 0%, #FFBA8C 100%)
}
</style>