cbz-sj/pages/mine/service/detail.vue

<template>
	<view class="content">
		<view class="box hflex acenter">
			<view class="img_box">
				<image :src="pageData.head_img" class="img"></image>
				<view class="img_bottom hflex acenter jcenter" @click="replace">点击替换</view>
			</view>
			<view class="vflex img_right">
				<view class="top_title">{{pageData.company}}</view>
				<view class="hflex acenter jbetween">
					<view class="addr">{{pageData.address}}</view>
					<image src="/static/images/mine/address_icon.png" style="width: 44rpx;height: 44rpx;"></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_top hflex acenter jbetween">
				<view class="title">商家信息</view>
				<view class="hflex acenter" @click="edit">
					<view class="top_text">可编辑</view>
					<image src="/static/images/mine/edit.png" style="width: 36rpx;height: 36rpx;"></image>
				</view>
			</view>
			<view class="cell hflex acenter">
				<view class="left">联系人</view>
				<u-input v-model="pageData.contact_name" border="none" :disabled="!is_edit" disabledColor="#fff"></u-input>
			</view>
			<view class="cell hflex acenter">
				<view class="left">联系电话</view>
				<u-input v-model="pageData.contact_phone" border="none" :disabled="!is_edit" disabledColor="#fff"></u-input>
			</view>
			<view class="cell">
				<view class="left">商家简介</view>
				<u-textarea v-model="pageData.intro" :disabled="!is_edit"></u-textarea >
			</view>
			<view class="cell">
				<view class="left">图片及视频</view>
			</view>
			<view class="imgs" v-if="!is_edit">
				<block v-for="(item,index) in pageData.imgs_videos" :key="index">
					<image :src="item.url" class="img" v-if="item.type == 'image'"></image>
					<video :src="item.url" class="img" v-if="item.type == 'video'"></video>
				</block>
			</view>
			<view class="imgs" v-else>
				<u-upload :fileList="pageData.imgs_videos" :accept='accept' @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9" width="200rpx" height="200rpx">
					<image src="/static/images/common/upload_img.png" style="width: 200rpx;height: 200rpx;"></image>
				</u-upload>
			</view>
		</view>
		<view class="box">
			<view class="title">营业执照</view>
			<view class="cell">
				<image :src="pageData.business_img" class="bus_img"></image>
			</view>
		</view>
		<view class="btn hflex acenter jcenter" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {},
				is_edit: false,
				accept: ['image','video'],
			}
		},
		onLoad() {
			that = this
			that.getData()
		},
		methods: {
			getData() {
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				that.pageData = prePage.$vm.user.merchant
				for(var i=0;i<that.pageData.imgs_videos.length;i++) {
					if(!that.pageData.imgs_videos[i].type) {
						var img = that.pageData.imgs_videos[i].split('.')
						var type = ''
						console.log(img);
						if(img[img.length - 1] == 'mp4') {
							type = 'video'
						} else if(img[img.length - 1] == 'jpg' || img[img.length - 1] == 'png' || img[img.length - 1] == 'jpeg' || img[img.length - 1] == 'gif') {
							type = 'image'
						}
						var data = {
							type: type,
							url: that.pageData.imgs_videos[i]
						}
						that.pageData.imgs_videos.splice(i,1,data)
					}
				}
				console.log(that.pageData);
			},
			replace() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
								'api-name': 'iosapp'
							},
							formData: {
								'user': 'test'
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								if (data.code == 1) {
									that.pageData.head_img = data.data.url
								}
							}
						});
					}
				});
			},
			edit() {
				that.is_edit = true
			},
			// 删除图片
			deletePic(event) {
				that.pageData.imgs_videos.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = that.pageData.imgs_videos.length
				lists.map((item) => {
					that.pageData.imgs_videos.push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = that.pageData.imgs_videos[fileListLen]
					that.pageData.imgs_videos.splice(fileListLen, 1, Object.assign(item, {
						// status: 'success',
						type: result.type,
						url: result.url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + '/data/api.auth.Center/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
							'api-name': 'iosapp'
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								console.log('data:',data);
								var type = data.data.key.split('.')
								if(type[1] == 'mp4') {
									that.$set(data.data,'type','video')
								} else {
									that.$set(data.data,'type','image')
								}
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			save() {
				var imgs_videos = ""
				for(var i=0;i<that.pageData.imgs_videos.length;i++) {
					imgs_videos+=that.pageData.imgs_videos[i].url + '，'
				}
				imgs_videos = imgs_videos.substr(0,imgs_videos.length - 1)
				$api.req({
					url: '/data/api.business.User/edit',
					method: 'POST',
					data: {
						head_img: that.pageData.head_img,
						contact_name: that.pageData.contact_name,
						contact_phone: that.pageData.contact_phone,
						intro: that.pageData.intro,
						imgs_videos: imgs_videos
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						$api.jump(-1)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F5F5F5;
		padding: 0 30rpx;
		.box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 28rpx 20rpx;
			margin-top: 20rpx;
			.img_box {
				width: 112rpx;
				height: 112rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
				.img {
					width: 100%;
					height: 100%;
				}
				.img_bottom {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 36rpx;
					background: rgba(0,0,0,0.5);
					border-radius: 0px 0px 16rpx 16rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 28rpx;
				}
			}
			.img_right {
				width: calc(100% - 132rpx);
				.top_title {
					width: 100%;
					font-size: 36rpx;
					font-weight: 600;
					color: #222222;
					line-height: 50px;
				}
				.addr {
					width: 424rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
					line-height: 28rpx;
				}
			}
			.box_top {
				padding: 0 0 24rpx;
				border-bottom: 1rpx solid #F5F5F5;
				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: #222222;
					line-height: 44rpx;
				}
				.top_text {
					font-size: 22rpx;
					font-weight: 400;
					color: #656565;
					line-height: 32rpx;
				}
			}
			.cell {
				padding: 32rpx 0 0;
				.left {
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
				.u-textarea {
					margin-top: 24rpx;
					background: #F5F5F5;
					border-radius: 24rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
				.bus_img {
					width: 100%;
					height: 348rpx;
					border-radius: 16rpx;
				}
			}
			.imgs {
				padding: 32rpx 0 0;
				.img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					margin: 0 14rpx 20rpx 0;
				}
				.img:nth-child(3n+3) {
					margin: 0 0 20rpx;
				}
			}
		}
		.btn {
			width: 100%;
			height: 84rpx;
			background: #506DFF;
			border-radius: 42rpx;
			margin: 56rpx 0 68rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 50rpx;
		}
	}
</style>