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

<template>
	<view class="content">
		<view class="box hflex acenter">
			<view class="img_box" @click="replace">
				<image :src="pageData.head_img" class="img"></image>
				<view class="img_bottom hflex acenter jcenter">点击替换</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;" @click="openMap"></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" confirmType="done" :disabled="!is_edit"></u-textarea >
			</view>
			<view class="cell">
				<view class="left">图片及视频</view>
			</view>
			<view class="imgs hflex acenter fwrap">
				<block v-for="(item,index) in pageData.imgs_videos" :key="index">
					<view v-if="item.type == 'image'" style="position: relative;">
						<image :src="item.url" class="img" mode="aspectFill" v-if="item.type == 'image'"></image>
						<image v-if="is_edit" src="/static/images/common/popu_close.png" class="close_icon" @click="deletePic(index)"></image>
					</view>
					<view v-if="item.type == 'video'" style="position: relative;">
						<video :src="item.url" direction="0" class="img" v-if="item.type == 'video'"></video>
						<image v-if="is_edit" src="/static/images/common/popu_close.png" class="close_icon" @click="deletePic(index)"></image>
					</view>
				</block>
				<image  src="/static/images/common/upload_img.png" class="img" @click="choose"></image>
			</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>
		<u-popup :show="show_choose" @close="close">
			<view class="vflex acenter">
				<view class="hflex acenter jcenter choose" @click="choose_img">
					<view>图片</view>
				</view>
				<view class="hflex acenter jcenter choose" @click="choose_video">
					<view>视频</view>
				</view>
				<view class="hflex acenter jcenter choose" @click="close">
					<view>取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {},
				is_edit: false,
				show_choose: false
			}
		},
		onLoad() {
			that = this
			that.getData()
		},
		methods: {
			getData() {
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 2]
				that.pageData = prePage.$vm.user.merchant
				// that.pageData.imgs_videos = that.pageData.imgs_videos[0].split(',')
				console.log(that.pageData.imgs_videos);
				for(var i=0;i<that.pageData.imgs_videos.length;i++) {
					if(that.pageData.imgs_videos[i].substr(-3) == 'mp4' || that.pageData.imgs_videos[i].substr(-3) == 'flv') {
						that.pageData.imgs_videos[i] = {
							url: that.pageData.imgs_videos[i],
							type: 'video'
						}
					} else {
						that.pageData.imgs_videos[i] = {
							url: that.pageData.imgs_videos[i],
							type: 'image'
						}
					}
				}
			},
			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
								}
							}
						});
					}
				});
			},
			openMap() {
				console.log(typeof(that.pageData.latitude));
				uni.openLocation({
					latitude: Number(that.pageData.latitude),
					longitude: Number(that.pageData.longitude),
					success: function (res) {
						console.log('success',res);
					},
					fail: function (err) {
						console.log('err',err);
					}
				});
			},
			edit() {
				that.is_edit = true
			},
			close() {
				that.show_choose = false
			},
			// 删除图片
			deletePic(event) {
				that.pageData.imgs_videos.splice(event, 1)
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				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++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
			},
			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() {
				console.log(that.pageData.imgs_videos);
				
				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)
				// that.pageData.imgs_videos = JSON.stringify(that.pageData.imgs_videos)
				$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)
					}
				})
			},
			choose() {
				that.show_choose = true
			},
			async choose_img() {
				that.close()
				
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						let fileListLen = that.pageData.imgs_videos.length
						let file = res.tempFiles[0].path
						console.log(file);
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
							filePath: file,
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
								'api-name': 'iosapp'
							},
							formData: {
								user: 'test'
							},
							success: (res2) => {
								var data = JSON.parse(res2.data)
								console.log('data:',data);
								let item = {
									type: 'image',
									url: data.data.url
								}
								that.pageData.imgs_videos.push(item)
								console.log('上传完图片内容',that.pageData.imgs_videos);
								uni.hideLoading()
							},
							fail(err) {
								console.log(err);
							}
						});
						
					}
				});
			},
			choose_video() {
				that.close()
				
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						console.log('选择视频',res);
						let fileListLen = that.pageData.imgs_videos.length
						let file = res.tempFilePath
						console.log(file);
						uni.uploadFile({
							url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
							filePath: file,
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')?uni.getStorageSync('token'):'',
								'api-name': 'iosapp'
							},
							formData: {
								user: 'test'
							},
							success: (res2) => {
								var data = JSON.parse(res2.data)
								console.log('data:',data);
								let item = {
									type: 'video',
									url: data.data.url
								}
								that.pageData.imgs_videos.push(item)
								uni.hideLoading()
								console.log('上传完图片内容',that.pageData.imgs_videos);
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			}
		},
	}
</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: 200rpx;
					height: 200rpx;
				}
				video {
					width: 200rpx;
					height: 200rpx;
				}
				.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;
				}
				.close_icon {
					position: absolute;
					top: 0;
					right: 15rpx;
					width: 30rpx;
					height: 30rpx;
					z-index: 99;
				}
			}
		}
		.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;
		}
		.choose {
			padding: 20rpx 0;
		}
	}
</style>