|
|
@@ -0,0 +1,315 @@
|
|
|
+<template>
|
|
|
+ <view class="message_view_page">
|
|
|
+ <!-- 横幅 -->
|
|
|
+ <view class="gonggao">
|
|
|
+ <view>防骗手册，为您保驾护航</view>
|
|
|
+ <text class="iconfont icon-jinru"></text>
|
|
|
+ </view>
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <view class="goods_info">
|
|
|
+ <!-- 商品图片 -->
|
|
|
+ <view class="goods_img"></view>
|
|
|
+ <!-- 商品描述 -->
|
|
|
+ <view class="goods_text">
|
|
|
+ <view class="goods_name">商品的名称展示</view>
|
|
|
+ <view class="goods_pon">
|
|
|
+ <view>
|
|
|
+ <view class="goods_jiag">￥{{180.00}}</view>
|
|
|
+ <view class="goods_fuwu">卖家包运费</view>
|
|
|
+ </view>
|
|
|
+ <view class="go_goods_btn">立即购买</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 聊天内容 -->
|
|
|
+ <view class="message_view">
|
|
|
+ <scroll-view class="message_view_scroll" :scroll-y="true" :scroll-top="scrollTop" @scrolltoupper="upper"
|
|
|
+ @scrolltolower="lower" @scroll="scroll">
|
|
|
+ <view v-for="(item,index) in 50" :key="index">
|
|
|
+ <!-- 右消息 -->
|
|
|
+ <view class="msg_view">
|
|
|
+ <!-- 占位 -->
|
|
|
+ <view class="msg_user_img_kong">
|
|
|
+ </view>
|
|
|
+ <view class="msg_view_info msg_view_info_right">
|
|
|
+ <view class="msg_view_conent">12465479198kuhsadbckaehbl12465479198kuhsadbckaehbl12465479198kuhsadbckaehbl12465479198kuhsadbckaehbl</view>
|
|
|
+ <view class="msg_view_time">2023-10-11 12:12:12</view>
|
|
|
+ </view>
|
|
|
+ <!-- 头像 -->
|
|
|
+ <view class="msg_user_img">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 左消息 -->
|
|
|
+ <view class="msg_view">
|
|
|
+ <!-- 头像 -->
|
|
|
+ <view class="msg_user_img">
|
|
|
+ </view>
|
|
|
+ <view class="msg_view_info msg_view_info_left">
|
|
|
+ <view class="msg_view_conent">12465479198kuhsadbckaehbl</view>
|
|
|
+ <view class="msg_view_time">2023-10-11 12:12:12</view>
|
|
|
+ </view>
|
|
|
+ <!-- 占位 -->
|
|
|
+ <view class="msg_user_img_kong">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <view>
|
|
|
+ <view class="text_input_view">
|
|
|
+ <view class="text_input_lay">
|
|
|
+ <view class="text_input_tengh">
|
|
|
+ <input class="uni-input_chat" focus placeholder="请输入" />
|
|
|
+ </view>
|
|
|
+ <view class="text_input_mount" @click="gengduo = !gengduo">
|
|
|
+ +
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="gengduo" class="gengduo_view">
|
|
|
+ <view class="gengduo_view_ay">
|
|
|
+ <view class="gengduo_view_icon"></view>
|
|
|
+ <view class="gengduo_view_name">相册</view>
|
|
|
+ </view>
|
|
|
+ <view class="gengduo_view_ay">
|
|
|
+ <view class="gengduo_view_icon"></view>
|
|
|
+ <view class="gengduo_view_name">拍照</view>
|
|
|
+ </view>
|
|
|
+ <view class="gengduo_view_ay">
|
|
|
+ <view class="gengduo_view_icon"></view>
|
|
|
+ <view class="gengduo_view_name">位置</view>
|
|
|
+ </view>
|
|
|
+ <view class="gengduo_view_ay">
|
|
|
+ <view class="gengduo_view_icon"></view>
|
|
|
+ <view class="gengduo_view_name">举报</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ scrollTop: 0,
|
|
|
+ gengduo: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ upper(){
|
|
|
+ console.log("顶")
|
|
|
+ },
|
|
|
+ lower(){
|
|
|
+ console.log("底")
|
|
|
+ },
|
|
|
+ scroll(e){
|
|
|
+ this.scrollTop = e.detail.scrollTop
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+page{
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.message_view_page{
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .msg_view{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ .msg_view_info{
|
|
|
+ flex: 1;
|
|
|
+ min-height: 80rpx;
|
|
|
+ .msg_view_conent{
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 18rpx;
|
|
|
+ word-break:break-all;
|
|
|
+ }
|
|
|
+ .msg_view_time{
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg_view_info_left{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ }
|
|
|
+ .msg_view_info_right{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+ .msg_user_img_kong{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ }
|
|
|
+ .msg_user_img{
|
|
|
+ background: #fff;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gengduo_view{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:8rpx 20rpx 18rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .gengduo_view_ay{
|
|
|
+ width: 110rpx;
|
|
|
+ }
|
|
|
+ .gengduo_view_icon{
|
|
|
+ width: 110rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #eee;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ .gengduo_view_name{
|
|
|
+ font-size: 22rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text_input_view{
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 18rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ .text_input_lay{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ .text_input_tengh{
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 18rpx;
|
|
|
+ .uni-input_chat{
|
|
|
+ border-radius: 34rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border:1rpx solid #eee;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text_input_mount{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ font-size: 52rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #999;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods_info{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ .goods_img{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ .goods_text{
|
|
|
+ flex: 1;
|
|
|
+ min-height: 100rpx;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ .goods_name{
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden; /*超出部分隐藏*/
|
|
|
+ white-space: nowrap; /*禁止换行*/
|
|
|
+ text-overflow: ellipsis; /*省略号*/
|
|
|
+ }
|
|
|
+ .goods_jiag{
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .goods_fuwu{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ .goods_pon{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .go_goods_btn{
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 14rpx 28rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ background: rgb(250, 42, 42);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .message_view{
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ .message_view_scroll{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .gonggao{
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #fff2d4;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: rgb(230, 138, 19);
|
|
|
+ view{
|
|
|
+ color: rgb(230, 138, 19);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
linwenxin