395 lines
10 KiB
Plaintext
395 lines
10 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-v2{
|
|
background: #fff1f5;
|
|
color: #f33b6c;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 224rpx;
|
|
height: 224rpx;
|
|
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">
|
|
<view class="f-fcc" v-if="title == ''">
|
|
<view class="tags f-fcc" catchtap="gotoHotTopic">
|
|
<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" catchtap="gotoHotTopic">
|
|
<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" style="width:216rpx;height:216rpx" v-for="(item,index) in imgList" :key="index" @tap="$previewImages(item, imgList)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<view class="cu-tag bg-red" style="width:36rpx;height:36rpx;border-radius:60rpx;margin:6rpx 6rpx 0 0" @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" bindtap="issue" data-id="{{id}}">发布</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>
|
|
</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: {
|
|
id: '',
|
|
value: '',
|
|
placeholder: '用视频/图片分享记录，能获得更多好友点赞',
|
|
title: '',
|
|
showCon: false,
|
|
imgList: [],
|
|
uploadType: '',
|
|
address: '我在哪里'
|
|
},
|
|
methods: {
|
|
delImg(index) {
|
|
let vm = this
|
|
vm.imgList.splice(index, 1)
|
|
},
|
|
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: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
},
|
|
onLoad() {
|
|
let vm = this
|
|
}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '编辑动态',
|
|
backgroundColorTop: '#ffffff',
|
|
backgroundColorBottom: '#ffffff',
|
|
}
|
|
</config>
|