1054425342@qq.com
3 months ago
10 changed files with 1302 additions and 82 deletions
@ -0,0 +1,662 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<view class="title">我的</view> |
|||
|
|||
<view class="topBox" @click="gotoProfile"> |
|||
<view class="avatar-box flex-center"> |
|||
<image :src="showImg(userInfo.avatar)" mode="aspectFill" class="headImg" v-if="userInfo.avatar"></image> |
|||
<image src="https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png" mode="aspectFill" |
|||
class="headImg" v-else></image> |
|||
</view> |
|||
<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view> |
|||
<view class="username" v-else>请登录/注册 ></view> |
|||
<view class="personalCenter flex-center" v-if="userInfo.nickname"> |
|||
个人中心 |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="orderBox"> |
|||
<navigator :url="'/subPackages/order/trades'" class="moreBox flex-between"> |
|||
我的订单 |
|||
<span class="flex-between">查看更多 <img |
|||
src="https://static.ticket.sz-trip.com/cgc/images/user/rightIcon.png" alt=""></span> |
|||
</navigator> |
|||
|
|||
<view class="flex-around" style="margin-top: 20rpx;"> |
|||
<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goTrades(item)"> |
|||
<image :src="item.src" mode="heightFix"></image> |
|||
<view style="margin-top: 10rpx;">{{item.title}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 待付款轮播 --> |
|||
<!-- <swiper class="my-swipe" :autoplay="3000" indicator-color="white" v-if="dfkList && dfkList.length>0" circular> |
|||
<swiper-item v-for="(item,index) in dfkList" :key="item.id"> |
|||
<div class="dfkBox" @click="goToOrderDetail(item)"> |
|||
<image :src="showImg(item.order_child[0].specifications_image)" mode="aspectFill"></image> |
|||
<div class="contentBox"> |
|||
<div style="width:300rpx;"> |
|||
<div style="font-size: 27rpx;margin-bottom: 10rpx;">等待付款 </div> |
|||
<div style="display: flex;color: #8A8A8A;font-size: 27rpx;">剩余时间：<uni-countdown class="countdown" @timeup="timeup(index)" :show-day="false" :hour="differTimeList[index].slice(0,2)" :minute="differTimeList[index].slice(3,5)" :second="differTimeList[index].slice(6,8)"/></div> |
|||
</div> |
|||
<div class="orderBtn" @click.stop="setOrderId(item.order_id)">去支付</div> |
|||
</div> |
|||
</div> |
|||
</swiper-item> |
|||
</swiper> --> |
|||
</view> |
|||
|
|||
<view class="cygj"> |
|||
<view class="cyItem" style="font-weight: bold;font-size: 31rpx;color: #333333;"> |
|||
常用工具 |
|||
</view> |
|||
<view class="cyItem flex-between" v-for="(item,index) in cyList" :key="index" |
|||
@click="gotoUrl(item,index)" v-if="item.isShow"> |
|||
<view class="flex-center"> |
|||
<img :src="item.src" class="headIcon"> |
|||
{{item.title}} |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon-gray.png" class="rightIcon"> |
|||
</view> |
|||
<button id="contact" class="cyItem flex-between" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
|||
<view class="flex-center"> |
|||
<img src="https://static.ticket.sz-trip.com/cgc/images/user/kfdh.png" class="headIcon"> |
|||
在线客服 |
|||
</view> |
|||
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/rightIcon-gray.png" class="rightIcon"> |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 旅游咨询弹框 --> |
|||
<uni-popup ref="popup" type="center"> |
|||
<view class="consult-popup"> |
|||
即将拨打客服电话 |
|||
<view class="consult-subtitle">服务时间：周一至周五<br>9:00-12:00，13:00-18:00</view> |
|||
<view class="consult-btns"> |
|||
<view @click="$refs.popup.close()">取消</view> |
|||
<view @click="clickPhone('0515-69186109')">确定</view> |
|||
<!-- <view> |
|||
<button class="confirm" open-type="contact">确定</button> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<CustomTabBar :currentTab="4" /> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import moment from "moment"; |
|||
import CustomTabBar from '@/components/CustomTabBar.vue'; |
|||
import MusicControl from '@/components/MusicControl.vue'; |
|||
export default { |
|||
components: {CustomTabBar,MusicControl}, |
|||
data() { |
|||
return { |
|||
dfkList: [], |
|||
differTimeList: [], |
|||
nowDateTime: '', //当前时间秒数 |
|||
userInfo: {}, |
|||
orderList: [{ |
|||
src: 'https://static.ticket.sz-trip.com/epicSoul/image/user/dfk.png', |
|||
title: '待付款', |
|||
status: 'WAIT_PAYMENT' |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/epicSoul/image/user/dfh.png', |
|||
title: '待使用/发货', |
|||
status: 'PAYMENT_SUCCESSFULLY' |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/epicSoul/image/user/dsh.png', |
|||
title: '待收货', |
|||
status: 'POST' |
|||
}, |
|||
// { |
|||
// src: 'https://changshu.js-dyyj.com/uploads/20250326/3f13d3a10dd0f88e764e3ddf1157c108.png', |
|||
// title: '待评价', |
|||
// status: 'WAIT_COMMENT' |
|||
// }, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/epicSoul/image/user/sh.png', |
|||
title: '退款/售后', |
|||
status: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART' |
|||
}, |
|||
], |
|||
cyList: [ |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/cgc/images/user/gwc.png', |
|||
title: '购物车', |
|||
path: '/subPackages/user/gwc', |
|||
isShow: true |
|||
}, |
|||
// { |
|||
// src: 'https://static.ticket.sz-trip.com/cgc/images/user/kfdh.png', |
|||
// title: '客服电话', |
|||
// path: '', |
|||
// isShow: true |
|||
// }, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/cgc/images/user/shdz.png', |
|||
title: '收货地址', |
|||
path: '/subPackages/user/travelerList', |
|||
isShow: true |
|||
}, |
|||
{ |
|||
src: 'https://static.ticket.sz-trip.com/cgc/images/user/ysgl.png', |
|||
title: '隐私管理', |
|||
path: '/subPackages/user/privacy', |
|||
isShow: true |
|||
}, |
|||
// { |
|||
// src: 'https://changshu.js-dyyj.com/uploads/20250326/3e977f62b6cbfeec5a17d945b96b8c8c.png', |
|||
// title: '投诉建议', |
|||
// path: '/subPackages/service/service', |
|||
// isShow: true |
|||
// }, |
|||
], |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {} |
|||
console.log(this.userInfo) |
|||
// this.dfkList = [] |
|||
// this.nowDateTime = parseInt(new Date().getTime() / 1000) |
|||
// this.Post({}, "/api/user/userInfo").then((res) => { |
|||
// if (res.data) { |
|||
// this.userInfo = res.data; |
|||
// // this.getDfk() |
|||
|
|||
// // 是否展示商户核销 |
|||
// this.Post({},'/api/merchants/is_merchant').then(res => { |
|||
// this.cyList[6].isShow = res.data |
|||
// }) |
|||
// } |
|||
// }); |
|||
}, |
|||
methods: { |
|||
// 个人信息或登录 |
|||
gotoProfile() { |
|||
// 有token去个人信息，没有去登录 |
|||
if(this.userInfo.token) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/user/profile' |
|||
}) |
|||
}else { |
|||
uni.navigateTo({ |
|||
url: '/pages/login/login' |
|||
}) |
|||
} |
|||
}, |
|||
timeup(index) { |
|||
// return this.dfkList.splice(index,1) |
|||
}, |
|||
setOrderId(id) { |
|||
let that = this; |
|||
that.orderId = id; |
|||
that.Post({ |
|||
order_id: id, |
|||
type: "miniprogram", |
|||
platform: 'miniprogram' |
|||
}, |
|||
'/api/pay/unify' |
|||
).then(res => { |
|||
if (res.data) { |
|||
uni.requestPayment({ |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
paySign: res.data.paySign, |
|||
signType: res.data.signType, |
|||
timeStamp: res.data.timeStamp |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 待付款 |
|||
getDfk() { |
|||
this.differTimeList = [] |
|||
let params = { |
|||
offset: this.dfkList.length, |
|||
limit: 10, |
|||
status: 'WAIT_PAYMENT', |
|||
} |
|||
this.Post(params, '/api/order/orderList').then(res => { |
|||
this.isLoading = false |
|||
if (res) { |
|||
this.dfkList = [...this.dfkList, ...res.data] |
|||
this.dfkList.forEach(item => { |
|||
// 获取时间差,订单关闭时间-当前时间，若存在即展示倒计时differTimeList |
|||
let del; |
|||
if (moment(item.close_time).diff(moment()) > 0) { |
|||
del = moment.utc(moment(item.close_time).diff(moment())).format('HH:mm:ss') |
|||
} else { |
|||
del = '00:00:00' |
|||
} |
|||
this.differTimeList.push(del) |
|||
}) |
|||
console.log(this.differTimeList); |
|||
console.log('this.differTimeList：' + this.differTimeList[0].slice(0, 2)) |
|||
} |
|||
}) |
|||
}, |
|||
goToOrderDetail(item) { |
|||
uni.navigateTo({ |
|||
url: '/subPackages/order/detail?id=' + item.order_id |
|||
}); |
|||
}, |
|||
getChild(list) { |
|||
let arr = [] |
|||
for (let i = 0; i < list.length; i++) { |
|||
if (list[i].product_model == "ticket") { |
|||
console.log(list[i]); |
|||
arr.push(list[i]) |
|||
break |
|||
} |
|||
} |
|||
console.log(arr); |
|||
if (arr.length > 0) { |
|||
return arr[0] |
|||
} else { |
|||
return list[0] |
|||
} |
|||
|
|||
}, |
|||
goCoupon() { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/user/coupon", |
|||
}); |
|||
}, |
|||
goKeFu() { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/publicservices/ServiceOnline", |
|||
}); |
|||
}, |
|||
// open(){ |
|||
// this.$refs.popup.open('center') |
|||
// }, |
|||
gotoUrl(item, index) { |
|||
if (item.title == "客服电话") { |
|||
this.$refs.popup.open() |
|||
return; |
|||
} |
|||
uni.navigateTo({ |
|||
url: item.path |
|||
}) |
|||
}, |
|||
qidai() { |
|||
uni.showToast({ |
|||
title: '功能建设中...', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
goTrades(item) { |
|||
if (item) { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/order/trades?type=" + item.title, |
|||
}); |
|||
} else { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/order/trades", |
|||
}); |
|||
} |
|||
}, |
|||
//判断是否关注公众号 |
|||
isGz(item) { |
|||
this.$refs.pop.openPop( |
|||
'https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230517/db9eb60e0abfea8be1075b406fefe551.jpg'); |
|||
// this.Post({}, '/api/wechat/getSubcribeInfo').then(res => { |
|||
// if (res.data) { |
|||
// uni.navigateTo({ |
|||
// url:'/subPackages/webPage/webPage?url='+'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2NjQwNTYxNg==#wechat_redirect' |
|||
// }) |
|||
// } else { |
|||
// console.log(this.$refs.pop); |
|||
// } |
|||
// }); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
view{ |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
::v-deep .uni-countdown { |
|||
font-size: 20px !important; |
|||
|
|||
::v-deep .uni-countdown__splitor { |
|||
font-size: 20px !important; |
|||
} |
|||
} |
|||
|
|||
.bg { |
|||
min-height: 100vh; |
|||
overflow-x: hidden; |
|||
background: url('https://static.ticket.sz-trip.com/epicSoul/image/user/bg.png') no-repeat; |
|||
background-size: 100% auto; |
|||
background-color: #F7F7F7; |
|||
padding-bottom: 100rpx; |
|||
} |
|||
|
|||
.title { |
|||
font-weight: bold; |
|||
font-size: 36rpx; |
|||
color: #333333; |
|||
position: absolute; |
|||
top: 110rpx; |
|||
left: 50%; |
|||
transform: translate(-50%, 0); |
|||
} |
|||
|
|||
.topBox { |
|||
width: 750rpx; |
|||
height: 373rpx; |
|||
padding: 100rpx 0 0 26rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
margin-top: 90rpx; |
|||
|
|||
.avatar-box { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.headImg { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.username { |
|||
margin: 40rpx 0 0 28rpx; |
|||
font-weight: 500; |
|||
font-size: 40rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
.personalCenter { |
|||
width: 165rpx; |
|||
height: 59rpx; |
|||
background: rgba(24, 135, 145, 1); |
|||
border-radius: 29rpx 0rpx 0rpx 29rpx; |
|||
margin: 40rpx 0 0 auto; |
|||
font-weight: bold; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.orderBox { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(80, 80, 80, 0.12); |
|||
border-radius: 20rpx; |
|||
margin: -48rpx auto 0; |
|||
padding-bottom: 30.6rpx; |
|||
|
|||
.moreBox { |
|||
height: 84rpx; |
|||
margin: auto; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
padding-left: 26rpx; |
|||
|
|||
span { |
|||
padding-right: 18rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 12rpx; |
|||
height: 21rpx; |
|||
margin-left: 12rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.orderItem { |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
width: 25%; |
|||
text-align: center; |
|||
|
|||
image { |
|||
height: 60rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.lxwm { |
|||
width: 696rpx; |
|||
height: 447rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4rpx 12rpx 0px rgba(150, 149, 149, 0.3); |
|||
border-radius: 20rpx; |
|||
margin: auto; |
|||
padding: 27rpx 19rpx 0 19rpx; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
|
|||
.midBox { |
|||
padding: 26rpx 43rpx 21rpx 44rpx; |
|||
box-sizing: border-box; |
|||
|
|||
img { |
|||
width: 265rpx; |
|||
height: 252rpx; |
|||
border-radius: 15rpx; |
|||
} |
|||
} |
|||
|
|||
.botBox { |
|||
padding: 0 30rpx 0 51rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
.cygj { |
|||
width: 697rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin: 30rpx auto 0; |
|||
padding: 0 27rpx; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
box-sizing: border-box; |
|||
|
|||
.cyItem { |
|||
height: 106rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #D8D8D8; |
|||
|
|||
.headIcon { |
|||
width: 42rpx; |
|||
height: 42rpx; |
|||
margin-right: 15rpx; |
|||
} |
|||
|
|||
.rightIcon { |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.cyItem:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.my-swipe { |
|||
// width: 100%; |
|||
margin: 0 30rpx; |
|||
margin-top: 37.3rpx; |
|||
} |
|||
|
|||
swiper { |
|||
height: 111rpx !important; |
|||
} |
|||
|
|||
.dfkBox { |
|||
width: 100%; |
|||
height: 111rpx; |
|||
background: #F7F7F7; |
|||
margin: 0 auto 30.64rpx; |
|||
// padding: 0.25rem; |
|||
display: flex; |
|||
} |
|||
|
|||
.dfkBox image { |
|||
width: 137rpx; |
|||
height: 111rpx; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
// margin-right: 16.7rpx; |
|||
} |
|||
|
|||
.dfkBox .contentBox { |
|||
padding-left: 5rpx; |
|||
padding-right: 5rpx; |
|||
height: 111rpx; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
} |
|||
|
|||
// .van-count-down{ |
|||
// font-size: 0.39rem; |
|||
// font-family: PingFang SC; |
|||
// font-weight: 400; |
|||
// color: #FB6E4D; |
|||
// } |
|||
|
|||
.orderBtn { |
|||
width: 152rpx; |
|||
height: 56rpx; |
|||
background: linear-gradient(270deg, #FC5109, #FDC43A); |
|||
; |
|||
border-radius: 28rpx; |
|||
text-align: center; |
|||
line-height: 56rpx; |
|||
font-size: 27rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
// margin-left: 50rpx; |
|||
// margin-right: 20rpx; |
|||
} |
|||
|
|||
#contact { |
|||
-webkit-tap-highlight-color: transparent; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
border-radius: 0; |
|||
box-sizing: border-box; |
|||
color: transparent; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
position: relative; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
border: transparent 0px solid; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
button::after { |
|||
border: none; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.more { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: rgba(0, 0, 0, .5); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
image { |
|||
width: 646rpx; |
|||
height: 959rpx; |
|||
} |
|||
|
|||
img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
} |
|||
} |
|||
|
|||
.consult-popup { |
|||
width: 487rpx; |
|||
height: 367rpx; |
|||
background: #F0F0F0; |
|||
border-radius: 20rpx; |
|||
padding: 65rpx 0 23rpx; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
|
|||
.consult-subtitle { |
|||
font-weight: 500; |
|||
font-size: 27rpx; |
|||
color: #333333; |
|||
margin-top: 43rpx; |
|||
} |
|||
|
|||
.consult-btns { |
|||
display: flex; |
|||
margin-top: 75rpx; |
|||
|
|||
view { |
|||
width: 50%; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #00AEA0; |
|||
line-height: 54rpx; |
|||
} |
|||
view:first-child { |
|||
border-right: 1rpx solid #D8D8D8; |
|||
color: #000000; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.confirm{ |
|||
height: 58rpx; |
|||
line-height: 58rpx; |
|||
background: none; |
|||
font-weight: bold; |
|||
font-size: 32rpx; |
|||
color: #00AEA0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,25 @@ |
|||
|
|||
<template> |
|||
<view class="" style="font-size: 0;" @click="toList"> |
|||
<image class="bannerImg" mode="aspectFill" :src="showImg('/uploads/20250728/5625c6a60945a256da15ef983d6db87c.png')"> </image> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default{ |
|||
methods:{ |
|||
toList(){ |
|||
uni.navigateTo({ |
|||
url:'/subPackages/equityGoods/list' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bannerImg{ |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,341 @@ |
|||
<template> |
|||
<view class="equity-goods-page"> |
|||
<image style="width: 100%;" mode="widthFix" |
|||
:src="showImg('/uploads/20250728/748adc244fc7db313f569a6005344950.png')"></image> |
|||
<!-- 顶部标题区域 --> |
|||
<view class="header-section"> |
|||
<view class="title">扬州数字资产权益产品</view> |
|||
<view class="filter-buttons"> |
|||
<view class="filter-btn ">最新上架</view> |
|||
<view class="filter-btn">销量</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 商品网格 --> |
|||
<view class="products-grid"> |
|||
<view class="product-item" :style="{'border-width':(index==productList.length-1||index==productList.length-2)?0:'0.5rpx'}" v-for="(item, index) in productList" :key="index" @click="goToDetail(item)"> |
|||
<image class="product-image" :src="item.image" mode="aspectFill"></image> |
|||
<view class="product-info"> |
|||
<view class="product-title">{{ item.title }}</view> |
|||
<view class="product-price-box"> |
|||
<view class="product-price">{{ item.price }}</view> |
|||
<view class=""> |
|||
<image class="heart-icon" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png"> |
|||
</image> |
|||
<!-- <image |
|||
v-else |
|||
class="heart-icon" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png" |
|||
@click.stop="handleLikeClick(item, index)" |
|||
></image> --> |
|||
<image class="shop-icon" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/195bfc195a54b93c13595a01a5d8bb3b.png"> |
|||
</image> |
|||
<!-- <image |
|||
v-else |
|||
class="shop-icon" |
|||
src="https://epic.js-dyyj.com/uploads/20250728/77c4546ac6415f9db69bb10888d2a975.png" |
|||
@click.isShop="handleLikeClick(item, index)" |
|||
></image> --> |
|||
</view> |
|||
</view> |
|||
<view class="product-details"> |
|||
<text class="detail-item">{{ item.limitInfo }}</text> |
|||
<text class="detail-item">{{ item.paymentInfo }}</text> |
|||
<text class="detail-item">{{ item.viewInfo }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部地图区域 --> |
|||
<view class="map-section"> |
|||
<view class="map-title">业务办理 | 预约参观</view> |
|||
<view class="map-container"> |
|||
<map class="map-component" :latitude="mapData.latitude" :longitude="mapData.longitude" |
|||
:scale="mapData.scale"></map> |
|||
</view> |
|||
<view class="map-description"> |
|||
<view class="location-info"> |
|||
<image class="location-icon" |
|||
:src="showImg('/uploads/20250728/56804fe109efd614ba955d3110cd6750.png')" |
|||
mode="widthFix"></image> |
|||
<text class="location-name">国家文化大数据华东区域交易平台扬州运营中心</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'EquityGoodsList', |
|||
data() { |
|||
return { |
|||
productList: [{ |
|||
id: 1, |
|||
title: '食在扬州｜世界美食之都巡礼', |
|||
price: '699.00', |
|||
image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=800', |
|||
isLiked: false, |
|||
limitInfo: '限量发售 x 1000份', |
|||
paymentInfo: '100+付款', |
|||
viewInfo: '浏览10W' |
|||
}, |
|||
{ |
|||
id: 2, |
|||
title: '二十四桥｜诗意之城', |
|||
price: '588.00', |
|||
image: 'https://images.unsplash.com/photo-1578662996442-48f60103fc96?auto=format&fit=crop&w=800', |
|||
isLiked: true, |
|||
limitInfo: '限量发售 x 1000份', |
|||
paymentInfo: '100+付款', |
|||
viewInfo: '浏览10W' |
|||
}, |
|||
{ |
|||
id: 3, |
|||
title: '以手抄心｜书法体验', |
|||
price: '699.00', |
|||
image: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?auto=format&fit=crop&w=800', |
|||
isLiked: false, |
|||
limitInfo: '限量发售 x 1000份', |
|||
paymentInfo: '100+付款', |
|||
viewInfo: '浏览10W' |
|||
}, |
|||
{ |
|||
id: 4, |
|||
title: '世界花园｜诗学之旅', |
|||
price: '588.00', |
|||
image: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=800', |
|||
isLiked: false, |
|||
limitInfo: '限量发售 x 1000份', |
|||
paymentInfo: '100+付款', |
|||
viewInfo: '浏览10W' |
|||
} |
|||
], |
|||
heartIcon: 'https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png', |
|||
heartFilledIcon: 'https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png', |
|||
cartIcon: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=100', |
|||
mapData: { |
|||
latitude: 31.2989, |
|||
longitude: 120.5853, |
|||
scale: 17, |
|||
|
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
goToDetail(item) { |
|||
uni.navigateTo({ |
|||
url: `/subPackages/equityGoods/detail?id=${item.id}` |
|||
}) |
|||
}, |
|||
toggleLike(item, index) { |
|||
this.productList[index].isLiked = !this.productList[index].isLiked |
|||
uni.showToast({ |
|||
title: this.productList[index].isLiked ? '已收藏' : '取消收藏', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
addToCart(item) { |
|||
uni.showToast({ |
|||
title: '已加入购物车', |
|||
icon: 'success' |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
page { |
|||
background-color: #F5F5F5; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.equity-goods-page { |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
|
|||
.header-section { |
|||
padding: 60rpx 30rpx 30rpx; |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #000000; |
|||
text-align: center; |
|||
margin-bottom: 30rpx; |
|||
padding-bottom: 30rpx; |
|||
font-weight: 500; |
|||
border-bottom: 0.5rpx solid #999999; |
|||
} |
|||
|
|||
.filter-buttons { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
gap: 40rpx; |
|||
|
|||
.filter-btn { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
border-radius: 20rpx; |
|||
transition: all 0.3s; |
|||
|
|||
&.active { |
|||
background: #007aff; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.products-grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
gap: 20rpx; |
|||
padding: 30rpx; |
|||
|
|||
.product-item { |
|||
overflow: hidden; |
|||
border-bottom: 0.5rpx solid #999999; |
|||
margin-bottom: 15rpx; |
|||
padding-bottom: 20rpx; |
|||
&:active { |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
.product-image { |
|||
width: 100%; |
|||
height: 429rpx; |
|||
object-fit: cover; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.product-info { |
|||
padding: 20rpx 0; |
|||
|
|||
.product-title { |
|||
font-size: 22rpx; |
|||
color: #000000; |
|||
margin-bottom: 16rpx; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-price { |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
} |
|||
|
|||
|
|||
.product-details { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.detail-item { |
|||
font-size: 16rpx; |
|||
color: #808080; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.map-section { |
|||
border-top: 0.5rpx solid #999999; |
|||
margin: 30rpx 30rpx 0; |
|||
overflow: hidden; |
|||
|
|||
.map-title { |
|||
padding: 30rpx; |
|||
font-size: 22rpx; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
text-align: center; |
|||
} |
|||
|
|||
.map-container { |
|||
position: relative; |
|||
height: 330rpx; |
|||
border: 6rpx solid white; |
|||
border-radius: 20rpx; |
|||
transform: translateY(0); |
|||
overflow: hidden; |
|||
.map-component { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.map-description { |
|||
padding: 30rpx; |
|||
|
|||
.location-info { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 16rpx; |
|||
|
|||
.location-icon { |
|||
width: 40rpx; |
|||
|
|||
} |
|||
|
|||
.location-name { |
|||
font-size: 22rpx; |
|||
color: #808080; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.heart-icon { |
|||
width: 35rpx; |
|||
height: 30rpx; |
|||
transition: all 0.3s ease; |
|||
flex-shrink: 0; |
|||
top: -2rpx; |
|||
position: relative; |
|||
margin-right: 6rpx; |
|||
|
|||
&.liked { |
|||
opacity: 1; |
|||
filter: hue-rotate(320deg) saturate(2); |
|||
} |
|||
|
|||
&:active { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
.shop-icon { |
|||
width: 39rpx; |
|||
height: 36rpx; |
|||
transition: all 0.3s ease; |
|||
flex-shrink: 0; |
|||
margin-left: 10rpx; |
|||
|
|||
&.liked { |
|||
opacity: 1; |
|||
filter: hue-rotate(320deg) saturate(2); |
|||
} |
|||
|
|||
&:active { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
|
|||
.product-price-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue