详情1.1
This commit is contained in:
DL
15
pages.json
15
pages.json
@@ -527,6 +527,21 @@
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},{
|
||||
"path" : "pages/index/detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh" : false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path" : "pages/index/report",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "举报",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
}, {
|
||||
"path" : "pages/index/post",
|
||||
"style" : {
|
||||
|
||||
246
pages/index/components/chat-input-bar/chat-input-bar.vue
Normal file
246
pages/index/components/chat-input-bar/chat-input-bar.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="chat-input-bar">
|
||||
<view class="chat-input-container">
|
||||
<view class="u-flex u-flex-items-center"
|
||||
style="background-color: #FFFFFF;">
|
||||
<!-- 输入框 -->
|
||||
<view style="flex: 1;position: relative;overflow: hidden;" @click.stop="openPinglun">
|
||||
<u--textarea
|
||||
autoHeight
|
||||
fixed
|
||||
:showConfirmBar="false"
|
||||
border="none"
|
||||
confirmHold
|
||||
:autoFocus="autoFocus"
|
||||
:placeholder="placeholder"
|
||||
maxlength="100"
|
||||
:disabled="disabled"
|
||||
:cursor-spacing="20"
|
||||
v-model="value"
|
||||
:focus="focus"
|
||||
@blur="blur"
|
||||
@focus="emojiShow=false,more=false"
|
||||
@linechange="linechange"
|
||||
:customStyle="'background-color: #f2f0f4; border-radius: '+ borderRadius +'rpx;'"/>
|
||||
<view style="position: absolute;left: 0;top: 0;flex: 1;" @click="openPinglun" v-if="open"/>
|
||||
</view>
|
||||
<!--消息 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
||||
<image src="@/static/images/app/mine/information.png" style="width: 40rpx;height: 40rpx;"/>
|
||||
</view>
|
||||
<!-- 星星 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
||||
<image src="@/static/images/app/serve/coupons_xingxing.png" style="width: 68rpx;height: 68rpx;"/>
|
||||
</view>
|
||||
<!-- <view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
||||
<image src="@/static/images/app/serve/coupons_xingxing_end.png" style="width: 68rpx;height: 68rpx;"/>
|
||||
</view> -->
|
||||
<!--拇指 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
||||
<image src="@/static/images/app/mine/like.png" style="width: 45rpx;height: 45rpx;"/>
|
||||
</view>
|
||||
<!-- <view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
||||
<image src="@/static/images/app/mine/like_act.png" style="width: 45rpx;height: 45rpx;"/>
|
||||
</view> -->
|
||||
<!-- 分享 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
||||
<image src="@/static/images/app/mine/share.png" style="width: 40rpx;height: 40rpx;"/>
|
||||
</view>
|
||||
|
||||
<!--表情按钮 -->
|
||||
<!-- <view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
||||
<image src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/expression.png" style="width: 48rpx;height: 48rpx;"/>
|
||||
</view> -->
|
||||
<!-- 更多按钮 -->
|
||||
<!-- <view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
||||
<image src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/more.png" style="width: 48rpx;height: 48rpx;"/>
|
||||
</view> -->
|
||||
<!--发送按钮 -->
|
||||
<view v-if="value!==''" style="margin-left: 20rpx;"
|
||||
@click.stop="sendSMS(value,0)" >
|
||||
<image src="https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/63571017a4a042b682e1c6be08a3cdda.png" style="width: 48rpx;height: 48rpx;"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 功能 -->
|
||||
<template v-if="more">
|
||||
<u-grid col="4" :border="false" @click="gridItemTap" customStyle="background-color: #fff;" ref="grid">
|
||||
<u-grid-item v-for="(item,index) in gridItem" :key="index" customStyle="margin-bottom: 10rpx;">
|
||||
<u--image :src="item.img" width="52" height="52"/>
|
||||
<view style="margin-top: 10rpx;">
|
||||
<u--text :text="item.text" color="#999" size="24rpx" align="center"/>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</template>
|
||||
<!-- 表情 -->
|
||||
<template v-else-if="emojiShow">
|
||||
<view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<waterfall column-count="8" column-width="auto" column-gap="0" left-gap="10" style="height: 200rpx;background-color: #fff;">
|
||||
<cell v-for="(item,index) in emoicon" :key="index" style="padding: 10rpx;" @click="value += item">
|
||||
<text style="font-size: 36rpx;">{{item}}</text>
|
||||
</cell>
|
||||
</waterfall>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<u-list height="200rpx" customStyle="background-color:#fff;padding:10rpx 0;">
|
||||
<u-grid col="10">
|
||||
<u-grid-item v-for="(item,index) in emoicon" :key="index"
|
||||
@click="value += item"
|
||||
customStyle="margin-bottom:20rpx;">
|
||||
<u-list-item>
|
||||
<text style="font-size: 36rpx;text-align: left;">{{item}}</text>
|
||||
</u-list-item>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</u-list>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/util.js";
|
||||
export default {
|
||||
name:"chat-input-bar",
|
||||
props:{
|
||||
groupID:''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value:'',
|
||||
borderRadius: 50,//评论框圆角大小
|
||||
emojiShow: false,//表情显示
|
||||
autoFocus:false,//自动焦点
|
||||
focus:false,
|
||||
disabled:false,
|
||||
open:true,
|
||||
more:false,
|
||||
placeholder: "发表评论",
|
||||
emoicon: [
|
||||
"😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
|
||||
"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
|
||||
"💔", "🉑", "💢", "💣", "💩", "💪", "👍", "👊", "👋", "👌", "👐"
|
||||
],
|
||||
gridItem:[
|
||||
{img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/album.png',text:'相册'},
|
||||
{img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/video.png',text:'视频'},
|
||||
// {img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/redEnvelope.png',text:'红包'},
|
||||
{img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/phone.png',text:'语音通话'},
|
||||
{img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/video.png',text:'视频通话'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//发送
|
||||
sendSMS(value,type) {
|
||||
if(!value) return uni.$u.toast('内容不能为空');
|
||||
this.$emit('sendSMS',{msg:value,msgType:type});
|
||||
this.value = '';
|
||||
},
|
||||
//点击更多事件
|
||||
gridItemTap(index){
|
||||
switch(index){
|
||||
case 0:
|
||||
// 从相册选择图片
|
||||
utils.uploadImageOne({
|
||||
count: 1,
|
||||
sizeType: ['original'],
|
||||
sourceType:['album', 'camera'],
|
||||
dir:'crmebimage/public/product/'
|
||||
},null,(res)=>{
|
||||
uni.hideLoading();
|
||||
this.sendSMS(res.data,1);
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 从相册选择视频
|
||||
utils.uploadVideo({
|
||||
dir:'crmebimage/public/product/'
|
||||
},null,true, res => {
|
||||
uni.hideLoading();
|
||||
this.sendSMS(res.data,2);
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
//语音通话
|
||||
this.$emit('TUICallKit',1);
|
||||
break;
|
||||
case 3:
|
||||
//语音通话
|
||||
this.$emit('TUICallKit',2);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//输入框行数变化时
|
||||
linechange({detail}){
|
||||
if(Math.abs(detail.height) < 26){
|
||||
this.borderRadius = 50
|
||||
}else{
|
||||
this.borderRadius = 10
|
||||
}
|
||||
},
|
||||
//打开输入框
|
||||
openPinglun(){
|
||||
this.emojiShow=false;
|
||||
this.more = false;
|
||||
// #ifndef APP-PLUS
|
||||
this.open = false;
|
||||
uni.$u.debounce(()=>{
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if(plus.os.name == "iOS"){
|
||||
this.open = false;
|
||||
this.disabled = false;
|
||||
uni.$u.debounce(()=>{
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
}else{
|
||||
this.focus = true;
|
||||
this.$nextTick(()=>{
|
||||
this.open = false;
|
||||
if(!this.open){
|
||||
plus.key.showSoftKeybord();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
//失去焦点
|
||||
blur(){
|
||||
// #ifdef APP-PLUS
|
||||
if(plus.os.name == "iOS"){
|
||||
this.disabled = true;
|
||||
this.autoFocus = false;
|
||||
}
|
||||
this.open = true;
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.open = true;
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-input-bar{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-top: solid 1px #f5f5f5;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 15rpx 78rpx;
|
||||
}
|
||||
.chat-input-container{
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
762
pages/index/detail.vue
Normal file
762
pages/index/detail.vue
Normal file
@@ -0,0 +1,762 @@
|
||||
<template>
|
||||
<view class="detail">
|
||||
<view class="nav">
|
||||
<u-navbar title=" " safeAreaInsetTop placeholder>
|
||||
<view class="u-nav-slot" slot="left">
|
||||
<view class="posi_l">
|
||||
<u-icon name="arrow-left" size="19" color="#000000"></u-icon>
|
||||
<!-- 判断 -->
|
||||
<!-- <view class="img_name">
|
||||
<image src="@/static/images/app/serve/repair_refund.png" style="width: 48rpx;height: 48rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="nav_name"> 昵称 </view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="administration" slot="right" @click="dropBtn">
|
||||
<view class="posi_r">
|
||||
<!-- 判断 -->
|
||||
<!-- <view class="r_txt"> 已关注 </view> -->
|
||||
<image class="r_img" :src="`${config.aliyunOssUrl}/static/images/app/icon/drop.png`" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP -->
|
||||
<view class="" slot="right" @click="dropBtn">
|
||||
<view class="posi_r">
|
||||
<!-- <view class="r_txt"> 已关注 </view> -->
|
||||
<image class="r_img" src="@/static/images/app/icon/drop.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</u-navbar>
|
||||
</view>
|
||||
<!-- 帖子内容 -->
|
||||
<view class="content" >
|
||||
<view class="con_up">
|
||||
<view class="up_l">
|
||||
<image class="l_img" src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
<view class="l_nickname">
|
||||
<view class="nickname"> 发布者的昵称 </view>
|
||||
<view class="time"> 2023-10-24 12:12:34 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="up_r">
|
||||
<image class="r_img" src="@/static/images/app/icon/add.png" mode=""></image>
|
||||
<view class="r_txt"> 关注 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="con_txt">
|
||||
关于我想开车出去环游世界的计划，实施的第一步：先躺床上，然后闭上眼睛，梦里什么都有
|
||||
</view>
|
||||
<view class="con_img">
|
||||
<image src="@/static/images/app/serve/repair_refund.png" mode=""></image>
|
||||
</view>
|
||||
<view class="con_foot">
|
||||
<view class="foot_l"> IP 杭州 </view>
|
||||
<view class="foot_r">
|
||||
<u-icon name="eye" size="19" color="#999999"></u-icon>
|
||||
<view class="r_num"> 3424 浏览量 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评论 -->
|
||||
<view class="all_comment">
|
||||
<view class="com_title">
|
||||
<view class="tit_l">
|
||||
<view :class="showAll?'l_click':'l_l'" @click="allBtn"> 全部 (20) </view>
|
||||
<view :class="showLook?'r_click':'l_r'" @click="lookBtn"> 只看楼主 </view>
|
||||
</view>
|
||||
<u-tabs
|
||||
:list="list"
|
||||
:scrollable='false'
|
||||
lineWidth="0"
|
||||
lineColor="#fff"
|
||||
:activeStyle="{color: '#111111'}"
|
||||
:inactiveStyle="{color: '#999999'}"
|
||||
itemStyle="height: 34px; font-size: 28rpx;"
|
||||
>
|
||||
</u-tabs>
|
||||
</view>
|
||||
<view class="com_content">
|
||||
<view class="con_title">
|
||||
<view class="title_l">
|
||||
<image src="@/static/images/app/serve/repair_refund.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="tit_name"> 评论者的昵称 </view>
|
||||
</view>
|
||||
<image @click="moreBtn" src="@/static/images/app/icon/more.png" style="width: 32rpx;height: 32rpx;"></image>
|
||||
</view>
|
||||
<view class="con_txt">
|
||||
关于我想开车出去环游世界的计划，实施的第一步：先躺床上，然后闭上眼睛，梦里什么都有
|
||||
</view>
|
||||
<view class="con_info">
|
||||
<view class="info_l">
|
||||
30分钟前 浙江杭州
|
||||
</view>
|
||||
<view class="info_r">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/like.png" style="width: 30rpx;height: 30rpx;"/>
|
||||
<view class="info_num"> 123 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="con_list">
|
||||
<view class="item_view">
|
||||
<view class="view_up">
|
||||
<view class="up_name"> 不会游泳的鱼 </view>
|
||||
<image src="@/static/images/app/icon/author.png" style="width: 76rpx;height: 38rpx;"/>
|
||||
</view>
|
||||
<view class="view_down">
|
||||
<view class="down_l"> 您的回复牛了～ </view>
|
||||
<view class="down_r">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/like.png" style="width: 30rpx;height: 30rpx;"/>
|
||||
<view class="down_num"> 123 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_view">
|
||||
<view class="view_up">
|
||||
<view class="up_name"> 游泳的鱼 </view>
|
||||
<image src="@/static/images/app/icon/my.png" style="width: 54rpx;height: 38rpx;"/>
|
||||
</view>
|
||||
<view class="view_down">
|
||||
<view class="down_l"> 您的回复牛了～ </view>
|
||||
<view class="down_r">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/like.png" style="width: 30rpx;height: 30rpx;"/>
|
||||
<view class="down_num"> 123 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_foot">
|
||||
<view class="foot_num"> 共 12 条回复 </view>
|
||||
<u-icon name="arrow-right" size="12" color="#13AFA8 "></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="con_xian"></view>
|
||||
</view>
|
||||
|
||||
<view class="com_content">
|
||||
<view class="con_title">
|
||||
<view class="title_l">
|
||||
<image src="@/static/images/app/serve/repair_refund.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="tit_name"> 评论者的昵称 </view>
|
||||
</view>
|
||||
<image src="@/static/images/app/icon/more.png" style="width: 32rpx;height: 32rpx;"></image>
|
||||
</view>
|
||||
<view class="con_txt">
|
||||
关于我想开车出去环游世界的计划，实施的第一步：先躺床上，然后闭上眼睛，梦里什么都有
|
||||
</view>
|
||||
<view class="con_info">
|
||||
<view class="info_l">
|
||||
30分钟前 浙江杭州
|
||||
</view>
|
||||
<view class="info_r">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/like.png" style="width: 30rpx;height: 30rpx;"/>
|
||||
<view class="info_num"> 123 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="con_xian"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 200rpx;"></view>
|
||||
<!-- 底部输入框 -->
|
||||
<view class="bottom_up">
|
||||
<view class="bottom_l">
|
||||
<view @click.stop="openPinglun">
|
||||
<u--textarea
|
||||
autoHeight
|
||||
fixed
|
||||
:showConfirmBar="false"
|
||||
border="none"
|
||||
confirmHold
|
||||
:autoFocus="autoFocus"
|
||||
:placeholder="placeholder"
|
||||
maxlength="100"
|
||||
:disabled="disabled"
|
||||
:cursor-spacing="20"
|
||||
v-model="value"
|
||||
:focus="focus"
|
||||
@blur="blur"
|
||||
@linechange="linechange"
|
||||
:customStyle="'background-color: #f2f0f4;'"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_r">
|
||||
<view class="r_img_txt">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/information.png" style="width: 40rpx;height: 40rpx;"/>
|
||||
<view class="txt"> 165 </view>
|
||||
</view>
|
||||
<!-- 图有问题 -->
|
||||
<view class="r_img_txt">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/serve/coupons_xingxing.png" style="width: 40rpx;height: 40rpx;"/>
|
||||
<view class="txt"> 123 </view>
|
||||
</view>
|
||||
<view class="r_img_txt">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/like.png" style="width: 40rpx;height: 40rpx;"/>
|
||||
<view class="txt"> 321 </view>
|
||||
</view>
|
||||
<view class="r_img_txt">
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/app/mine/share.png" style="width: 40rpx;height: 40rpx;"/>
|
||||
<view class="txt"> 4.5k </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="bottom">
|
||||
<chatInputBar @sendSMS="sendSMS" @keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap"
|
||||
ref="chatInputBar" />
|
||||
</view> -->
|
||||
|
||||
<!-- drop的弹层 -->
|
||||
<u-popup :show="show" :round="10" mode="bottom" @close="show=false">
|
||||
<view class="popup_view">
|
||||
<view class="pop_up">
|
||||
<view class="up_view">
|
||||
<image src="@/static/images/app/config/weixin.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 微信好友 </view>
|
||||
</view>
|
||||
<view class="up_view">
|
||||
<image src="@/static/images/app/config/pengyouquan.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 朋友圈 </view>
|
||||
</view>
|
||||
<view class="up_view" @click="whoBtn(1)">
|
||||
<image src="@/static/images/app/welfare/invite.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 复制链接 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pop_down">
|
||||
<view class="up_view">
|
||||
<image src="@/static/images/app/config/weixin.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 作者主页 </view>
|
||||
</view>
|
||||
<view class="up_view">
|
||||
<image src="@/static/images/app/config/pengyouquan.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 关注 </view>
|
||||
</view>
|
||||
<view class="up_view" @click="whoBtn(2)">
|
||||
<image src="@/static/images/app/welfare/invite.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 不喜欢 </view>
|
||||
</view>
|
||||
<view class="up_view" @click="toReportPages">
|
||||
<image src="@/static/images/app/welfare/invite.png" style="width: 80rpx;height: 80rpx; border-radius: 40rpx 40rpx 40rpx 40rpx"></image>
|
||||
<view class="up_txt"> 举报 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pop_foot" @click="show=false"> 取消 </view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="img_view">
|
||||
<image v-if="imgShow1" src="@/static/images/app/config/link.png" style="width: 260rpx;height: 76rpx; border-radius: 16rpx"></image>
|
||||
<image v-if="imgShow2" src="@/static/images/app/config/unlike.png" style="width: 326rpx;height: 76rpx; border-radius: 16rpx"></image>
|
||||
</view>
|
||||
<!-- more 的弹层 -->
|
||||
<u-popup :show="showMore" :round="10" mode="bottom" @close="showMore=false">
|
||||
<view class="more_view">
|
||||
<view class="txt" @click="toReportPages"> 举报 </view>
|
||||
<view class="txt"> 回复 </view>
|
||||
<view class="txt"> 复制 </view>
|
||||
<view class="foot" @click="showMore=false"> 取消 </view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
|
||||
import config from '@/config'
|
||||
export default{
|
||||
components: {
|
||||
chatInputBar
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
config,
|
||||
value:'',
|
||||
autoFocus:false,//自动焦点
|
||||
// borderRadius: 50,//评论框圆角大小
|
||||
emojiShow: false,//表情显示
|
||||
placeholder: "发表评论",
|
||||
disabled:false,
|
||||
focus:false,
|
||||
open:true,
|
||||
more:false,
|
||||
// tabs
|
||||
list:[{ name: '最新'},{ name: '最新'}],
|
||||
showAll:true,
|
||||
showLook:false,
|
||||
// 弹 dropBtn
|
||||
show:false,
|
||||
imgShow1:false,
|
||||
imgShow2:false,
|
||||
timer1:'',
|
||||
timer2:'',
|
||||
// more
|
||||
showMore:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toReportPages(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/report'
|
||||
})
|
||||
},
|
||||
moreBtn(){
|
||||
this.showMore=true
|
||||
},
|
||||
//
|
||||
dropBtn(){
|
||||
this.show=true
|
||||
},
|
||||
// 链接 或 不喜欢
|
||||
whoBtn(num){
|
||||
if(num==1){
|
||||
this.imgShow1=true
|
||||
this.timer1=setTimeout(()=>{
|
||||
this.imgShow1=false
|
||||
},2000)
|
||||
}else{
|
||||
this.imgShow2=true
|
||||
this.timer2=setTimeout(()=>{
|
||||
this.imgShow2=false
|
||||
},2000)
|
||||
}
|
||||
},
|
||||
|
||||
allBtn(){
|
||||
console.log('全部');
|
||||
this.showAll=true
|
||||
this.showLook=false
|
||||
},
|
||||
lookBtn(){
|
||||
console.log('只看楼主');
|
||||
this.showLook=true
|
||||
this.showAll=false
|
||||
},
|
||||
//输入框行数变化时
|
||||
linechange({detail}){
|
||||
if(Math.abs(detail.height) < 26){
|
||||
this.borderRadius = 50
|
||||
}else{
|
||||
this.borderRadius = 10
|
||||
}
|
||||
},
|
||||
//打开输入框
|
||||
openPinglun(){
|
||||
this.emojiShow=false;
|
||||
this.more = false;
|
||||
// #ifndef APP-PLUS
|
||||
this.open = false;
|
||||
uni.$u.debounce(()=>{
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if(plus.os.name == "iOS"){
|
||||
this.open = false;
|
||||
this.disabled = false;
|
||||
uni.$u.debounce(()=>{
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
}else{
|
||||
this.focus = true;
|
||||
this.$nextTick(()=>{
|
||||
this.open = false;
|
||||
if(!this.open){
|
||||
plus.key.showSoftKeybord();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
//失去焦点
|
||||
blur(){
|
||||
// #ifdef APP-PLUS
|
||||
if(plus.os.name == "iOS"){
|
||||
this.disabled = true;
|
||||
this.autoFocus = false;
|
||||
}
|
||||
this.open = true;
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.open = true;
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timer1)
|
||||
clearTimeout(this.timer2)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.more_view {
|
||||
padding: 0 32rpx;
|
||||
.txt {
|
||||
padding: 32rpx 0;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.foot {
|
||||
padding: 32rpx 0;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(153,153,153,0.9);
|
||||
border-top: 1px solid #f1f1ff;
|
||||
}
|
||||
}
|
||||
|
||||
.popup_view {
|
||||
padding: 48rpx 48rpx 0;
|
||||
.pop_up {
|
||||
margin-bottom: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.up_view {
|
||||
margin-right: 60rpx;
|
||||
.up_txt {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
.pop_down {
|
||||
padding-bottom: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #EDEDED ;
|
||||
}
|
||||
.pop_foot {
|
||||
padding: 20rpx 200rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.all_comment {
|
||||
padding: 24rpx 32rpx ;
|
||||
border-top: 1rpx solid #EDEDED;
|
||||
.com_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tit_l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.l_click {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
.l_r {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.l_l {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
.r_click {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.com_content {
|
||||
margin-top: 32rpx;
|
||||
.con_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title_l {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tit_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_txt {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.con_info {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.info_l {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.info_r {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.info_num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.con_list {
|
||||
background: #F8F8F8 ;
|
||||
padding: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
.item_view {
|
||||
margin-bottom: 32rpx;
|
||||
.view_up {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.up_name {
|
||||
margin-right: 16rpx ;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
.view_down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8rpx;
|
||||
.down_l {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #444444;
|
||||
}
|
||||
.down_r {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.down_num {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list_foot {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #13AFA8;
|
||||
.foot_num {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_xian {
|
||||
margin-top: 32rpx;
|
||||
height: 0;
|
||||
border-bottom: 1rpx solid #666666;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
// border: 1px solid red;
|
||||
padding: 18rpx 32rpx 48rpx;
|
||||
.con_up {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.up_l {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
.l_img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
||||
}
|
||||
.l_nickname {
|
||||
margin-left: 16rpx;
|
||||
.nickname {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
}
|
||||
.time {
|
||||
margin-top: 2rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.up_r {
|
||||
padding: 18rpx 34rpx;
|
||||
border: 2rpx solid #13AFA8 ;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.r_img {
|
||||
width: 29rpx;
|
||||
height: 29rpx;
|
||||
}
|
||||
.r_txt {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #13AFA8;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.con_txt {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #222222;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.con_img {
|
||||
margin-top: 24rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
image {
|
||||
width: 686rpx;
|
||||
height: 386rpx;
|
||||
}
|
||||
}
|
||||
.con_foot {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
.foot_r {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.r_num {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_up {
|
||||
// border: 1px solid red;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding: 30rpx 32rpx 88rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
.bottom_l {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom_r {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.r_img_txt {
|
||||
margin-left: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.txt {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.administration {
|
||||
margin-right: 170rpx;
|
||||
}
|
||||
|
||||
.posi_l{
|
||||
// border: 1px solid red;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
.l_txt{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #111111;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.img_name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 16rpx;
|
||||
.nav_name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.posi_r{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.r_txt {
|
||||
padding: 12rpx 40rpx ;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
border: 2rpx solid #999999;
|
||||
border-radius: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.r_img{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
border-bottom: 1rpx solid #E6E6E6;
|
||||
}
|
||||
.detail {
|
||||
position: relative;
|
||||
}
|
||||
.img_view {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
</style>
|
||||
105
pages/index/report.vue
Normal file
105
pages/index/report.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="report">
|
||||
<view class="title"> 请选择你要举报的理由 </view>
|
||||
<view class="select_view">
|
||||
<view class="txt"> 违法信息 </view>
|
||||
<u-icon name="arrow-right" size="12" color="#999999"></u-icon>
|
||||
</view>
|
||||
<view class="textarea">
|
||||
<u--textarea v-model="value" placeholder="为了帮助更好的解决问题，请把举报的内容简单描述一下～" count maxlength='100' height='200' border='none'></u--textarea>
|
||||
</view>
|
||||
|
||||
<!-- <view class="up_down">
|
||||
<view class="content flex-wrap align-center">
|
||||
<view class="image-box rel" v-for="(item,index) in imageList" :key="index">
|
||||
<image :src="item" mode=""></image>
|
||||
<image @click="DelPic(index)" class="reduce abs" :src="clearIcon" mode=""></image>
|
||||
</view>
|
||||
<image src="https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/order_upLoadbg.png" mode="" @click="getImage"></image>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
export default{
|
||||
|
||||
data(){
|
||||
return{
|
||||
uploadIcon: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/order_upLoadbg.png',
|
||||
clearIcon: 'https://qicheoss.oss-cn-shanghai.aliyuncs.com/static/images/images/order_close.png',
|
||||
config,
|
||||
value:'',
|
||||
imageList: [],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//传图片
|
||||
getImage() {
|
||||
this.$util.uploadImageOne({
|
||||
count: 9,
|
||||
sizeType: ['original'],
|
||||
sourceType: ['album', 'camera'],
|
||||
dir: 'crmebimage/public/product/'
|
||||
}, null, res => {
|
||||
this.imageList.push(res.data)
|
||||
this.videoOrImage = false
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
/**删除图片*/
|
||||
DelPic(key) {
|
||||
this.imageList.splice(key, 1)
|
||||
},
|
||||
confirm() {
|
||||
this.$emit('confirm', this.imageList.join(','))
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.up_down {
|
||||
border: 1px solid red;
|
||||
.upload-bg {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
}
|
||||
.report {
|
||||
background: #fff;
|
||||
padding: 32rpx 24rpx;
|
||||
.title {
|
||||
font-size: 38rpx;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.select_view {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.txt {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
margin-top: 48rpx;
|
||||
padding-bottom: 46rpx;
|
||||
border-bottom: 1rpx solid #ededed ;
|
||||
}
|
||||
}
|
||||
|
||||
page {
|
||||
padding: 24rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
BIN
static/images/app/config/link.png
Normal file
BIN
static/images/app/config/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/images/app/config/unlike.png
Normal file
BIN
static/images/app/config/unlike.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
static/images/app/icon/add.png
Normal file
BIN
static/images/app/icon/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
BIN
static/images/app/icon/author.png
Normal file
BIN
static/images/app/icon/author.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/images/app/icon/drop.png
Normal file
BIN
static/images/app/icon/drop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 B |
BIN
static/images/app/icon/my.png
Normal file
BIN
static/images/app/icon/my.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user