You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
565 lines
13 KiB
565 lines
13 KiB
<template>
|
|
<view style="padding-bottom: 50rpx;">
|
|
<view class="desc">
|
|
<view class="h1-title">动态信息</view>
|
|
<textarea class="value" v-model="form.content" placeholder="请输入动态信息" placeholder-style="fontsize: 28rpx"/>
|
|
</view>
|
|
<view class="line"></view>
|
|
<!-- 上传图片 -->
|
|
<view class="avatar-info">
|
|
<view class="h1-title">上传图片</view>
|
|
<view class="up-box">
|
|
<view class="up-load" @click="upImages">
|
|
<view class="iconfont icon-tianjia"></view>
|
|
</view>
|
|
<view class="up-load" v-for="(item,index) in form.photo_show" :key="index" style="border: none">
|
|
<image :src="item" mode=""></image>
|
|
<view class="close" @click="deleteImage(index)">+</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<!-- 上传视频 -->
|
|
<view class="video-box">
|
|
<view class="h1-title">上传视频</view>
|
|
<view v-if="form.video" class="video-up-load">
|
|
<video class="video" :src="form.video" controls></video>
|
|
<view class="close" @click.stop="deleteVideo">+</view>
|
|
</view>
|
|
<view v-else class="video-up-load" @click="upLoadVideo">
|
|
<view class="iconfont icon-tianjia"></view>
|
|
</view>
|
|
</view>
|
|
<!-- 选择地址 -->
|
|
<view class="location" @click="goLocation">
|
|
<view style="color: #333;">{{form.address}}</view>
|
|
<image :src="imgfixUrls + 'merchant/where.svg'" />
|
|
<view>定位</view>
|
|
</view>
|
|
<!-- 发布按钮 -->
|
|
<view class="footer-btn" @click="handlesubmitClick">发布</view>
|
|
<!-- h5选择地址 -->
|
|
<!-- #ifdef H5 -->
|
|
<PopManager :show="isOpenLaction" :type="'bottom'" :overlay="'false'" :showOverlay="'false'">
|
|
<view class="iframe-wid-hgt" :style="{ height: phoneHight,width:phoneWidth }" v-if="latlngs.latitude">
|
|
<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp&coord=${latlngs.latitude},${latlngs.longitude}`"></iframe>
|
|
</view>
|
|
<view class="iframe-wid-hgt" :style="{ height: phoneHight,width:phoneWidth }" v-if="!latlngs.latitude">
|
|
<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp`"></iframe>
|
|
</view>
|
|
</PopManager>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
import wxApi from '@/common/js/wxApi.js';
|
|
import PopManager from '@/components/template/PopManager';
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
content: '',
|
|
photo: [],
|
|
photo_show: [],
|
|
video: '',
|
|
lng: '',
|
|
lat: '',
|
|
address: '点击定位地址',
|
|
},
|
|
dynamic_id: '',
|
|
isOpenLaction: false,
|
|
disabled: true,
|
|
userAddress: {},
|
|
owenscitylist:[],
|
|
phoneHight: '',
|
|
phoneWidth: '',
|
|
latlngs: null,
|
|
counts:true,
|
|
userInfo:{},
|
|
lblis:{}
|
|
}
|
|
},
|
|
components: {
|
|
PopManager
|
|
},
|
|
onLoad(e) {
|
|
let _this = this
|
|
if(e.id != 0) {
|
|
console.log('触发')
|
|
_this.dynamic_id = e.id
|
|
}
|
|
_this.owenscitylist = uni.getStorageSync('cityList');
|
|
|
|
let locationInfo = uni.getStorageSync('curLoction') || {}
|
|
_this.form.lat = locationInfo.latitude || ''
|
|
_this.form.lng = locationInfo.longitude || ''
|
|
// 编辑动态时才请求
|
|
if(e.id != 0) {
|
|
_this.getMemberList()
|
|
}
|
|
// #ifdef H5
|
|
_this.latlngs = uni.getStorageSync('curLoction');
|
|
_this.toLocale();
|
|
// 获取手机尺寸
|
|
uni.getSystemInfo({
|
|
success(res) {;
|
|
_this.phoneHight = res.windowHeight + 'px';
|
|
_this.phoneWidth = res.windowWidth + 'px';
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
onShow(){
|
|
//#ifdef APP-PLUS
|
|
if(this.lblis.lat){
|
|
let bilis = {
|
|
detailed_address:this.userInfo.address,
|
|
lat:this.lblis.lat,
|
|
lng:this.lblis.lng
|
|
};
|
|
this.getloctions(bilis);
|
|
}
|
|
//#endif
|
|
|
|
|
|
},
|
|
methods: {
|
|
// 获取动态信息
|
|
getMemberList() {
|
|
let _this = this
|
|
App._post_form(
|
|
`&p=dating&do=dynamicEdit&type=get`,
|
|
{
|
|
id: _this.dynamic_id
|
|
},
|
|
res => {
|
|
if(res.errno == 0) {
|
|
_this.form = res.data
|
|
_this.form.address = res.data.address ? res.data.address : '点击定位地址'
|
|
_this.form.photo_show = res.data.photo_show ? res.data.photo_show : []
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
|
|
// 发布编辑动态
|
|
handlesubmitClick() {
|
|
let _this = this,
|
|
datas = {}
|
|
if(_this.form.address === '点击定位地址') {
|
|
_this.form.address = ''
|
|
_this.form.lat = ''
|
|
_this.form.lng = ''
|
|
}
|
|
datas.data = JSON.stringify(_this.form)
|
|
App._post_form(
|
|
`&p=dating&do=dynamicEdit&id=${_this.dynamic_id}&type=post`,
|
|
datas,
|
|
res => {
|
|
if(res.errno == 0) {
|
|
uni.reLaunch({
|
|
url: '/pages/subPages2/blindDate/dynamics/myself'
|
|
})
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
|
|
// 定位
|
|
goLocation(){
|
|
let _this = this;
|
|
// #ifdef MP-WEIXIN
|
|
uni.chooseLocation({
|
|
keyword: '',
|
|
success: function(e) {
|
|
let bilis = {
|
|
detailed_address:e.address,
|
|
lat:e.latitude,
|
|
lng:e.longitude
|
|
};
|
|
_this.disabled = false;
|
|
_this.getloctions(bilis);
|
|
}
|
|
});
|
|
// #endif
|
|
// #ifdef H5
|
|
_this.isOpenLaction = true;
|
|
// #endif
|
|
//#ifdef APP-PLUS
|
|
App.navigationTo({
|
|
url: 'pages/subPages2/map/index'
|
|
});
|
|
//#endif
|
|
},
|
|
|
|
getloctions(lblis){
|
|
console.log(lblis,'666666');
|
|
let _this = this;
|
|
App._post_form(`&p=member&do=lng2areaid&lng=${lblis.lng}&lat=${lblis.lat}`, {}, res => {
|
|
_this.userAddress.detailed_address = lblis.detailed_address;
|
|
_this.userAddress.lat = lblis.lat;
|
|
_this.userAddress.lng = lblis.lng;
|
|
_this.userAddress.provinceid = res.data.provinceid;
|
|
_this.userAddress.countyid = res.data.countyid;
|
|
_this.userAddress.cityid = res.data.cityid;
|
|
_this.userAddress.provinceidName = '';
|
|
_this.owenscitylist.forEach((item,index)=>{
|
|
if(item.id == _this.userAddress.provinceid){
|
|
_this.form.address = item.name;
|
|
_this.userAddress.provinceidName = item.name;
|
|
item.area.forEach(items=>{
|
|
if(items.id == _this.userAddress.cityid){
|
|
_this.form.address = `${_this.form.address}${items.name}`;
|
|
_this.userAddress.areaidName = items.name;
|
|
console.log(_this.form.address,items.name);
|
|
items.dist.forEach(itemss=>{
|
|
if(itemss.id == _this.userAddress.countyid){
|
|
_this.form.address = `${_this.form.address}${itemss.name}`;
|
|
_this.userAddress.distidName = itemss.name;
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
console.log(_this.userAddress);
|
|
});
|
|
},
|
|
|
|
toLocale(){
|
|
let _this = this;
|
|
let lblis;
|
|
let count = 1;
|
|
window.addEventListener(
|
|
'message',
|
|
function(event) {
|
|
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
|
|
let loc = event.data;
|
|
if(!_this.counts){
|
|
return
|
|
}
|
|
if(count > 1 || _this.counts){
|
|
if (loc && loc.module == 'locationPicker') {
|
|
console.log(count)
|
|
lblis = {
|
|
lat:loc.latlng.lat,
|
|
lng:loc.latlng.lng,
|
|
detailed_address:loc.poiaddress
|
|
}
|
|
_this.isOpenLaction = false;
|
|
_this.disabled = false;
|
|
//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
|
|
_this.getloctions(lblis);
|
|
}
|
|
}
|
|
count++;
|
|
_this.counts = false;
|
|
setTimeout(()=>{
|
|
_this.counts = true
|
|
},1000)
|
|
},
|
|
false
|
|
);
|
|
},
|
|
|
|
|
|
// h5上传
|
|
uoloadIgs(length, ids = 0, resImg) {
|
|
let _this = this;
|
|
wxApi.uoloadIg(resImg.localIds[ids], data => {
|
|
if (data.errMsg === 'uploadImage:ok') {
|
|
uni.showLoading({});
|
|
let requestData = {
|
|
upload_type: 2,
|
|
id: data.serverId
|
|
};
|
|
App._post_form(
|
|
'&do=uploadFiles',
|
|
requestData,
|
|
res => {
|
|
if (res.errno === 0) {
|
|
_this.form.photo.push(res.data.image)
|
|
_this.form.photo_show.push(res.data.img)
|
|
if (ids < length - 1) {
|
|
ids++;
|
|
uni.setTimeout(_this.uoloadIgs(length, ids, resImg), 500);
|
|
}
|
|
_this.$forceUpdate()
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
uni.hideLoading();
|
|
}
|
|
);
|
|
} else {
|
|
uni.hideLoading();
|
|
App.showError('上传失败');
|
|
}
|
|
});
|
|
},
|
|
|
|
// 上传图片
|
|
async upImages() {
|
|
let _this = this,
|
|
len = 6 - _this.form.photo_show.length || 0
|
|
if(len <= 0) {
|
|
App.showError('最多上传6涨图片')
|
|
return
|
|
}
|
|
// #ifdef H5
|
|
if(App.getClientType() == 2){
|
|
let res = await App.browser_upload(len);
|
|
uni.showLoading();
|
|
res.tempFilePaths.forEach(item => {
|
|
App._upLoad(item).then(options => {
|
|
_this.form.photo.push(options.data.image)
|
|
_this.form.photo_show.push(options.data.img)
|
|
uni.hideLoading();
|
|
})
|
|
})
|
|
return
|
|
}
|
|
wxApi.choseImage(res => {
|
|
let i = res.localIds.length;
|
|
_this.uoloadIgs(i, 0, res);
|
|
},len);
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.chooseImage({
|
|
count: len, //默认9
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album'], //从相册选择
|
|
success: function(res) {
|
|
uni.showLoading();
|
|
res.tempFilePaths.forEach(item => {
|
|
App._upLoad(item).then(options => {
|
|
_this.form.photo.push(options.data.image)
|
|
_this.form.photo_show.push(options.data.img)
|
|
uni.hideLoading();
|
|
})
|
|
})
|
|
},
|
|
fail: function() {
|
|
App.showError('上传失败');
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
|
|
// 删除照片
|
|
deleteImage(index) {
|
|
this.form.photo_show.splice(index,1)
|
|
this.form.photo.splice(index,1)
|
|
},
|
|
|
|
// 视频上传
|
|
upLoadVideo() {
|
|
let _this = this;
|
|
uni.chooseVideo({
|
|
count: 1,
|
|
sourceType: ['camera', 'album'],
|
|
success: function(res) {
|
|
console.log(res,'视频上传的res')
|
|
uni.showLoading();
|
|
uni.uploadFile({
|
|
url: App.api_root + '&do=uploadFiles', //仅为示例，非真实的接口地址
|
|
filePath: res.tempFilePath,
|
|
name: 'file',
|
|
formData: {
|
|
upload_type: 1,
|
|
is_base: 1
|
|
},
|
|
success: res => {
|
|
let data = JSON.parse(res.data),
|
|
base64 = new _this.$util.Base64();
|
|
console.log('data', data);
|
|
if (data.errno === 0) {
|
|
_this.form.video = base64.decode(data.data.img)
|
|
} else {
|
|
App.showError(data.message, () => {});
|
|
}
|
|
uni.hideLoading();
|
|
},
|
|
fail: res => {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 删除已上传视频
|
|
deleteVideo() {
|
|
this.form.video = ''
|
|
this.isShowVideoClose = false
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.desc {
|
|
width: 690rpx;
|
|
height: 260rpx;
|
|
margin: auto;
|
|
padding-top: 30rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
.label {
|
|
height: 40rpx;
|
|
}
|
|
.value {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
margin-top: 20rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 690rpx;
|
|
height: 8rpx;
|
|
background-color: #F8F8F8;
|
|
margin: auto;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.avatar-info {
|
|
width: 690rpx;
|
|
height: auto;
|
|
margin: auto;
|
|
padding: 40rpx 0;
|
|
.up-box {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.up-load {
|
|
width: 158rpx;
|
|
height: 158rpx;
|
|
line-height: 158rpx;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
margin: 30rpx 10rpx 0 0;
|
|
border: 1rpx dashed #ccc;
|
|
position: relative;
|
|
.iconfont {
|
|
font-size: 60rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
image {
|
|
width: 158rpx;
|
|
height: 158rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
.close {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 15rpx;
|
|
color: #fff;
|
|
background-color: rgba(0,0,0,.5);
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 10rpx;
|
|
transform: rotate(45deg);
|
|
font-size: 32rpx;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.avatar {
|
|
border: none;
|
|
}
|
|
.qrcode {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.h1-title {
|
|
height: 45rpx;
|
|
line-height: 45rpx;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.video-box {
|
|
width: 690rpx;
|
|
margin: 30rpx auto 0;
|
|
height: auto;
|
|
.video-up-load {
|
|
width: 100%;
|
|
height: 390rpx;
|
|
border-radius: 20rpx;
|
|
border: 1rpx dashed #CCCCCC;
|
|
line-height: 390rpx;
|
|
text-align: center;
|
|
margin: 30rpx auto 40rpx;
|
|
position: relative;
|
|
.iconfont {
|
|
font-size: 54rpx;
|
|
font-weight: bold;
|
|
}
|
|
.video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.close {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
color: #fff;
|
|
background-color: rgba(0,0,0,.5);
|
|
position: absolute;
|
|
top: 18rpx;
|
|
right: 18rpx;
|
|
transform: rotate(45deg);
|
|
font-size: 50rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-btn {
|
|
width: 690rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(270deg, #FF8E88 0%, #FDAD28 100%);
|
|
border-radius: 20rpx;
|
|
margin: auto;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.location{
|
|
width: 690rpx;
|
|
height: auto;
|
|
padding: 20rpx 0;
|
|
font-size: 26rpx;
|
|
color: #FF4444;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
image{
|
|
padding-left: 10upx;
|
|
width: 22upx;
|
|
height: 22upx;
|
|
}
|
|
}
|
|
</style>
|
|
|