536 lines
14 KiB
Plaintext
536 lines
14 KiB
Plaintext
<style lang="less" scoped>
|
|
@import url(../../styles/theme.less);
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.cu-form-group{
|
|
textarea {
|
|
height: 320rpx!important;
|
|
position: relative;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
overflow: inherit;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
bottom: -36rpx;
|
|
right: 0;
|
|
height: 34rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #c2c2c2;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
|
|
.hottopic {
|
|
height: auto;
|
|
background: #FFFFFF;
|
|
padding: 0 30rpx;
|
|
padding-bottom: 42rpx;
|
|
|
|
.text-sm {
|
|
height: 64rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.tags, .tags-v2 {
|
|
width: auto;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
background: #ececec;
|
|
color: #333333;
|
|
border-radius: 26rpx;
|
|
font-size: 24rpx;
|
|
padding-right: 16rpx;
|
|
|
|
.img {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 10rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.delete {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.tags-v2{
|
|
background: #fff1f5;
|
|
color: #f33b6c;
|
|
}
|
|
|
|
.hint {
|
|
width: 340rpx;
|
|
height: 64rpx;
|
|
text-align: center;
|
|
line-height: 64rpx;
|
|
background: #333333;
|
|
position: relative;
|
|
margin-left: 20rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
border-radius: 17rpx;
|
|
}
|
|
|
|
.hint::before {
|
|
content: "";
|
|
top: 0;
|
|
bottom: 0;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
left: -4rpx;
|
|
margin: auto;
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
.img-title {
|
|
font-size: 24rpx;
|
|
color: #AAAAAA;
|
|
padding: 0 30rpx 16rpx 30rpx;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.grid.col-04.grid-square > view:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.ui-dynamic-pic-item{
|
|
width:216rpx;
|
|
height:216rpx;
|
|
|
|
.ui-dynamic-pic {
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.ui-delete-icon{
|
|
width:36rpx!important;
|
|
height:36rpx!important;
|
|
border-radius: 60rpx!important;
|
|
margin: 6rpx 6rpx 0 0!important;
|
|
}
|
|
}
|
|
|
|
.relative_bot{
|
|
.videoCenter{
|
|
border-radius: 24rpx;
|
|
width: 224rpx;
|
|
height: 224rpx;
|
|
}
|
|
.close_icon{
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
background-image: url("https://image.fulllinkai.com/202207/05/3d77897be5d841402743fa3c901085a3.png");
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.d_solids{
|
|
width: 216rpx;
|
|
height: 216rpx;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.location {
|
|
background: #FFFFFF;
|
|
padding: 10rpx 30rpx 0 30rpx;
|
|
position: relative;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 24rpx;
|
|
height: 28rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.issue-main {
|
|
height: auto;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 100rpx;
|
|
|
|
.issue {
|
|
width: 360rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
background: linear-gradient(270deg, #FF85A5 0%, #FF5380 100%);
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
// 弹框
|
|
.modal-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
overflow: hidden;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.modal-dialog {
|
|
width: 540rpx;
|
|
overflow: hidden;
|
|
z-index: 9999;
|
|
background: #f9f9f9;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.modal-title {
|
|
padding-top: 30rpx;
|
|
font-size: 32rpx;
|
|
color: #030303;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-content {
|
|
padding: 20rpx 32rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 86rpx;
|
|
border-top: 1px solid #dedede;
|
|
font-size: 34rpx;
|
|
line-height: 86rpx;
|
|
}
|
|
|
|
.btn-cancel {
|
|
width: 50%;
|
|
color: #abb4bd;
|
|
text-align: center;
|
|
border-right: 2rpx solid #dedede;
|
|
}
|
|
|
|
.btn-confirm {
|
|
width: 50%;
|
|
color: #6fb64b;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="ui-issue">
|
|
<view class="cu-form-group ui-relative">
|
|
<textarea v-model="value" fixed="{{true}}" adjust-position="true" show-confirm-bar="{{false}}" maxlength="500" focus="{{true}}" style="caret-color: #f33b6c;word-break:break-word;" :placeholder="placeholder"></textarea>
|
|
<view class="num ui-pr-30">{{value.length}}/500</view>
|
|
</view>
|
|
<view class="hottopic">
|
|
<view class="text-sm flex" @tap="jumpPath">
|
|
<view class="f-fcc" v-if="title == ''">
|
|
<view class="tags f-fcc">
|
|
<image class="img" src="https://images.ufutx.com/202103/03/23b49569624fb2516fa7267cb255b447.png" alt=""/>
|
|
选择话题
|
|
</view>
|
|
<view class="hint">添加话题更容易获得回复哦</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="tags-v2 f-fcc">
|
|
<image class="img" src="https://images.ufutx.com/202102/04/dc3043df7d265ae0b2401e589405a239.png" alt=""/>
|
|
{{ title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="img-title" v-if="uploadType == 'video'">添加视频 (最多30秒)</view>
|
|
<view class="img-title" v-else>添加照片 (最多9张)</view>
|
|
<view class="cu-form-group">
|
|
<view class="grid col-04 grid-square flex-sub">
|
|
<block v-if="uploadType == 'image'">
|
|
<view class="bg-img ui-dynamic-pic-item" v-for="(item,index) in imgList" :key="index" @tap="$previewImages(item, imgList)">
|
|
<image class="ui-dynamic-pic" :src="item" mode="aspectFill"></image>
|
|
<view class="cu-tag bg-red ui-delete-icon" @tap="delImg" data-index="{{index}}">
|
|
<text class="cuIcon-close"></text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-if="uploadType == 'video'">
|
|
<view class="relative_bot">
|
|
<video id="video" referrer-policy="origin" src="{{play_url}}" direction="0" controls="{{true}}" class="videoCenter"></video>
|
|
<view class="close_icon" @tap="closeFn"></view>
|
|
</view>
|
|
</block>
|
|
<block v-if="!play_url">
|
|
<view class="d_solids" style="background-image: url('https://image.fulllinkai.com/202207/05/691522eab940b6165d2f3784984c18bd.png')" @tap="chooseVideo" v-if="!uploadType || mgList.length < 1"></view>
|
|
<view class="d_solids" style="background-image: url('https://image.fulllinkai.com/202207/05/deb3f6b011f33e54e3fdecf2a9da65f4.png')" @tap="ChooseImage" v-if="imgList.length<9"></view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="location {{address == '我在哪里'? '' : 'color-theme'}}" bindtap="location">
|
|
<image v-if="address == '我在哪里'" class="img" src="https://images.ufutx.com/202102/04/817a393539ee854226eef79defef2fc4.png"/>
|
|
<image v-else class="img" src="https://images.ufutx.com/202101/28/be1cca1ed09cf469d5baefdf95a12bd9.png"/>
|
|
{{ address }}
|
|
</view>
|
|
<view class="issue-main">
|
|
<view class="issue" @tap="saveIssue">发布</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showCon" class="modal-mask" @tap="showCon = false">
|
|
<view class="modal-dialog">
|
|
<view class="modal-title">温馨提示</view>
|
|
<view class="modal-content">获取定位失败，请前往设置打开定位权限</view>
|
|
<view class="modal-footer">
|
|
<view class="btn-cancel">取消</view>
|
|
<button open-type="openSetting" class="btn-confirm button-on-view" @tap.stop="showCon = false">设置</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uploadPic :num="9 - imgList.length" :chooseShow.sync="choosePicsShow" @changeVal="changeVal" @closeUploadPic="closeUpload"></uploadPic>
|
|
<!-- <uploadVideo :chooseShow.sync="chooseVideoShow" @changeVal="changeVideoVal" @closeUploadVideo="closeUpload"></uploadVideo>-->
|
|
<uploadVideoV2 ref="uploadVideo" @uploadVideoSuccess="changeVideoVal" @closeUploadVideo="closeUpload"></uploadVideoV2>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import https from '../../mixins/https'
|
|
import base from '../../mixins/base'
|
|
import {service} from '../../config'
|
|
|
|
wepy.page({
|
|
config: {},
|
|
mixins: [https, base],
|
|
|
|
data: {
|
|
from: '', // 从哪个页面进入
|
|
id: 0,
|
|
title: '',
|
|
hot: 0,
|
|
value: '',
|
|
throttle: true,
|
|
placeholder: '用视频/图片分享记录，能获得更多好友点赞',
|
|
play_url: '',
|
|
videoId: '',
|
|
chooseVideoShow: false,
|
|
choosePicsShow: false,
|
|
imgList: [],
|
|
showCon: false,
|
|
uploadType: '',
|
|
address: '我在哪里',
|
|
uploadVideo: null
|
|
},
|
|
methods: {
|
|
saveIssue() {
|
|
let vm = this
|
|
let data = {
|
|
topic_id: vm.id * 1,
|
|
content: vm.value,
|
|
photos: vm.imgList,
|
|
aliyun_video_id: vm.videoId,
|
|
address: vm.address == '我在哪里' ? '' : vm.address,
|
|
is_hot: vm.hot * 1
|
|
}
|
|
if (!vm.value) {
|
|
vm.$showToast('请输入动态内容')
|
|
return
|
|
}
|
|
if (vm.throttle) {
|
|
vm.throttle = false
|
|
vm.$post({url: `${service.host}/moment/add`, data}).then(({code}) => {
|
|
wx.hideLoading()
|
|
if (code == 0) {
|
|
vm.$showToast('动态已发布')
|
|
setTimeout(() => {
|
|
vm.throttle = true
|
|
// 发布成功后返回列表并且切换到最新tab
|
|
const pages = getCurrentPages()
|
|
const prevPage = pages[pages.length - 2]
|
|
if (vm.from == 'dynamic') {
|
|
prevPage.$wepy.dynamicTabsIndex = 1
|
|
}
|
|
prevPage.$wepy.page = 1
|
|
prevPage.$wepy.scrollTopHandle = -1
|
|
prevPage.$wepy.getList()
|
|
wx.navigateBack({delta: 1})
|
|
}, 1200)
|
|
}
|
|
}).catch(() => {
|
|
vm.throttle = true
|
|
wx.hideLoading()
|
|
})
|
|
}
|
|
},
|
|
delImg(index) {
|
|
let vm = this
|
|
vm.imgList.splice(index, 1)
|
|
if (vm.imgList && vm.imgList.length == 0) {
|
|
vm.uploadType = ''
|
|
}
|
|
},
|
|
closeFn() {
|
|
let vm = this
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '删除后需要重新上传哦！是否继续？',
|
|
confirmText: '确认删除',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
vm.uploadType = ''
|
|
vm.play_url = ''
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
location() {
|
|
let vm = this
|
|
// 判断开启位置允许
|
|
if (wx.getFuzzyLocation) {
|
|
wx.getSetting({
|
|
success: (res) => {
|
|
if (!res.authSetting['scope.userFuzzyLocation'] && !res.authSetting['scope.userLocation']) {
|
|
// 打开提示框，提示前往设置页面
|
|
vm.showCon = true
|
|
}
|
|
}
|
|
})
|
|
// 判断GPS是否开启
|
|
wx.getSystemInfo({
|
|
success: (res) => {
|
|
console.log(res + 'GPS定位')
|
|
var isopendingwei = res.locationEnabled
|
|
console.log(res.locationEnabled)
|
|
if (isopendingwei == false) {
|
|
console.log('请先开启手机GPS定位,然后重新刷新')
|
|
wx.showToast({
|
|
title: '请打开GPS定位获取地理位置',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
wx.getFuzzyLocation({
|
|
type: 'gcj02',
|
|
success(res) {
|
|
vm.latitude = res.latitude
|
|
vm.longitude = res.longitude
|
|
wx.chooseLocation({
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
scale: 28, // 缩放比例
|
|
success(res) {
|
|
if (res.address == '') {
|
|
vm.address = '我在哪里'
|
|
} else {
|
|
vm.address = res.address
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
console.log('1312312----')
|
|
vm.hide = false
|
|
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
|
})
|
|
}
|
|
},
|
|
ChooseImage() {
|
|
let vm = this
|
|
if (vm.imgList.length >= 9) {
|
|
vm.$showToast('最多可上传9张')
|
|
return
|
|
}
|
|
vm.choosePicsShow = true
|
|
},
|
|
chooseVideo() {
|
|
let vm = this
|
|
vm.$refs.uploadVideo.choosevideo()
|
|
vm.chooseVideoShow = true
|
|
},
|
|
changeVal(e) {
|
|
let vm = this
|
|
e.forEach((item) => {
|
|
vm.uploadType = 'image'
|
|
vm.imgList.push(item.filePath)
|
|
})
|
|
vm.choosePicsShow = false
|
|
console.log(vm.imgList, '777')
|
|
},
|
|
changeVideoVal(play_url, videoId) {
|
|
// console.log(e, '711177')
|
|
let vm = this
|
|
// if (e && e.length > 0) {
|
|
// vm.play_url = e[0].filePath
|
|
|
|
// }
|
|
console.log(play_url, 'play_url===')
|
|
vm.play_url = play_url
|
|
vm.videoId = videoId
|
|
vm.uploadType = 'video'
|
|
},
|
|
closeUpload() {
|
|
let vm = this
|
|
vm.choosePicsShow = false
|
|
vm.chooseVideoShow = false
|
|
},
|
|
jumpPath() {
|
|
wx.navigateTo({url: `/pages/dynamic/searchTopic`})
|
|
}
|
|
},
|
|
onShow() {},
|
|
onLoad(e) {
|
|
let vm = this
|
|
vm.from = e.from
|
|
if (e.title) {
|
|
vm.title = e.title
|
|
vm.id = e.id
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '编辑动态',
|
|
backgroundColorTop: '#ffffff',
|
|
backgroundColorBottom: '#ffffff',
|
|
usingComponents: {
|
|
uploadPic: '~@/components/uploadPic',
|
|
uploadVideo: '~@/components/uploadVideo',
|
|
uploadVideoV2: '~@/components/uploadVideoV2',
|
|
}
|
|
}
|
|
</config>
|