hx-mini-uni/pages/order/store.vue

<template>
	<view>
		<view class="search">
			<image src="/static/image/search.png"></image>
			<input type="text" placeholder="请输入关键字" v-model="keyword" @confirm="getStore" class="search-input" />
		</view>
		<view class="store-list">
			<view :class="checkIndex==indx?'store-item active':'store-item'" @click="checkStore(indx)" v-for="(item,indx) in storeData" :key="indx">
				<view class="item-left">
					<view class="name">{{item.poi_name}}</view>
					<view class="desc">{{item.poi_address}}</view>
					<view class="desc" v-if="storeInfo.status==1">{{ storeInfo.service_at_start }}-{{ storeInfo.service_at_end }}</view>
					<view class="desc" v-else>休息中</view>
				</view>
				<view class="item-right">
					<view class="top">
						<view class="icon-img" @click="tel()"><image src="/static/image/tel.png"></image></view>
						<view class="icon-img" @click="locaJump(item.longitude,item.latitude)"><image src="/static/image/map.png"></image></view>
					</view>
					<view class="footer">距离{{ item.juli }}公里</view>
				</view>
				<view class="check"><image src="/static/image/check.png"></image></view>
			</view>
		</view>
		<view class="flx-footer">
			<view class="check-btn"><button class="btn" :disabled="disabled" @click="checkOrder">{{disabled?'处理中...':'确 认'}}</button></view>
			<view class="footer-safe"></view>
		</view>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/order.js";
export default {
	data() {
		return {
			checkIndex:null,
			order:"",
			location:"",
			storeData:[],
			storeInfo:null,
			keyword:"",
			disabled:false,
			type:1
		}
	},
	onLoad({order,type}) {
		app = this;
		if (!order) {
			return app.$dialog.showSuccess("参数错误","none",function(){
				uni.navigateBack()
			})
		}
		app.type = type;
		app.order = order;
		app.getStoreData();
	},
	methods: {
		checkOrder(){
			if (app.checkIndex==null) {
				return app.$dialog.showSuccess("请选择门店");
			}
			app.disabled = true;
			var poi = app.storeData[app.checkIndex];
			uni.navigateTo({
				url:"/pages/order/confirm?order="+app.order+"&poi_id="+poi.poi_id+"&poi_name="+poi.poi_name+"&juli="+poi.juli,
				success() {
					app.disabled = false;
				}
			})
		},
		checkStore(index){
			app.checkIndex = index;
		},
		tel(){
			if (!app.storeInfo.service_mobile){
				return app.$dialog.showSuccess("客服电话尚未配置")
			}
			uni.makePhoneCall({
				phoneNumber:app.storeInfo.service_mobile
			})
		},
		locaJump(longitude,latitude){
			uni.openLocation({
				latitude:latitude,
				longitude:longitude,
				fail() {
					app.$dialog.showSuccess("打开地图失败");
				}
			})
		},
		getStoreData(){
			uni.getLocation({
				type:"gcj02",
				success(res) {
					console.log(res)
					app.location = res.longitude+","+res.latitude;
					app.getStore();
				},
				fail() {
					app.location = "117.172398,34.226209";
					app.getStore();
				}
			})
		},
		getStore(){
			Api.store({"order":app.order,"location":app.location,"keyword":app.keyword}).then((res)=>{
				if (res.code == 0) {
					return app.$dialog.showSuccess(res.msg,"none",function(){
						uni.navigateBack()
					})
				}
				app.storeData = res.data.data;
				app.storeInfo = res.data.store;
			})
		}
	}
}
</script>

<style>
.search{padding: 20upx;display: flex;align-items: center;background-color: #fff;width: calc(95% - 60upx);margin: 20upx auto;border-radius: 60upx;}
.search image{width: 50upx;height: 46upx;}
.search .search-input{border-radius: 30upx;font-size: 28upx;height: 60upx;margin-left: 20upx;}

.store-item{background-color: #fff;width: calc(95% - 40upx);padding: 20upx;border-radius: 20upx;display: flex;align-items: center;justify-content: space-between;margin: 20upx auto;position: relative;}
.store-item.active{border: 2upx solid #fe2c56;}
.store-item .check{display: none;position: absolute;top: 0;right: 0;background-color: #fe2c56;width: 40upx;height: 40upx;border-radius: 0 20upx 0 20upx;}
.store-item .check image{width: 30upx;height: 30upx;display: flex;align-items: center;justify-content: center;padding: 5upx;}
.store-item.active .check{display: block;}
.store-item .item-left{flex: 1;}
.store-item .name{font-size: 32upx;color: #333;line-height: 48upx;font-weight: bold;}
.store-item .desc{font-size: 24upx;color: #666;line-height: 36upx;margin-top: 10upx;}
.store-item .item-right{text-align: center;margin-left: 20upx;border-left: 2upx solid #f8f8f8;padding-left: 20upx;}
.store-item .item-right .footer{font-size: 24upx;color: #666;}
.store-item .item-right .top{display: flex;align-items: center;gap: 20upx;margin-bottom: 20upx;}
.store-item .item-right .top .icon-img{width: 60upx;height: 60upx;background-color: #f8f8f8;border-radius: 60upx;display: flex;align-items: center;justify-content: center;}
.store-item .item-right .top .icon-img image{width: 40upx;height: 40upx;}

.flx-footer{position: fixed;bottom: 0;background-color: #fff;padding: 20upx;border-top: 2upx solid #f8f8f8;left: 0;right: 0;}
.flx-footer .footer-safe {height: env(safe-area-inset-bottom);width: 100%;}
.flx-footer .btn{font-size: 28rpx;height: 80upx;border-radius: 10upx;line-height: 80upx;text-align: center;width: 100%;color: #333;background-color: #fe2c56;color: #fff;border:2upx solid #fe2c56;}
.flx-footer .btn[disabled],.flx-footer .btn.disabled{background-color: rgba(34, 77, 122, 0.3);}
</style>