roamfuding-xcx/page_user/techan/techandp.vue

 <template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar">
		</u-navbar>
		<u-swiper class="bj" :height="582" bg-color="#fff"  :list="list"></u-swiper>
        <view class="box">
        	<view class="name">
        		{{obj.name}}
        	</view>
			<view class="xiao">
				营业时间：{{obj.startTime}}-{{obj.endTime}}
			</view>
			<view class="xiao">
				地址：{{obj.address}}
			</view>
			<view class="liat">
				<image @click="btndh" src="https://api.ccttiot.com/smartmeter/img/static/u8ItYUuDcFXMAe4xGutU" mode=""></image>
				<image @click="btntel" src="https://api.ccttiot.com/smartmeter/img/static/uJph4gXvhIFYLsExnUYF" mode=""></image>
				<!-- <image src="" mode=""></image> -->
			</view>
			<view class="haowu">
				精选好物
			</view>
			<view class="hwlist">
				<view class="hwitem" v-for="(item,index) in obj.specialties" :key="index" @click="btnhw(item)">
					<image :src="item.picture ? item.picture.split(',')[0] : item.picture" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				id:'',
				list:[],
				obj:{}
			}
		},
		onLoad(e) {
            this.id = e.id
			this.getdianpu()
		},
		methods: {
			// 点击拨打电话
			btntel(){
				uni.makePhoneCall({
					phoneNumber: this.obj.contactMobile,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击进行导航
			btndh(){
				if (!this.obj.latitude || !this.obj.longitude) {
					uni.showToast({
						title: '坐标数据不完整',
						icon: 'none',
						duration:3000
					})
					return
				}
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] === false) {
							uni.showModal({
								title: '位置权限',
								content: '需要获取您的位置信息才能进行导航，请在设置中开启位置权限',
								confirmText: '去设置',
								success: (modalRes) => {
									if (modalRes.confirm) {
										uni.openSetting()
									}
								}
							})
							return
						}
						this.openMap()
					}
				})
			},
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: parseFloat(this.obj.latitude), // 确保是数字类型
					longitude: parseFloat(this.obj.longitude), // 确保是数字类型
					name: this.obj.name || '目的地', // 地点名称
					success: function(res) {
						console.log('打开地图成功', res)
					},
					fail: function(err) {
						console.error('打开地图失败', err)
						uni.showToast({
							title: '打开地图失败: ' + (err.errMsg || '未知错误'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 请求店铺详情
			getdianpu(){
				this.$u.get(`/app/store/detail/${this.id}`).then((res) => {
					if(res.code == 200){
						this.obj = res.data
						let imgArray = res.data.picture.split(',')
						imgArray.forEach(item =>{
							this.list.push({
								image: item
							})
						})
					}
				})
			},
			// 点击精选好物跳转详情
			btnhw(item){
				uni.navigateTo({
					url:'/page_user/techan/techansp?id=' + item.id
				})
			}
		}
	}
</script>
<style lang="less">
	::v-deep .u-icon__icon,
	::v-deep .u-title{
		padding-bottom: 22rpx !important;
	}
	.box{
		width: 750rpx;
		overflow: hidden;
		height: 59vh;
		background: #FFFFFF;
		border-radius:50rpx 50rpx 0 0;
		position: relative;
		top: -100rpx;
		overflow: scroll;
		padding-bottom: 30rpx;
		padding: 36rpx 48rpx;
		.hwlist{
			display: flex;
			gap: 30rpx;
			margin-top: 26rpx;
			overflow: scroll;
			width: 750rpx;
			padding-right: 80rpx;
			padding-bottom: 30rpx;
			.hwitem{
				width: 200rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
				text{
					font-weight: 600;
					font-size: 30rpx;
					color: #3D3D3D;
					display: block;
					margin-top: 16rpx;
					text-align: center;
				}
			}
		}
		.haowu{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			margin-top: 56rpx;
		}
		.liat{
			display: flex;
			justify-content: space-around;
			gap: 122rpx;
			margin-top: 68rpx;
			padding-left: 38rpx;
			image{
				width: 112rpx;
				height: 166rpx;
			}
		}
		.name{
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D;
			margin-bottom: 14rpx;
		}
		.xiao{
			font-size: 28rpx;
			color: #3D3D3D;
			margin-top: 16rpx;
		}
	}
	.bj{
		width: 750rpx;
		height: 582rpx;
	}
	page {
		background: #fff;
		height: 100vh;
		overflow: hidden;
	}
</style>