森蓝小程序
This commit is contained in:
@@ -0,0 +1,286 @@
|
||||
<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" >×</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>
|
||||
Reference in New Issue
Block a user