You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
12 KiB
480 lines
12 KiB
<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: 50rpx;height: 50rpx;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
|
|
alt="" style="width: 100%;height:100%;background-size: 100%;border-radius: 50rpx;">
|
|
</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:20rpx;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
|
|
<view class="ct-1" style="margin-left:20rpx;">
|
|
您好，您的奖品已经发货，请注意查收
|
|
</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: 40rpx;font-size: 22rpx;font-weight: 700;text-align: center;height: 60rpx;line-height: 60rpx;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:20rpx;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
|
|
<view class="ct-1" style="margin-left:20rpx;">
|
|
<uni-icons type="mic" size="12"></uni-icons>
|
|
20``
|
|
</view>
|
|
</view>
|
|
<view class="c-1" style="margin-left:20rpx;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png" alt="" />
|
|
<view class="ct-1" style="margin-left:20rpx;">
|
|
<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: 76rpx;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: 80rpx;"></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>
|
|
|
|
<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.isIcon = false
|
|
this.isPhoto = !this.isPhoto
|
|
} else if (type == 'icon') {
|
|
this.isPhoto = false
|
|
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>
|
|
|
|
<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: 50rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.c-1 {
|
|
height: 76rpx;
|
|
display: flex;
|
|
line-height: 76rpx;
|
|
font-weight: 700;
|
|
margin: 40rpx 20rpx 0 0;
|
|
|
|
img {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
background-size: 100%;
|
|
border-radius: 76rpx;
|
|
}
|
|
}
|
|
|
|
.c-2 {
|
|
margin: 0 16rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.c-3 {
|
|
flex: 1;
|
|
color: rgba(0, 35, 28, 0.7);
|
|
}
|
|
|
|
.buy1 {
|
|
display: flex;
|
|
margin-top: 34rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.buy2 {
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.buy3 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.buy4 {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.buy5 {
|
|
height: 70rpx;
|
|
line-height: 74rpx;
|
|
font-size: 40rpx;
|
|
padding: 0 20rpx;
|
|
color: red;
|
|
font-weight: 700;
|
|
display: flex;
|
|
}
|
|
|
|
.liao-bottom {
|
|
min-height: 160rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.liao1 {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin: 14rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
border-radius: 48rpx;
|
|
}
|
|
}
|
|
|
|
.liao2 {
|
|
background: #fff;
|
|
flex: 1;
|
|
height: 76rpx;
|
|
border-radius: 76rpx;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 26rpx 20rpx;
|
|
}
|
|
}
|
|
|
|
.liao3 {
|
|
background: #fff;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.liao3tu {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin: 30rpx 0 0 38rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.liao4 {
|
|
display: flex;
|
|
height: 260rpx;
|
|
}
|
|
|
|
.liao5 {
|
|
background: #fff;
|
|
text-align: center;
|
|
flex: 1;
|
|
padding-top: 60rpx;
|
|
|
|
img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.buy6 {
|
|
text-align: center;
|
|
width: 180rpx;
|
|
height: 70rpx;
|
|
background: #00231c;
|
|
line-height: 70rpx;
|
|
border-radius: 70rpx;
|
|
margin: 0 10rpx;
|
|
color: #a6ffea;
|
|
font-size: 26rpx;
|
|
}
|
|
.ct-1{
|
|
min-width: 160rpx;
|
|
background: linear-gradient(90deg, rgba(121, 255, 223, 1), rgba(227, 255, 150, 1));
|
|
padding: 0 20rpx;
|
|
border-bottom-left-radius: 76rpx;
|
|
border-top-left-radius: 76rpx;
|
|
border-top-right-radius: 76rpx;
|
|
margin-right: 20rpx;
|
|
img{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
</style>
|