vibe-coding-cn/yshop/yshop-drink-uniapp/pages/components/pages/merchant/shopInfo.vue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view style="padding-bottom: 120rpx;" class="p-3">
		<view class="card">
			<view class="card_item flex content-center">
				<view class="left">
					店铺名称
				</view>
				<input class="right" v-model="formData.name" type="text" placeholder="请输入">
			</view>
			<view class="card_item flex content-center">
				<view class="left">
					店铺电话
				</view>
				<input class="right" v-model="formData.mobile" type="text" placeholder="请输入">
			</view>
			<view class="card_item flex content-center">
				<view class="left">
					地图地址
				</view>
				<view class="input" @click="chooseLocation">{{formData.addressMap ? formData.addressMap : '请选择地址'}}</view>
			</view>
			<view class="card_item flex content-center">
				<view class="left">
					详细地址
				</view>
				<input class="right" v-model="formData.address" type="text" placeholder="请输入">
			</view>
		</view>

		<view class="card_thr">
			<view class="card_item flex content-center justify-between line">
				<view class="left">
					营业开始时间
				</view>
				<view class="flex content-center" @click="setShow(1)">
					{{formatDateTime(formData.startTime,'hh:mm:ss') || '请选择'}}
					<uv-icon name="arrow-right" size="20"></uv-icon>
				</view>
			</view>
			<view class="card_item flex  content-center justify-between">
				<view class="left">
					营业结束时间
				</view>
				<view class="flex content-center" @click="setShow(2)">
					{{formatDateTime(formData.endTime,'hh:mm:ss') || '请选择'}}
					<uv-icon name="arrow-right" size="20"></uv-icon>
				</view>
			</view>
		</view>
		<uv-datetime-picker ref="datetimePicker" @confirm='confirm' v-model="value1" mode="time">
		</uv-datetime-picker>

		<view class="fixed">
			<view class="btn" @click="update">
				保存
			</view>
		</view>

	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	updateShop
} from '@/api/merchant'
import { onLoad} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatDateTime } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('店铺资料')
const datetimePicker = ref()
const index = ref(0)
const value1 = ref(formatDateTime(new Date()))

const formData = ref({
	id: merchartShop.value.id,
	name: merchartShop.value.name,
	mobile: merchartShop.value.mobile,
	addressMap: merchartShop.value.addressMap,
	address: merchartShop.value.address,
	startTime: merchartShop.value.startTime,
	endTime: merchartShop.value.endTime
})

const  update = async() =>{
	let res = await updateShop(formData.value)
	if(res){
		main.SET_MERCHART_SHOP(res)
		uni.navigateBack()
	}
}

const setShow = (i) =>{
	datetimePicker.value.open()
	index.value = i
}

const confirm = (e) =>{
	let myTime =  e.value.split(':')
	
	let now = new Date()
	let nowStr = formatDateTime(now,'yyyy-MM-dd')

	let newTime =nowStr + ' ' + e.value;
	if(index.value == 1){
		formData.value.startTime = new Date(newTime)
	}else{
		formData.value.endTime = new Date(newTime)
	}

	
}

const chooseLocation = async() => {
	uni.chooseLocation({
		success: function (res) {
			formData.value.addressMap = res.address + ' ' + res.name;
			formData.value.lat= res.latitude;
			formData.value.lng = res.longitude;
		},
		fail: function(res1) {
		},
		complete: function(res2) {
		},
		
	});
}


</script>

<style lang="scss">
	.mlimg {
		width: 479rpx;
		height: 280rpx;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 120rpx;

		.btn {
			width: 700rpx;
			height: 98rpx;
			background: #059825;
			border-radius: 14rpx;
			margin: 0 auto;
			line-height: 98rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}


	.card {
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			width: 620rpx;
			height: 64rpx;
			background: #A0E0FF;
			border-radius: 10rpx;
			text-align: center;
			font-size: 24rpx;
			color: #0097E1;
			line-height: 64rpx;
		}

		.card_item {
			padding: 34rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #f5f5f5;

			.left {
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
			}

			.yzm {
				width: 300rpx;
			}

			.btn {
				width: 158rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				border: 2rpx solid #0CAFFE;
				font-size: 24rpx;
				color: #0CAFFE;
				text-align: center;
				line-height: 50rpx;
				margin-top: -10rpx;
				margin-left: 20rpx;
			}
		}
	}


	.card_thr {
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;

		.card_item {
			padding: 34rpx 0;
			box-sizing: border-box;

			.left {
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.line {
		border-bottom: 1rpx solid #f5f5f5;
	}
</style>