xusfood_h5/center/store.vue

<template>
	<view class="pages">
		<u-navbar
			title="店铺详情"
			:placeholder="true"
			:autoBack="true"
			 @leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<u-swiper
				v-if="details.slideImgList.length>0"
				:list="details.slideImgList"
				height="700rpx"
				@change="e => currentNum = e.current"
				:autoplay="false"
				indicatorStyle="right: 20px"
			>
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ details.slideImgList.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="info">
			<view class="title">店铺信息</view>
			<view class="info-item">
				<view class="left">门店地址：{{details.address}}</view>
			</view>
			<view class="info-item u-flex u-row-between">
				<view class="left">营业时间：{{details.workTime}}</view>
				<view class="right update" @click="timeShow = true">更新</view>
			</view>
			<view class="info-item u-flex u-row-between">
				<view class="left">联系电话：{{details.tel}}</view>
				<view class="right update" @click="telShow = true">更新</view>
			</view>
			<view class="info-item u-flex u-row-between">
				<view class="left">
					门店推广码：
					<text @click="$u.route('/center/paycode',{id:details.id})" style="color: #00A447;">查看</text>
				</view>
			</view>
			<view class="info-item u-flex u-col-top">
				<view class="left">店铺资质：</view>
				<view class="imgs">
					<u-album :urls="details.certificationList"></u-album>
				</view>
			</view>
		</view>
		<u-modal :show="telShow"  title="修改联系电话" @confirm="changeTel" @cancel="telShow=false" :showCancelButton="true" >
			<view class="slot-content">
				<u--input
				    placeholder="请输入联系电话"
				    border="surround"
				    v-model="tempTel"
				  >
				</u--input>
			</view>
		</u-modal>
		<u-modal :show="timeShow"  title="修改营业时间" @confirm="changeTime" @cancel="timeShow=false" :showCancelButton="true" >
			<view class="slot-content">
				<u--input
				    placeholder="营业时间如:09:00~18:00"
				    border="surround"
				    v-model="tempTime"
				  >
				</u--input>
			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				details:{slideImgList:[]},
				currentNum:0,
				telShow:false,
				tempTel:'',
				timeShow:false,
				tempTime:'',
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.id = page.id;
			this.getPageData();
		},
		methods: {
			leftClick(){
				console.log('leftClick');
			},
			getPageData(){
				this.$u.api.shopById({id:this.id}).then(res=>{
					this.details = res.data;
					// console.log('getPageData',this.details);
				}).catch(err=>{
					console.log('getPageData',err);
				})
			},
			shopUpdate(type){
				let params ={
					id:this.id
				};
				if(type == 'workTime'){
					params.workTime = this.tempTime;
				}else if(type == 'tel'){
					params.tel = this.tempTel;
				}
				this.$u.api.shopUpdate(params).then(res=>{
					this.getPageData();
				}).catch(err=>{
					console.log('err',err);
				})
			},
			changeTime(){
				let that = this;
				this.timeShow = false;
				if(this.tempTime.length<1){
					this.$refs.uToast.show({
						type: 'error',
						title: '提示',
						message: "请输入营业时间",
						complete(){
							that.timeShow = true
						}
					})
				}else{
					this.shopUpdate('workTime')
				}
			},
			changeTel(){
				let that = this;
				// let isTel = uni.$u.test.mobile(this.tempTel);
				let isEmpty = uni.$u.test.isEmpty(this.tempTel);
				this.telShow = false;
				if(isEmpty){
					this.$refs.uToast.show({
						type: 'error',
						title: '提示',
						message: "请输入联系电话",
						complete(){
							that.telShow = true
						}
					})
				}else{
					this.shopUpdate('tel')
				}
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.info{
	margin-top: 24rpx;
	background-color: #fff;
	padding: 28rpx 30rpx 30rpx 0;
	.title{
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
		border-left: 2px solid #00A447;
		padding-left: 26rpx;
	}
	.info-item{
		margin-left: 30rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
		margin-bottom: 20rpx;
		.update{
			color: #333;
		}
	}
}
</style>