detection-user/pages/detection/MerchantDetails.vue

<!-- 默认复制 -->

<template>
	<view class="content">
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="warp-top">
					<image src="http://www.nuoyunr.com/lananRsc/detection/gold.png" mode=""></image>
				</view>
				<view class="bcai-title">店铺福利</view>
				<view class="w-box">
					<view class="war-box" v-for="(item,index) in couponlist" :key="index">
						<view class="war-left">
							<text>￥{{ item.discount / 100 }}</text>
						</view>
						<view class="war-right">
							<text>{{ item.title }}</text>
						</view>
					</view>
				</view>
				<view class="wrap-bott">
					<image src="http://www.nuoyunr.com/lananRsc/detection/red.png" mode=""></image>
				</view>
				<view class="rect" @tap.stop="drawDownCoupon()">
					<text>立即领取</text>
				</view>
			</view>
		</u-overlay>
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">{{ obj.corpName }}</view>
			<view class=""></view>
		</view>
		<view class="og">
			<view class="o-top">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in bannerlist " :key="index">

						<image style="z-index: -11;" :src="baseUrl + item" mode=""></image>

					</swiper-item>
				</swiper>
			</view>
			<view class="o-cont">
				<view class="dis">
					<view class="o-zuo">
						<view class="touxiang">
							<view class="rei">
								<image :src="baseUrl + obj.photo" mode=""></image>
							</view>
							<view class="reizi">{{ obj.averageScore }}</view>
							<image src="http://www.nuoyunr.com/lananRsc/shopStar.png" mode=""></image>
						</view>
					</view>
					<view class="o-you">
						<view class="o-title">{{ obj.corpName }}</view>
						<view class="time">{{ obj.workTime }}</view>
						<view class="dis">
							<view class="ying" v-if="obj.isWorking == 1">
								<text>营业中</text>
							</view>
							<view class="fing" v-if="obj.isWorking == 0">
								<text>休息中</text>
							</view>

							<view class="juli">距离{{ (obj.distance) || 0.0 }}</view>
						</view>
					</view>
				</view>
				<view class="san">
					<view class="dis">
						<view class="o-icon">
							<image src="http://www.nuoyunr.com/lananRsc/detection/sst.png" mode=""></image>
						</view>
						<view class="sb">优惠商品</view>
					</view>
					<view class="dis">
						<view class="o-icon">
							<image src="http://www.nuoyunr.com/lananRsc/j1.png" mode=""></image>
						</view>
						<view class="sb">上门取车</view>
					</view>
					<view class="dis">
						<view class="o-icon">
							<image src="http://www.nuoyunr.com/lananRsc/detection/xyy.png" mode=""></image>
						</view>
						<view class="sb">随时预约</view>
					</view>
				</view>
				<view class="o-map">
					<image class="sb-you" src="http://www.nuoyunr.com/lananRsc/detection/bjjjj.png" mode=""></image>
					<view class="shang">
						<!-- 	<view class="">{{obj.province}}{{obj.city}}{{obj.area}}</view> -->
						<view class="">{{ obj.address }}</view>
					</view>
					<view class="dis">
						<view class="qz" @click="gettel()">
							<view class="d-img">
								<uni-icons type="phone-filled" color="#ffffff" size="22"></uni-icons>
							</view>
							<view class="ss">电话</view>
						</view>
						<view class="qz">
							<view class="d-img" @click="fang()">
								<uni-icons type="paperplane-filled" color="#ffffff" size="22"></uni-icons>
							</view>
							<view class="ss">导航</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 下列表 -->
		<view class="ding-bottom">
			<view class="ding-top">
				<view class="zong-title">{{ obj.corpName }}收费公示</view>

			</view>
			<view class="roing">
				<view class="rbox" v-for="(item,index) in shoplist " :key="index" @click="going(item)">
					<view class="rb-top">
						<view class="rb-title">
							<view class="rb-biao">
								<image :src="baseUrl+item.goodsImage" mode=""></image>
							</view>
							<text>{{ item.categoryName }}</text>
						</view>
						<!-- <view class="rb-lan">
              <text>预约</text>
              <uni-icons type="right" color="#0D2E8D" size="18"></uni-icons>
            </view> -->
					</view>
					<view class="rb-bott">
						<view class="rbbb" style="width: 55%;">
							<view class="">
								<text class="tb1">{{ item.skuList[item.skuList.length - 1].price / 100 }}￥</text>
								<text class="xhui">/次</text>
							</view>
							<view class="xhui">
								{{ item.skuList[item.skuList.length - 1].skuName }}
							</view>
						</view>
						<view class="rb-lan">
							<text class="tb1">去预约</text>
							<uni-icons type="right" color="#0D2E8D" size="30"></uni-icons>
						</view>

					</view>

				</view>
			</view>
		</view>
		<view class="xiab-box" v-if="plist != ''">
			<view class="zxi">评论</view>
			<view class="pinglun" v-for="(item,index) in plist" :key="index">
				<view class="ptouxiang">
					<image :src="baseUrl+item.userImg" mode=""></image>
				</view>
				<view class="pp-box">
					<view class="p-bse">
						<view class="plming">{{ item.realName }}
							<uni-rate size="18" :value="item.commentStar" />
						</view>
						<view class="plshij">{{ item.commentTime }}</view>
					</view>
					<view class="plnr">
						<view class="">{{ item.commentDesc || '' }}</view>
						<view class="plshij" style="margin-top: 5px;">{{ item.goodsTitle }}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import {
		getToken
	} from '@/utils/auth'
	import newRequest from "@/utils/newRequest";

	export default {
		data() {
			return {
				id: '',
				imgs: '',
				show: false,
				bannerlist: [],
				shoplist: [],
				longitude: "105.442024",
				latitude: "28.871325",
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				pageNum: 1, //第几页
				pageSize: 5, //一页多少张
				totalPages: 0, //总数
				obj: {
					partnerName: '检测店铺'
				},
				baseUrl: this.$baseImageUrl + '/',
				couponlist: [],
				plist: [],
				total: 0
			}
		},
		components: {},
		onReachBottom() {
			if (this.plist == '') {
				return
			}
			console.log("分页")
			if (this.pageSize > this.totalPages) {
				uni.showToast({
					title: '没有下一页了',
					icon: 'none'
				})

			} else {
				this.pageNum++
				console.log(222)
				this.getCommentOrderList()
			}
		},
		onLoad(option) {
			this.id = option.id
			// this.canLedCoupon()
			this.getCommentOrderList()
			this.getindex()
		},
		mounted() {

			this.imgs = this.baseUrl
		},
		methods: {

			async getCommentOrderList() {
				if (!getToken()) {
					return
				}
				uni.showLoading()
				let data = {
					tenantId: this.id,
					pageSize: this.pageSize,
					pageNum: this.pageNum,

				}
				let res = await newRequest({
					url: '/app-api/partnerOwn/partner/getCommentOrderList',
					method: 'get',
					params: data
				})

				// this.plist = res.rows
				if (this.pageNum != 1) {
					uni.hideLoading();
					this.plist = this.plist.concat(res.data.records)
				} else {
					uni.hideLoading();
					this.plist = res.data.records
				}
				let total = res.total
				this.totalPages = Math.ceil(total / this.pageSize);
			},
			async canLedCoupon() {
				if (!getToken()) {
					return
				}
				let data = {
					tenantId: this.id,

				}
				let res = await request({
					url: '/appInspection/goods/canLedCoupon',
					method: 'get',
					params: data
				})
				console.log(res);
				this.couponlist = res.data.slice(0, 3);
				if (res.data.length > 0) {
					this.show = true
				}
			},
			async drawDownCoupon() {
				let data = {
					tenantId: this.id
				}
				let res = await request({
					url: '/appInspection/goods/drawDownCoupon',
					method: 'post',
					params: data
				})
				uni.showToast({
					title: '领取成功'
				})
				this.show = false
			},
			gettel() {
				uni.makePhoneCall({
					phoneNumber: this.obj.contactNumber //仅为示例
				});
			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},

			//获取当前位置
			getLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							resolve({
								lat: res.latitude,
								lng: res.longitude
							});
						},
						fail: (err) => {
							console.error('获取位置失败', err);
							// 用户拒绝了位置授权
							if (err.errMsg.includes('auth deny') || err.errMsg.includes(
									'fail auth deny')) {
								// this.showDistance = false;
								// this.locationPermissionDenied = true;
							}
							reject(err);
						}
					});
				});
			},
			// 计算两点间距离（单位：米）
			calculateDistance(loc1, loc2) {
				const {
					latitude: lat1,
					longitude: lng1
				} = loc1;
				const {
					latitude: lat2,
					longitude: lng2
				} = loc2;

				// 将经纬度转换为弧度
				const rad = (d) => d * Math.PI / 180.0;
				const radLat1 = rad(lat1);
				const radLat2 = rad(lat2);
				const a = radLat1 - radLat2;
				const b = rad(lng1) - rad(lng2);

				// 使用Haversine公式计算距离
				const s = 2 * Math.asin(Math.sqrt(
					Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) *
					Math.cos(radLat2) *
					Math.pow(Math.sin(b / 2), 2)
				));

				const EARTH_RADIUS = 6378.137; // 地球半径（千米）
				const distance = s * EARTH_RADIUS;

				// 小于1公里显示米，大于等于1公里显示千米
				if (distance < 1) {
					return (distance * 1000).toFixed(0) + '米';
				} else {
					return distance.toFixed(2) + '公里';
				}
			},
			fang() {
				console.log("1212")
				uni.openLocation({
					latitude: this.obj.lat,
					longitude: this.obj.lgt,
					success: function() {
						console.log('success');
					},
				});
			},
			async getindex() {
				// // 列表获取
				// let that = this;
				// uni.getLocation({
				//   type: 'wgs84',
				//   success: async function (res) {
				//     let data = {
				//       tenantId: that.id,
				//       longitude: res.longitude,
				//       latitude: res.latitude,
				//     };
				//     // 初始化
				//     // request({
				//     //   url: '/appInspection/partner/shopDetail',
				//     //   method: 'get',
				//     //   params: data
				//     // }).then(res => {
				//     //   that.obj = res.data
				//     //   that.bannerlist = res.data.imageList
				//     // })
				//   },
				//   fail: function (e) {
				//     let data = {
				//       tenantId: that.id,
				//       longitude: that.longitude,
				//       latitude: that.latitude,
				//     };
				//   }
				// });

				try {
					const res = await newRequest({
						url: '/userClient/base/companySmallProgram/getCompanyByTenantId',
						method: 'GET',
						params: {
							tenantId: this.id, // 这里应该是that.id而不是this.id
							systemCode: 'jiance',
						}
					});
					this.obj = res.data;
					// 计算 距离
					const userLocation = await this.getLocation();
					if (userLocation.lat && userLocation.lng && this.obj.lat && this.obj.lgt) {
						// if ( this.obj.lat && this.obj.lgt) {
						const distance = this.calculateDistance({
							latitude: userLocation.lat,
							longitude: userLocation.lng
							// latitude: '117.078709,',
							// longitude: '36.747455'
						}, {
							latitude: parseFloat(this.obj.lat),
							longitude: parseFloat(this.obj.lgt)
						});
						this.obj.distance = distance;
					}

				} catch (error) {
					console.error(error);
				}

				let rex = await newRequest({
					url: '/app-api/partnerOwn/partner/list?tenantId=' + this.id,
					method: 'get',
				});
				this.shoplist = rex.data;
			},
			going(data) {
				uni.navigateTo({
					url: "/pages/detection/Merchantproducts?id=" + data.goodsId + "&tenantId=" + this.id
				})
			}


		}

	}
