root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
tianyi 3 weeks ago
parent
5411d99050
commit
d6f7f6b6cd
1 changed files with 470 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 471
      package2/IdleTrad/chat.vue

471
package2/IdleTrad/chat.vue
View File

@ -1,8 +1,477 @@
<template> <template>
<view class="page1">
<!-- 固定顶部导航栏（悬浮在背景图之上） -->
<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}">
<view style="display:flex;align-items: center;">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-search">
<view class="title1">
<view style="width: 25px;height: 25px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
alt="" style="width: 100%;height:100%;background-size: 100%;border-radius: 25px;">
</view>
<view class="c-2">
AAA二手数码
</view>
<view class="c-3">
10分钟前来过
</view>
</view>
</view>
</view>
<view class="buy1">
<view class="buy2">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png"
alt="" />
</view>
<view class="buy3">
<view class="buy4">
给钱就出，二手电竞桌（电脑桌）快速发货…
</view>
<view class="buy5">
<view style="flex: 1;">￥33.6</view>
<view class="buy6">
立即购买
</view>
</view>
</view>
</view>
</view>
<!-- 背景头图（随页面滚动） -->
<view class="title">
<view class="hero-spark spark-a"></view>
<view class="hero-spark spark-b"></view>
<view class="hero-spark spark-c"></view>
</view>
<view class="content" :style="{'height':(windowHeight - 280) + 'px'}">
<view class="c-1" style="flex-flow: row-reverse;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
<view class="ct-1">
你好，我的奖品什么时候发货呀？
</view>
</view>
<view class="c-1" style="margin-left:10px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
<view class="ct-1" style="margin-left:10px;">
您好，您的奖品已经发货，请注意查收
</view>
</view>
<view class="c-1" style="flex-flow: row-reverse;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
<view class="ct-1">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/76670c20e8e444d388f2027794ed1178.png"
alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/76670c20e8e444d388f2027794ed1178.png"
alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/76670c20e8e444d388f2027794ed1178.png"
alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/76670c20e8e444d388f2027794ed1178.png"
alt="" />
</view>
</view>
<view style="margin-top: 20px;font-size: 11px;font-weight: 700;text-align: center;height: 30px;line-height: 30px;color: rgba(0, 45, 51, 0.5);">
3月30日 下午3:16
</view>
<view class="c-1" style="flex-flow: row-reverse;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
<view class="ct-1">
<uni-icons type="phone" size="12"></uni-icons>
通话时长 04:02
</view>
</view>
<view class="c-1" style="margin-left:10px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
<view class="ct-1" style="margin-left:10px;">
<uni-icons type="mic" size="12"></uni-icons>
20``
</view>
</view>
<view class="c-1" style="margin-left:10px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
<view class="ct-1" style="margin-left:10px;">
<uni-icons type="phone" size="12"></uni-icons>
忙线未接听
</view>
</view>
</view>
<view class="liao-bottom" :style="{'background':(isIcon||isPhoto)?'#fff':''}">
<view style="display: flex;">
<view class="liao1" @tap="isOpen('input')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/63a50caf793046db8f6a148dc8f6d158.png"
alt="" />
</view>
<view class="liao2" v-if="!isInput">
<input type="text" placeholder="请输入消息...">
</view>
<view class="liao2" v-else style="text-align: center;line-height: 38px;color: #777;">
长按发送语音消息
</view>
<view class="liao1" @tap="isOpen('icon')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f69a4fec720848158cba542e2bd25453.png"
alt="" />
</view>
<view class="liao1" @tap="isOpen('photo')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6167c3f6fb0e47688417cf8d75de3a36.png"
alt="" />
</view>
</view>
<view class="liao3" v-if="isIcon">
<view class="liao3tu" v-for="(item,index) in iconList" :key="index">
<img :src="item" alt="" />
</view>
<view style="width: 100%;height: 40px;"></view>
</view>
<view class="liao4" v-if="isPhoto">
<view class="liao5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/9b7289f1572c409691697a01c35253cd.png"
alt="" />
<view>相册</view>
</view>
<view class="liao5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/323d6cb335f64ed0873e26337cea1c02.png"
alt="" />
<view>拍摄</view>
</view>
<view class="liao5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/927e82199f8542f98287dd6c44979194.png"
alt="" />
<view>语音通话</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default {
data() {
return {
isIcon: false,
isPhoto: false,
isInput: false,
windowHeight: 0,
menuButtonInfo: {},
iconList: [
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/76670c20e8e444d388f2027794ed1178.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e8297cd515fd4c6f85cc8599e6df9c4f.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/7aa2dcaa230947cca202fe05fe343f3a.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/3252eed51bbc4dc5b6afcd1a1323ee92.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/69e54d7ea20a4eaeaf8e8e2701d1bd11.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5fc9da807f1643e08ae9a6a0246abe0f.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2a315a8fd67e4e64a0ee341944c602af.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2ead554b58bb49089f60ffd6b79856e6.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/ca9a0d17ad664c5ebe77b83174bf23f4.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b4d8eaac6f46caade8e470cd8dd1aa.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/1ab15345b6b64124b43404ce2278a4fe.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/230d135b45294d65a244f4b36f6754fb.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e77f0fcd5aa9427b8e5a0f67a672e7c5.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/778411200f6c443fada53cd167a75337.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8950d199c11a45c28f18ff6c21a37bf9.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b6d8f633a37f4f8fa149568f2175ea9d.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6be32b344f2a4dd493d6e59be737a34b.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ea75fe4997045818f659540ca8d62f6.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5ec0b6185b7348b29dd54bf364d0121a.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1c0a93e71f041eaa92eb049015ebedb.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/486e5c5281ed4b819f0f511c70263bb2.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/694cc1e1f2f043758de3dca2cd01914a.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/220e8d566f684819bfc8ba8a26fb95ac.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5343b3d275ef4bafa9a7dc7cd89d6ffd.png',
]
}
},
onLoad(option) {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const windowInfo = uni.getWindowInfo();
this.windowHeight = windowInfo.windowHeight;
},
methods: {
isOpen(type) {
if (type == 'photo') {
this.isPhoto = !this.isPhoto
} else if (type == 'icon') {
this.isIcon = !this.isIcon
} else {
this.isInput = !this.isInput
}
},
back() {
const pages = getCurrentPages();
if (pages.length > 1) {
uni.navigateBack();
} else {
uni.switchTab({
url: '/pages/index/index'
});
}
}
}
}
</script> </script>
<style> <style lang="scss">
page {
width: 100%;
height: 100%;
font-size: 24rpx;
background: #F5F8F5;
color: #00231C;
}
.page1 {
width: 100%;
height: 100%;
font-size: 24rpx;
position: relative;
}
.title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
width: 100%;
height: 400rpx;
background-size: 100%;
position: relative;
overflow: hidden;
}
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
align-items: center;
z-index: 100;
padding: 16rpx 24rpx;
box-sizing: border-box;
}
.radio-check {
background: linear-gradient(90deg, #e3ff96, #a6ffea);
width: 42rpx;
height: 42rpx;
border-radius: 42rpx;
text-align: center;
line-height: 42rpx;
margin: 0 18rpx 0 0;
box-shadow: 0 6rpx 16rpx rgba(49, 224, 183, 0.22);
}
.radio-no-check {
width: 42rpx;
height: 42rpx;
border-radius: 42rpx;
border: 2rpx solid #e8eeee;
margin: 0 18rpx 0 0;
background: #fff;
}
.pack-options {
display: flex;
align-items: center;
margin-top: 22rpx;
}
.pack-option {
display: flex;
align-items: center;
color: #00231C;
font-size: 28rpx;
font-weight: 800;
margin-right: 40rpx;
}
.title-search {
display: flex;
flex: 1;
height: 54rpx;
margin-left: 20rpx;
}
.content {}
.back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.title1 {
display: flex;
width: 100%;
height: 25px;
line-height: 25px;
}
.c-1 {
height: 38px;
display: flex;
line-height: 38px;
font-weight: 700;
margin: 20px 10px 0 0;
img {
width: 38px;
height: 38px;
background-size: 100%;
border-radius: 38px;
}
}
.c-2 {
margin: 0 8px;
font-size: 15px;
font-weight: 700;
}
.c-3 {
flex: 1;
color: rgba(0, 35, 28, 0.7);
}
.buy1 {
display: flex;
margin-top: 17px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.buy2 {
width: 84px;
height: 84px;
img {
width: 100%;
height: 100%;
background-size: 100%;
border-radius: 10px;
}
}
.buy3 {
flex: 1;
display: flex;
flex-direction: column;
}
.buy4 {
flex: 1;
font-size: 15px;
font-weight: 700;
padding: 5px 10px;
}
.buy5 {
height: 35px;
line-height: 37px;
font-size: 20px;
padding: 0 10px;
color: red;
font-weight: 700;
display: flex;
}
.liao-bottom {
min-height: 80px;
width: 100%;
position: fixed;
bottom: 0;
padding-top: 10px;
}
.liao1 {
width: 24px;
height: 24px;
margin: 7px;
img {
width: 100%;
height: 100%;
background-size: 100%;
border-radius: 24px;
}
}
.liao2 {
background: #fff;
flex: 1;
height: 38px;
border-radius: 38px;
input {
width: 100%;
height: 100%;
padding: 13px 10px;
}
}
.liao3 {
background: #fff;
display: flex;
flex-wrap: wrap;
}
.liao3tu {
width: 32px;
height: 32px;
margin: 15px 0 0 19px;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.liao4 {
display: flex;
height: 130px;
}
.liao5 {
background: #fff;
text-align: center;
flex: 1;
padding-top: 30px;
img {
width: 50px;
height: 50px;
background-size: 100%;
}
}
.buy6 {
text-align: center;
width: 90px;
height: 35px;
background: #00231c;
line-height: 35px;
border-radius: 35px;
margin: 0 5px;
color: #a6ffea;
font-size: 12px;
}
.ct-1{
min-width: 80px;
background: linear-gradient(90deg, rgba(121, 255, 223, 1), rgba(227, 255, 150, 1));
padding: 0 10px;
border-bottom-left-radius: 38px;
border-top-left-radius: 38px;
border-top-right-radius: 38px;
margin-right: 10px;
img{
width: 22px;
height: 22px;
margin-top: 8px;
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save