root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
642 Commits
1 Branch
0 Tags
14 MiB
 
 
 
 
 
Tree: fe208e346c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fe208e346c'
${ noResults }
school_uni/package2/IdleTrad/detail.vue

695 lines
14 KiB
Raw Blame History

<template>
<view class="page1">
<!-- 固定顶部导航栏（悬浮在背景图之上） -->
<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-search">
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
<input type="text" placeholder="搜索" />
</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">
<view class="title1">
<view class="c-1">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
alt="">
</view>
<view class="c-2">
AAA二手数码
</view>
<view class="c-3">
10分钟前来过
</view>
<view class="c-4">
关注
</view>
</view>
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
:duration="duration">
<swiper-item v-for="(item,index) in adList" :key="index">
<img class="hero-bg-img" :src="item" alt="" />
</swiper-item>
</swiper>
<view class="c-5">
给钱就出，二手电竞桌（电脑桌）快速发货，标价就是实价#桌类 #办公桌 #电竞电脑装备都是全新的，包邮！！！
</view>
<view class="p-1">
<view class="p-2">
评论 <text>（14）</text>
<view class="line"></view>
</view>
<view class="p-3">
<view class="left">
<view class="p-4">
<view class="p-5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
alt="" />
</view>
<view class="p-6">
魔法理发师
</view>
<view class="p-7">
4天前.广东
</view>
</view>
<view class="p-8">
活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
</view>
</view>
<view class="right">
<view class="p-9">
<uni-icons type="heart" size="15"></uni-icons>
<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
</view>
<view class="p-10">
20
</view>
</view>
</view>
<view class="p-3">
<view class="left">
<view class="p-4">
<view class="p-5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
alt="" />
</view>
<view class="p-6">
魔法理发师
</view>
<view class="p-7">
4天前.广东
</view>
</view>
<view class="p-8">
活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
</view>
</view>
<view class="right">
<view class="p-9">
<uni-icons type="heart" size="15"></uni-icons>
<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
</view>
<view class="p-10">
20
</view>
</view>
</view>
<view class="p-3">
<view class="left">
<view class="p-4">
<view class="p-5">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png"
alt="" />
</view>
<view class="p-6">
魔法理发师
</view>
<view class="p-7">
4天前.广东
</view>
</view>
<view class="p-8">
活动有效时间到2025年5月25日哦，感兴趣的朋友快来参与吧～
</view>
</view>
<view class="right">
<view class="p-9">
<uni-icons type="heart" size="15"></uni-icons>
<!-- <uni-icons type="heart-filled" color="red" size="12"></uni-icons> -->
</view>
<view class="p-10">
20
</view>
</view>
</view>
<view class="b-1"></view>
</view>
</view>
<view class="bottom-box">
<view class="b-2">
<view class="b-3">
<uni-icons type="chat" size="25"></uni-icons>
<!-- <uni-icons type="chat-filled" color="red"></uni-icons> -->
</view>
<view>
留言
</view>
</view>
<view class="b-2">
<view class="b-3">
<uni-icons type="star" size="25"></uni-icons>
<!-- <uni-icons type="star-filled" color="red"></uni-icons> -->
</view>
<view>
20
</view>
</view>
<view class="b-3">
<view class="b-4" @tap="$refs.buyPopup.open('bottom')" style="color: rgba(166, 255, 234, 1);">
立即购买
</view>
<view class="b-4" @tap="goChat" style="background: linear-gradient(90deg, #e3ff96, #a6ffea);">
<uni-icons type="chatboxes"></uni-icons>聊一聊
</view>
</view>
</view>
<uni-popup ref="buyPopup" background-color="#fff">
<view class="buy-content">
<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">
￥33.6
</view>
</view>
</view>
<view class="buy6">
<view class="buy7">
颜色
</view>
<view class="buy8">
<view class="buy9">
白色
</view>
<view class="buy9">
白色
</view>
<view class="buy9">
白色
</view>
<view class="buy9">
白色
</view>
<view class="buy9">
白色
</view>
</view>
</view>
<view class="buy6">
<view class="buy7">
大小
</view>
<view class="buy8">
<view class="buy9">
XL码
</view>
<view class="buy9">
XL码
</view>
<view class="buy9">
XL码
</view>
<view class="buy9">
XL码
</view>
<view class="buy9">
XL码
</view>
</view>
</view>
<view class="box1" style="display: flex;padding: 40rpx;">
<view style="flex: 1;">
<view style="height: 42rpx;line-height: 42rpx;display: flex;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ea48a4ac01ae420082138b8c5f5b9560.png"
alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
<text style="font-size: 30rpx;font-weight: 700;">西校区1号宿舍楼610</text>
</view>
<view style="margin-left: 60rpx;color: #777;">
刘六六 18827382918
</view>
</view>
<view style="width: 36rpx;padding-top: 20rpx;">
<uni-icons type="right"></uni-icons>
</view>
</view>
<view class="box1" style="display: flex;padding: 40rpx;">
<view style="flex: 1;">
<view style="height: 42rpx;line-height: 42rpx;display: flex;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c8e0cc311db4d38ab43e019673c4b8c.png"
alt="" style="width: 42rpx;height: 42rpx;margin-right: 20rpx;" />
<text style="font-size: 30rpx;font-weight: 700;">微信支付</text>
</view>
<view style="text-align: right;margin-left: 60rpx;color: #777;width: 146rpx;">
使用微信支付
</view>
</view>
<view style="width: 36rpx;padding-top: 20rpx;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/02bff7edc4e04caaa1868955ff684f1f.png"
alt="" style="width: 36rpx;height: 36rpx;" />
</view>
</view>
<view class="popup-bottom-box">
<view class="buy10">
确认购买 ￥35.33
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
adList: ['https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png',
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/62c9aa038b2541ad9c400a76ddae7ef8.png'
],
interval: 4000,
duration: 1000,
indicatorDots: true,
menuButtonInfo: {},
}
},
onLoad(option) {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
},
onPullDownRefresh() {
this.menuList = [{
categoryName: '推荐',
id: 'tuijian',
checked: true
}]
this.productItem = []
this.getCategory(this.shopItem.id);
this.getProduct('');
},
// onPageScroll(e) {
// this.lastScrollTop = e.scrollTop;
// // 节流：80ms 内不重复检测，避免频繁的 selectorQuery
// const now = Date.now();
// if (now - this._lastDetectTs < 80) return;
// this._lastDetectTs = now;
// this.detectCurrentCategory();
// },
methods: {
goChat(){
uni.navigateTo({
url:'/package2/IdleTrad/chat'
})
},
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: 340rpx;
background-size: 100%;
position: relative;
overflow: hidden;
}
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
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;
background: rgba(255, 255, 255, 0.9);
height: 54rpx;
margin-left: 20rpx;
border-radius: 54rpx;
input {
height: 54rpx;
line-height: 54rpx;
}
}
.content {
margin-top: -140rpx;
}
.back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.swiper {
width: 100%;
height: 750rpx;
margin-top: 20rpx;
}
.swiper img {
width: 100%;
height: 100%;
}
.title1 {
display: flex;
width: 100%;
padding: 0 24rpx;
height: 80rpx;
line-height: 80rpx;
}
.c-1 {
width: 68rpx;
height: 68rpx;
margin-top: 5rpx;
}
.c-1 img {
width: 100%;
height: 100%;
background-size: 100%;
border-radius: 68rpx;
}
.c-2 {
margin: 0 16rpx;
font-size: 30rpx;
font-weight: 700;
}
.c-3 {
flex: 1;
color: rgba(0, 35, 28, 0.7);
}
.c-4 {
width: 100rpx;
height: 60rpx;
background: rgba(0, 35, 28, 1);
color: rgba(166, 255, 234, 1);
text-align: center;
line-height: 60rpx;
border-radius: 20rpx;
margin-top: 5rpx;
}
.c-5 {
height: auto;
font-size: 30rpx;
font-weight: 700;
border-bottom: 14rpx solid #eee;
padding: 20rpx;
background: #fff;
}
.p-1 {
background: #fff;
}
.p-2 {
font-size: 40rpx;
font-weight: 700;
height: 80rpx;
line-height: 80rpx;
padding: 0 20rpx;
}
.line {
width: 140rpx;
height: 20rpx;
background: linear-gradient(135deg, rgba(2, 251, 221, 1) 0%, rgba(166, 255, 234, 0) 100%);
margin-top: -32rpx;
}
.p-3 {
display: flex;
padding: 20rpx 0;
}
.p-4 {
display: flex;
height: 50rpx;
color: rgba(0, 35, 28, 0.6);
padding: 0 20rpx;
}
.p-5 {
width: 48rpx;
height: 48rpx;
}
.p-5 img {
width: 100%;
height: 100%;
background-size: 100%;
border-radius: 48rpx;
}
.p-6 {
margin-left: 20rpx;
font-weight: 700;
}
.p-7 {
margin-left: 20rpx;
}
.p-8 {
width: 75%;
margin-left: 86rpx;
font-size: 28rpx;
}
.p-9 {}
.p-10 {
color: rgba(191, 200, 198, 1);
}
.left {
flex: 1;
}
.right {
width: 70rpx;
text-align: center;
}
.b-1 {
width: 100%;
height: 200rpx;
}
.bottom-box {
position: fixed;
bottom: 0;
background: #fff;
width: 100%;
height: 160rpx;
display: flex;
padding: 20rpx;
border-top: 1px solid #eee;
}
.b-2 {
width: 50rpx;
height: 80rpx;
margin-right: 60rpx;
text-align: center;
}
.b-3 {
flex: 1;
display: flex;
}
.b-4 {
flex: 1;
text-align: center;
width: 180rpx;
height: 70rpx;
background: rgba(0, 35, 28, 1);
line-height: 70rpx;
border-radius: 70rpx;
margin: 0 10rpx;
}
.buy-content {
height: 1000rpx;
width: 100%;
padding: 20rpx;
}
.vue-ref {
border-top-left-radius: 20rpx !important;
border-top-right-radius: 20rpx !important;
}
.buy1 {
display: flex;
}
.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: 60rpx;
line-height: 60rpx;
font-size: 40rpx;
padding: 0 20rpx;
color: red;
font-weight: 700;
}
.box1 {
width: 99%;
margin: 0 auto 22rpx;
background: #f5f5f5;
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 32rpx;
padding: 24rpx;
box-sizing: border-box;
overflow: hidden;
}
.buy6{
display: flex;
flex-wrap: wrap;
margin-bottom: 20rpx;
}
.buy7{
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
font-weight: 700;
}
.buy8{
display: flex;
flex-wrap: wrap;
}
.buy9{
background: #eee;
padding: 10rpx 20rpx;
border-radius: 10rpx;
opacity: 0.6;
margin-right: 20rpx;
}
.popup-bottom-box{
background: #fff;
position: fixed;
height: 160rpx;
width: 94%;
}
.buy10{
width: 100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
margin: 20rpx auto 0;
background: linear-gradient(45deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 100rpx;
font-size: 32rpx;
font-weight: 700;
}
</style>