</script>

<style scoped lang="scss">
	.warp {
		width: 275px;
		height: 375px;
		background: #FB4746;
		border-radius: 10px;
		margin: 0 auto;
		margin-top: 200px;
		box-sizing: border-box;
		padding: 15px;
		position: relative;
	}

	.warp-top {
		position: absolute;
		width: 100%;
		height: 40px;
		top: 0px;
		left: 0px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bcai-title {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: white;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 10px;

	}

	.w-box {
		background: #cf2c2f;
		width: 100%;
		height: 300px;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 8px;

	}

	.war-left {
		width: 40%;
		border-right: 1px solid #EBC29D;
		font-size: 26px;
		text-align: center;
		font-weight: bold;
		color: #E0262C;
	}

	.war-right {
		width: 60%;
		font-size: 16px;
		font-weight: bold;
		color: #7D592C;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.wrap-bott {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 80px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.war-box {
		width: 100%;
		height: 69px;
		background: linear-gradient(90deg, #FFF1E4 0%, #FACEA6 100%);
		border-radius: 6px 6px 6px 6px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 10px;
		margin-bottom: 10px;
	}

	.rect {
		width: 172px;
		height: 36px;
		background: linear-gradient(90deg, #FFF4CB 0%, #FDDC66 100%);
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: bold;
		color: #E11E27;
		position: absolute;
		bottom: 20px;
		transform: translate(-50%);
		left: 50%;
		z-index: 999;
	}

	.uni-margin-wrap {
		width: 100%;
	}

	.swiper {
		height: 150px;
		z-index: -1;
	}

	.swiper-item {
		display: block;
		height: 150px;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	//
	.xhui {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
	}

	.tb1 {
		font-size: 25px;
		font-weight: 600;
		color: #0D2E8D;
	}

	.content {
		width: 100%;
		// height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.rb-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.rb-biao {
		width: 20px;
		height: 16px;
		// overflow: hidden;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.rb-lan {
		font-size: 14px;
		font-weight: 400;
		color: #0D2E8D;
		line-height: 14px;
	}

	.rb-top {
		width: 100%;
		display: flex;
		align-items: center;

		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 10px;
		border-bottom: 1px solid #EEEEEE;
	}

	.rb-bott {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.rbbb {
		border-right: 1px solid #EEEEEE;
		width: 33%;
		text-align: left;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.top-icon {
		margin-bottom: 45px;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 55px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.c-title {
		font-size: 18px;
		font-weight: bold
	}

	.og {
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 10px;
	}

	.o-top {
		width: 100%;
		height: 150px;
		border-radius: 6px;
		margin-bottom: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.o-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;

	}

	.ying {
		width: 62px;
		height: 22px;
		background: #E4FFED;
		border-radius: 2px;
		font-size: 14px;
		font-weight: 400;
		color: #34CA66;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.fing {
		width: 62px;
		height: 22px;
		background: #e3e3e3;
		border-radius: 2px;
		font-size: 14px;
		font-weight: 400;
		color: #626262;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.time {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		margin: 5px 10px;
	}

	.juli {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		margin-left: 5px;
	}

	.touxiang {
		width: 80px;
		height: 105px;
		// background: #D9D9D9;
		margin-right: 10px;
		margin-top: -50px;
		z-index: 99;
		overflow: hidden;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.rei {

		z-index: 99999;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		background-color: whitesmoke;

		image {
			width: 100%;
			height: 100%;
		}

		position: absolute;
		top: 38px;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.reizi {
		font-size: 14px;
		z-index: 99999;
		color: white;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		bottom: -5px;
	}

	.o-cont {
		width: 100%;
		// height: 210px;
		z-index: 99;
		border-radius: 8px;
		box-sizing: border-box;
		background-color: white;
		padding: 10px;
	}

	.dis {
		z-index: 9;
		display: flex;
		align-items: center;
	}

	.san {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10px auto;
	}

	.o-map {
		overflow: hidden;
		position: relative;
		background: linear-gradient(90deg, #F7F8FB 0%, rgba(255, 255, 255, 0) 100%);
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 15px;
	}

	.d-img {
		width: 30px;
		height: 30px;
		background: #0D2E8D;
		border-radius: 50%;
		text-align: center;
		line-height: 30px;
	}

	.sb-you {
		z-index: 0;
		position: absolute;
		right: 0px;
		top: 0px;
	}

	.shang {
		z-index: 9;
	}

	.ss {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}

	.qz {
		margin-right: 10px;
	}

	.sb {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		margin-left: 5px;
	}

	.o-icon {
		width: 20px;
		height: 20px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ding-bottom {
		width: 100%;
		background: linear-gradient(180deg, #FAC477 0%, rgba(250, 196, 119, 0) 30%, rgba(250, 196, 119, 0) 100%);
		border-radius: 20px 20px 0px 0px;
		box-sizing: border-box;
		padding: 10px;

	}

	.ding-top {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.zong-title {
		font-size: 16px;
		font-weight: 400;
		color: #69430C;
		margin: 0 auto;
	}

	.bai-title {
		font-size: 14px;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.7);
	}

	.roing {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.rbox {
		width: 100%;
		height: 120px;
		box-sizing: border-box;
		padding: 10px;
		position: relative;
		overflow: hidden;
		border-radius: 8px;
		background: white;
		margin-bottom: 10px;
	}

	.guanjian {
		width: 90%;
		margin: 10px auto;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.anniu {
		width: 66px;
		height: 22px;
		background: #0D2E8D;
		border-radius: 11px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: 400;
		color: #FFFFFF;

	}

	.r-bottom {
		width: 90%;
		margin: 10px auto;
		display: flex;
		justify-content: space-between;

	}

	.ju {
		font-size: 16px;
		font-weight: bold;
		color: #FF9600;
	}

	.r-img {
		width: 100%;
		height: 172px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xiab-box {
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 6px;
		margin-bottom: 10px;
		background-color: white
	}

	.pinglun {
		box-sizing: border-box;
		border-bottom: 1px solid #EEEEEE;
		padding: 10px 0px;
		width: 100%;
		display: flex;

	}

	.huang {
		font-size: 16px;
		color: #FF9600;
		margin-left: 10px;
	}

	.plming {
		font-size: 16px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.plshij {
		font-size: 14px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.plnr {
		font-size: 15px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 5px;
	}

	.ptouxiang {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.pp-box {
		width: 80%;
	}

	.p-bse {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-nr {}
</style>