school-peisong/pages/myCenter/shopDetail.vue

<template>
	<view class="page1">
		<view class="list-box">
			<view class="list-1">
				<view class="list-name">
					门头图
				</view>
				<view class="list-right" @tap="pictureAdd('mentou')">
					<view class="upload-img" v-if="shop.shopIcon ==''"
						style="background: #eee;text-align: center;line-height: 100rpx;">
						<uni-icons type="camera" size="28" color="#777"></uni-icons>
					</view>
					<image :src="shop.shopIcon" v-if="shop.shopIcon !=''" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					店铺名称
				</view>
				<view class="list-right">
					{{shop.shopName}}
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					副标题
				</view>
				<view class="list-right">
					<input type="text" placeholder="请输入副标题" v-model="shop.subtitle"
						style="height: 100rpx;line-height: 100rpx;" />
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					店铺地址
				</view>
				<view class="list-right">
					{{shop.shopAddress}}
				</view>
			</view>
			<!-- <view class="list-1">
				<view class="list-name">
					店铺环境
				</view>
				<view class="list-right">
					<image :src="huanjing" mode=""></image>
				</view>
			</view> -->
			<view class="list-1">
				<view class="list-name">
					身份证
				</view>
				<view class="list-right">
					<image :src="shopImages[0]" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					营业执照
				</view>
				<view class="list-right">
					<image :src="shopImages[2]" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					补充证照
				</view>
				<view class="list-right">
					<image :src="huanjing" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					支付宝账号
				</view>
				<view class="list-right">
					<input type="text" placeholder="请输入支付宝账号" v-model="shop.aliAccount"
						style="height: 100rpx;line-height: 100rpx;" />
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					支付宝实名
				</view>
				<view class="list-right">
					<input type="text" placeholder="请输入支付宝账号" v-model="shop.aliName"
						style="height: 100rpx;line-height: 100rpx;" />
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="list-2" @click="submit">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop: {},
				shopImages: [],
				huanjing: ''
			}
		},
		onLoad() {
			this.shop = JSON.parse(uni.getStorageSync('area')).shop;
			console.log('好的好的',this.shop)
			this.shopImages = this.shop.shopImages.split('@@')
			this.huanjing = JSON.parse(this.shopImages[3])[0]
			
			for (let key in this.shop) {
				if (this.shop[key] === null) {
					delete this.shop[key];
				}
			}
		},
		methods: {
			navigatorTo(e) {
				let url = ""
				if (e == 'addgoods') {
					url = '/package1/myCenter/addGoods'
				} else if (e == 'merchant') {
					url = '/package1/myCenter/myMerchant'
				} else if (e == 'xiugaixinxi') {
					url = '/pages/myCenter/shopDetail'
				}
				uni.navigateTo({
					url: url
				})
			},
			pictureAdd(type) {
				let that = this
				uni.chooseMedia({
					count: type == 'qita' ? 9 : 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {
							that.upLoadFile(res.tempFiles[i].tempFilePath, type)
						}

					}
				})
			},
			async upLoadFile(path, type) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: getApp().globalData.mainurl + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						that.shop.shopIcon = pathData.result

						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
			submit() {
				console.log(this.shop)
				console.log(typeof(this.shop))
				this.NB.sendRequest('/app/shop/edit', this.shop, false, 'PUT', 'application/x-www-form-urlencoded').then(
					res => {

						if (res.code == 200) {
							uni.showModal({
								title: '提示',
								content: '更新信息成功',
								showCancel: false,
								success: function(res) {
									uni.setStorageSync('shop', this.shop)
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							});
						} else {
							uni.showToast(res.message)
						}
					})
			}
		}
	}
</script>

<style>
	page,
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
		background: #eee;
	}

	.list-box {
		width: 100%;
		height: auto;
		background: #fff;
		margin-top: 20rpx;

	}

	.list-1 {
		display: flex;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #eee;

	}

	.list-2 {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.list-icon {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.list-name {
		flex: 1;
		padding-left: 20rpx;
	}

	.list-right {
		flex: 1;
		height: 100rpx;
		text-align: right;
		padding-right: 20rpx;
		overflow: hidden;
	}

	.upload-img {
		width: 60rpx;
		height: 60rpx;
		background-size: 100%;
		margin-top: 20rpx;
	}

	.list-2 {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}
</style>