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('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) {
								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>