xinwang/pages/store/storeDetail.vue

<template>
	<view class="content">
		<template v-if="store">
			<view class="top">
				<image :src="store.image" mode="" class="store-img"></image>
				<view class="right">
					<view class="store-name clamp">{{ store.name }}</view>
					<view class="store-content clamp2">{{ store.introduction }}</view>
				</view>
			</view>
			<view class="jg"></view>
			<view class="store-info">
				<view class="title">门店地址/营业时间</view>
				<view class="info-box">
					<view class="item">
						<image src="../../static/icon/adress.png" mode="" class="item-img"></image>
						<view class="item-msg">{{ store.detailed_address }}</view>
					</view>
					<view class="item">
						<image src="../../static/icon/daytime.png" mode="" class="item-img"></image>
						<view class="item-msg">营业时间{{ store.day_time }}</view>
					</view>
					<view class="item">
						<image src="../../static/icon/phone.png" mode="" class="item-img"></image>
						<view class="item-msg">{{ store.phone }}</view>
					</view>
				</view>
			</view>
		</template>
		<empty v-if="!store && loaded"></empty>
		<view class="edit-btn" @click="eidt()" v-if="store && loaded && store.is_show">编辑信息</view>
		<view class="edit-btn" v-if="store.is_show == 0" style="background-color: #999999;">门店审核中</view>
		<view class="edit-btn" @click="add()" v-if="!store && loaded">添加门店</view>
	</view>
</template>

<script>
		import weixinObj from "@/plugin/jweixin-module/index.js";
import empty from '@/components/empty';
import { getStoreInfo } from '@/api/index.js';
import { orderData, getUserInfo, getMyStore } from '@/api/user.js';
export default {
	components: {
		empty
	},
	data() {
		return {
			canEdit: false,
			store: '',
			loaded: false
		};
	},
	onLoad(opt) {
		if (opt.id) {
			this.store_id = opt.id;
			this.getStoreInfo();
		} else {
			this.getMyStore();
		}
		weixinObj.hideAllNonBaseMenuItem();
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		getStoreInfo() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			getStoreInfo({
				id: this.store_id
			})
				.then(({ data }) => {
					uni.hideLoading();
					this.store = data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		getMyStore() {
			getMyStore().then(({ data }) => {
				if (data.length == 0) {
					this.loaded = true;
				} else {
					this.store = data[0];
					this.loaded = true;
				}
			});
		},
		eidt() {
			let str = JSON.stringify(this.store);
			console.log(str);
			uni.navigateTo({
				url: '/pages/store/storeMessage?type=edit&item=' + str
			});
		},
		add() {
			uni.navigateTo({
				url: '/pages/store/storeMessage?type=add'
			});
		},
		//添加或修改成功之后回调
		refreshList() {
			// 重新加载地址
			this.getMyStore();
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: #fff;
}
.top {
	height: 198rpx;
	display: flex;
	padding: 30rpx 25rpx 36rpx;
	.store-img {
		width: 132rpx;
		height: 132rpx;

		flex-shrink: 0;
	}
	.right {
		padding-left: 20rpx;
		.store-name {
			padding: 5rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.store-title {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 25rpx;
		}
	}
}
.jg {
	height: 20rpx;
	background-color: #f8f6f6;
}
.store-info {
	padding: 28rpx 30rpx 0;
	height: 100%;
	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 55rpx;
	}
	.info-box {
		margin-top: 30rpx;
		width: 690rpx;
		min-height: 301rpx;
		border: 2px solid #dddddd;
		border-radius: 10rpx;
		padding: 40rpx 40rpx 0rpx;
		.item {
			display: flex;
			padding-bottom: 40rpx;
			image {
				margin-top: 6rpx;
				margin-right: 20rpx;
				height: 28rpx;
				width: 28rpx;

				flex-shrink: 0;
			}
			.item-msg {
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
}
.edit-btn {
	position: fixed;
	bottom: 34rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 674rpx;
	// height: 88rpx;
	background: #ff4c4c;
	border-radius: 44rpx;
	text-align: center;
	line-height: 88rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
</style>