senlan/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue

<template>
	<view class="uni-popup-share">
		<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
		<view class="uni-share-content">
			<view class="uni-share-content-box">
				<image class="img_1" mode="aspectFill" :src="imgUrl" />
				<text class="model_title">{{name}}</text>
				<view class="section_11 flex-row justify-between">
					<view class="section_8 flex-row" @tap="chooseImage('album')">
						<view class="image-text_7 flex-col">
							<image
								class="label_1"
								referrerpolicy="no-referrer"
								src="https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/icon_%E6%8B%8D%E6%91%84%E7%85%A7%E7%89%87%402x.png"
							/>
							<text class="text-group_3">选择相册图片</text>
						</view>
					</view>
					<view class="section_9 flex-row" @tap="chooseImage('camera')">
						<view class="image-text_8 flex-col">
							<image
								class="label_2"
								referrerpolicy="no-referrer"
								src="https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/icon_%E7%9B%B8%E5%86%8C%E7%85%A7%E7%89%87%402x.png"
							/>
							<text class="text-group_4">拍摄照片</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-share-button-box" @click="close">
			<view class="uni-share-button" >&times;</view>
		</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import {
	initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {	t	} = initVueI18n(messages)
	export default {
		name: 'UniPopupShare',
		mixins:[popup],
		emits:['select'],
		props: {
			title: {
				type: String,
				default: '照片选择'
			},
			beforeClose: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				bottomData: [],
				imgUrl: '',
				name: ''
			}
		},
		created() {},
		computed: {
			cancelText() {
				return t("uni-popup.cancel")
			},
			shareTitleText() {
				return this.title
			}
		},
		methods: {
			setImageAndName(url, name) {
				this.imgUrl = url;
				this.name = name;
			},
			/**
			 * 上传照片
			 */
			chooseImage(type) {
				var _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], 
					sourceType: [type],
					success: function (res) {
						_this.select(res.tempFilePaths);
					}
				});
			},
			/**
			 * 选择内容
			 */
			select(item, index) {
				this.$emit('select', {
					item
				})
				// this.close()
			},
			/**
			 * 关闭窗口
			 */
			close() {
				if(this.beforeClose) return
				this.popup.close()
			}
		}
	}
</script>
<style lang="scss" >
	.uni-popup-share {
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		height: 70vh;
	}
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	.uni-share-title-text {
		font-size: 16px;
		color: #666;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
		height: 100%;
		width: 100%;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		// align-items: center;
		justify-content: center;
	}

	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}

	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}

	.uni-share-image {
		width: 30px;
		height: 30px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 20px;
	}

	.uni-share-button::after {
		border-radius: 50px;
	}
	
	.img_1 {
		height: 720rpx;
		width: 460rpx;
		border-radius: 11px;
	}
	
	.model_title {
		position: absolute;
		top: 750rpx;
		left: 170rpx;
		color: #fff;
	}
	
	.section_11 {
		position: relative;
		align-self: center;
		margin-top: -300rpx;
	}
	
	.section_8 {
	  background-color: rgba(244, 249, 253, 1);
	  border-radius: 10px;
	  padding: 12px 30px 12px 32px;
	  margin-right: 20rpx;
	  height: 200rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.image-text_7 {
	}
	
	.label_1 {
	  width: 40px;
	  height: 40px;
	  margin: 0 23px 0 21px;
	}
	
	.text-group_3 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 14px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 14px;
	  margin-top: 12px;
	}
	
	.section_9 {
	  background-color: rgba(244, 249, 253, 1);
	  border-radius: 10px;
	  padding: 17px 45px 12px 45px;
	  margin-left: 20rpx;
	  height: 200rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.image-text_8 {
	}
	
	.label_2 {
	  width: 40px;
	  height: 30px;
	  align-self: center;
	}
	
	.text-group_4 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 14px;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 14px;
	  margin-top: 17px;
	}
</style>