wangfukang
1 month ago
2 changed files with 586 additions and 0 deletions
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<view class="detail-page"> |
|||
<view class="detail-bg"></view> |
|||
<view class="nav" :style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}"> |
|||
<view class="nav-back" @tap="goBack"> |
|||
<text class="nav-back-icon">‹</text> |
|||
</view> |
|||
<view class="nav-title">{{title || '协议详情'}}</view> |
|||
</view> |
|||
|
|||
<scroll-view scroll-y class="detail-scroll" :style="{paddingTop: (navHeight + 18) + 'px'}"> |
|||
<view class="content-card"> |
|||
<view class="detail-title">{{title || detail.title || '协议详情'}}</view> |
|||
<view v-if="loading" class="empty-text">正在加载内容...</view> |
|||
<rich-text v-else-if="detail.content" class="rich-content" :nodes="detail.content"></rich-text> |
|||
<view v-else class="empty-text">内容待完善</view> |
|||
</view> |
|||
<view class="bottom-space"></view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
statusBarHeight: 20, |
|||
navHeight: 64, |
|||
code: '', |
|||
title: '', |
|||
loading: false, |
|||
detail: {} |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
const sys = uni.getSystemInfoSync() |
|||
this.statusBarHeight = sys.statusBarHeight || 20 |
|||
this.initNavHeight() |
|||
this.code = options.code || '' |
|||
this.title = options.title ? decodeURIComponent(options.title) : '' |
|||
this.loadDetail() |
|||
}, |
|||
methods: { |
|||
initNavHeight() { |
|||
try { |
|||
const menu = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect() |
|||
if (menu && menu.top && menu.height) { |
|||
this.navHeight = menu.top + menu.height + 8 |
|||
return |
|||
} |
|||
} catch (e) {} |
|||
this.navHeight = this.statusBarHeight + 44 |
|||
}, |
|||
goBack() { |
|||
uni.navigateBack({ |
|||
fail: () => { |
|||
uni.navigateTo({ |
|||
url: '/package5/legal/qualification' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
loadDetail() { |
|||
if (!this.code) return |
|||
this.loading = true |
|||
this.tui.request('/app/agreementSetting/getByCode', 'GET', { |
|||
code: this.code |
|||
}, false, false, true).then((res) => { |
|||
if (res.code == 200 && res.result) { |
|||
this.detail = res.result || {} |
|||
if (this.detail.title) this.title = this.detail.title |
|||
} |
|||
}).catch(() => {}).finally(() => { |
|||
this.loading = false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #F8FCFA; |
|||
} |
|||
|
|||
.detail-page { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
color: #073D33; |
|||
background: |
|||
radial-gradient(circle at 8% 0%, rgba(52, 200, 160, .14) 0, rgba(52, 200, 160, 0) 320rpx), |
|||
radial-gradient(circle at 94% 28%, rgba(255, 166, 61, .12) 0, rgba(255, 166, 61, 0) 360rpx), |
|||
#F8FCFA; |
|||
} |
|||
|
|||
.detail-bg { |
|||
position: absolute; |
|||
top: -160rpx; |
|||
right: -120rpx; |
|||
width: 360rpx; |
|||
height: 360rpx; |
|||
border-radius: 50%; |
|||
background: rgba(166, 255, 234, .42); |
|||
filter: blur(10rpx); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.nav { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 10; |
|||
box-sizing: border-box; |
|||
background: rgba(248, 252, 250, .9); |
|||
backdrop-filter: blur(20rpx); |
|||
} |
|||
|
|||
.nav-back { |
|||
position: absolute; |
|||
left: 22rpx; |
|||
bottom: 11rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
border-radius: 50%; |
|||
background: rgba(255, 255, 255, .82); |
|||
box-shadow: 0 12rpx 34rpx rgba(7, 61, 51, .08); |
|||
} |
|||
|
|||
.nav-back-icon { |
|||
margin-top: -4rpx; |
|||
color: #073D33; |
|||
font-size: 54rpx; |
|||
line-height: 54rpx; |
|||
} |
|||
|
|||
.nav-title { |
|||
position: absolute; |
|||
left: 110rpx; |
|||
right: 110rpx; |
|||
bottom: 22rpx; |
|||
color: #073D33; |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.detail-scroll { |
|||
position: relative; |
|||
z-index: 1; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.content-card { |
|||
box-sizing: border-box; |
|||
min-height: 420rpx; |
|||
padding: 34rpx 30rpx; |
|||
border-radius: 34rpx; |
|||
background: rgba(255, 255, 255, .92); |
|||
box-shadow: 0 12rpx 40rpx rgba(30, 80, 60, .06); |
|||
} |
|||
|
|||
.detail-title { |
|||
margin-bottom: 28rpx; |
|||
color: #073D33; |
|||
font-size: 38rpx; |
|||
font-weight: 900; |
|||
line-height: 52rpx; |
|||
} |
|||
|
|||
.rich-content { |
|||
color: #202124; |
|||
font-size: 28rpx; |
|||
line-height: 1.8; |
|||
word-break: break-word; |
|||
} |
|||
|
|||
.empty-text { |
|||
padding: 120rpx 0; |
|||
color: rgba(7, 61, 51, .45); |
|||
font-size: 28rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.bottom-space { |
|||
height: 80rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,384 @@ |
|||
<template> |
|||
<view class="legal-page"> |
|||
<view class="legal-bg"></view> |
|||
<view class="nav" :style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}"> |
|||
<view class="nav-back" @tap="goBack"> |
|||
<text class="nav-back-icon">‹</text> |
|||
</view> |
|||
<view class="nav-title">平台资质及相关协议</view> |
|||
</view> |
|||
|
|||
<scroll-view scroll-y class="legal-scroll" :style="{paddingTop: (navHeight + 18) + 'px'}"> |
|||
<view class="hero-card"> |
|||
<view class="hero-kicker">QUALIFICATION & AGREEMENTS</view> |
|||
<view class="hero-title">平台资质及相关协议</view> |
|||
<view class="hero-desc">平台资质支持点击图片放大查看。</view> |
|||
</view> |
|||
|
|||
<view class="qualification-card"> |
|||
<view class="card-head"> |
|||
<view> |
|||
<view class="card-kicker">PLATFORM QUALIFICATION</view> |
|||
<view class="card-title">平台资质</view> |
|||
</view> |
|||
<view class="card-tip">点击预览</view> |
|||
</view> |
|||
<view class="qualification-list"> |
|||
<view class="qualification-image-wrap" v-for="(img, index) in qualificationImages" :key="index" |
|||
@tap="previewQualification(index)"> |
|||
<image class="qualification-image" :src="img" mode="widthFix"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="agreement-card"> |
|||
<view |
|||
class="agreement-item" |
|||
hover-class="agreement-active" |
|||
hover-stay-time="80" |
|||
v-for="(item, index) in agreements" |
|||
:key="index" |
|||
@tap="openAgreement(item)"> |
|||
<view class="agreement-left"> |
|||
<view class="agreement-icon">{{index + 1}}</view> |
|||
<text class="agreement-title">{{item.title}}</text> |
|||
</view> |
|||
<text class="agreement-arrow">›</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="bottom-space"></view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
statusBarHeight: 20, |
|||
navHeight: 64, |
|||
qualificationImages: [ |
|||
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/7872823032834bb083a36fd2e5fd6de2.jpg', |
|||
'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e41f000b6f5c4f928ca2cc6fe44b322b.jpg' |
|||
], |
|||
agreements: [ |
|||
{ code: 'USER_AGREEMENT', title: '用户协议' }, |
|||
{ code: 'PRIVACY_POLICY', title: '隐私政策' }, |
|||
{ code: 'STORE_CONSUME_SERVICE', title: '到店消费服务协议' }, |
|||
{ code: 'FOOD_SAFETY_MANAGEMENT', title: '餐饮安全管理办法' }, |
|||
{ code: 'CATERING_PROVIDER_REVIEW_REGISTRATION', title: '入网餐饮服务提供者审查登记规范' }, |
|||
{ code: 'FOOD_SAFETY_INCIDENT_DISPOSAL', title: '食品安全事故处置规范' }, |
|||
{ code: 'FOOD_SAFETY_COMPLAINT_REPORT', title: '食品安全投诉举报规范' }, |
|||
{ code: 'FOOD_SAFETY_VIOLATION_STOP_REPORT', title: '食品安全违法行为制止及报告规范' }, |
|||
{ code: 'PLATFORM_USER_REVIEW', title: '平台用户评价规范' }, |
|||
{ code: 'TAKEAWAY_MERCHANT_ENVIRONMENTAL_INITIATIVE', title: '外卖商家环保倡议书' }, |
|||
{ code: 'TAKEAWAY_USER_SERVICE_TERMS', title: '外卖用户服务条款' }, |
|||
{ code: 'SERIOUS_VIOLATION_SERVICE_STOP', title: '严重违法行为平台服务停止规范' }, |
|||
{ code: 'FOOD_SAFETY_AGREEMENT', title: '食品安全协议' } |
|||
] |
|||
} |
|||
}, |
|||
onLoad() { |
|||
const sys = uni.getSystemInfoSync() |
|||
this.statusBarHeight = sys.statusBarHeight || 20 |
|||
this.initNavHeight() |
|||
}, |
|||
methods: { |
|||
initNavHeight() { |
|||
try { |
|||
const menu = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect() |
|||
if (menu && menu.top && menu.height) { |
|||
this.navHeight = menu.top + menu.height + 8 |
|||
return |
|||
} |
|||
} catch (e) {} |
|||
this.navHeight = this.statusBarHeight + 44 |
|||
}, |
|||
goBack() { |
|||
uni.navigateBack({ |
|||
fail: () => { |
|||
uni.switchTab({ |
|||
url: '/pages/index/index' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
previewQualification(index) { |
|||
uni.previewImage({ |
|||
urls: this.qualificationImages, |
|||
current: this.qualificationImages[index] |
|||
}) |
|||
}, |
|||
openAgreement(item) { |
|||
uni.navigateTo({ |
|||
url: '/package5/legal/agreementDetail?code=' + item.code + '&title=' + encodeURIComponent(item.title) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #F8FCFA; |
|||
} |
|||
|
|||
.legal-page { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
color: #073D33; |
|||
background: |
|||
radial-gradient(circle at 8% 0%, rgba(52, 200, 160, .14) 0, rgba(52, 200, 160, 0) 320rpx), |
|||
radial-gradient(circle at 94% 28%, rgba(255, 166, 61, .12) 0, rgba(255, 166, 61, 0) 360rpx), |
|||
#F8FCFA; |
|||
} |
|||
|
|||
.legal-bg { |
|||
position: absolute; |
|||
top: -160rpx; |
|||
right: -120rpx; |
|||
width: 360rpx; |
|||
height: 360rpx; |
|||
border-radius: 50%; |
|||
background: rgba(166, 255, 234, .42); |
|||
filter: blur(10rpx); |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.nav { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 10; |
|||
box-sizing: border-box; |
|||
background: rgba(248, 252, 250, .9); |
|||
backdrop-filter: blur(20rpx); |
|||
} |
|||
|
|||
.nav-back { |
|||
position: absolute; |
|||
left: 22rpx; |
|||
bottom: 11rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 64rpx; |
|||
height: 64rpx; |
|||
border-radius: 50%; |
|||
background: rgba(255, 255, 255, .82); |
|||
box-shadow: 0 12rpx 34rpx rgba(7, 61, 51, .08); |
|||
} |
|||
|
|||
.nav-back-icon { |
|||
margin-top: -4rpx; |
|||
color: #073D33; |
|||
font-size: 54rpx; |
|||
line-height: 54rpx; |
|||
} |
|||
|
|||
.nav-title { |
|||
position: absolute; |
|||
left: 110rpx; |
|||
right: 110rpx; |
|||
bottom: 22rpx; |
|||
color: #073D33; |
|||
font-size: 32rpx; |
|||
font-weight: 900; |
|||
line-height: 44rpx; |
|||
text-align: center; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.legal-scroll { |
|||
position: relative; |
|||
z-index: 1; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 30rpx; |
|||
} |
|||
|
|||
.hero-card, |
|||
.qualification-card, |
|||
.agreement-card { |
|||
border-radius: 34rpx; |
|||
background: rgba(255, 255, 255, .9); |
|||
box-shadow: 0 12rpx 40rpx rgba(30, 80, 60, .06); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hero-card { |
|||
position: relative; |
|||
overflow: hidden; |
|||
padding: 34rpx 30rpx; |
|||
} |
|||
|
|||
.hero-card:after { |
|||
content: ''; |
|||
position: absolute; |
|||
right: -42rpx; |
|||
bottom: -60rpx; |
|||
width: 190rpx; |
|||
height: 190rpx; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, rgba(227, 255, 150, .76), rgba(166, 255, 234, .8)); |
|||
} |
|||
|
|||
.hero-kicker { |
|||
position: relative; |
|||
z-index: 1; |
|||
color: #34C8A0; |
|||
font-size: 20rpx; |
|||
font-weight: 900; |
|||
letter-spacing: 2rpx; |
|||
line-height: 30rpx; |
|||
} |
|||
|
|||
.hero-title { |
|||
position: relative; |
|||
z-index: 1; |
|||
margin-top: 10rpx; |
|||
color: #073D33; |
|||
font-size: 42rpx; |
|||
font-weight: 900; |
|||
line-height: 54rpx; |
|||
} |
|||
|
|||
.hero-desc { |
|||
position: relative; |
|||
z-index: 1; |
|||
width: 460rpx; |
|||
margin-top: 10rpx; |
|||
color: rgba(7, 61, 51, .52); |
|||
font-size: 24rpx; |
|||
line-height: 36rpx; |
|||
} |
|||
|
|||
.qualification-card { |
|||
margin-top: 24rpx; |
|||
padding: 28rpx 24rpx 30rpx; |
|||
} |
|||
|
|||
.card-head { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
margin-bottom: 22rpx; |
|||
} |
|||
|
|||
.card-kicker { |
|||
color: #34C8A0; |
|||
font-size: 20rpx; |
|||
font-weight: 900; |
|||
letter-spacing: 1rpx; |
|||
line-height: 28rpx; |
|||
} |
|||
|
|||
.card-title { |
|||
margin-top: 4rpx; |
|||
color: #073D33; |
|||
font-size: 34rpx; |
|||
font-weight: 900; |
|||
line-height: 44rpx; |
|||
} |
|||
|
|||
.card-tip { |
|||
height: 44rpx; |
|||
padding: 0 18rpx; |
|||
border-radius: 999rpx; |
|||
background: rgba(52, 200, 160, .12); |
|||
color: #34C8A0; |
|||
font-size: 22rpx; |
|||
font-weight: 900; |
|||
line-height: 44rpx; |
|||
} |
|||
|
|||
.qualification-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 22rpx; |
|||
} |
|||
|
|||
.qualification-image-wrap { |
|||
overflow: hidden; |
|||
border-radius: 24rpx; |
|||
background: #F8FCFA; |
|||
box-shadow: inset 0 0 0 1rpx rgba(7, 61, 51, .06); |
|||
} |
|||
|
|||
.qualification-image { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
.agreement-card { |
|||
margin-top: 24rpx; |
|||
padding: 10rpx 18rpx; |
|||
} |
|||
|
|||
.agreement-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
min-height: 92rpx; |
|||
padding: 0 8rpx; |
|||
border-bottom: 1rpx solid rgba(7, 61, 51, .06); |
|||
transition: transform .16s ease, opacity .16s ease; |
|||
} |
|||
|
|||
.agreement-item:last-child { |
|||
border-bottom: 0; |
|||
} |
|||
|
|||
.agreement-left { |
|||
display: flex; |
|||
align-items: center; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.agreement-icon { |
|||
flex-shrink: 0; |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
margin-right: 18rpx; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, #E3FF96, #A6FFEA); |
|||
color: #073D33; |
|||
font-size: 22rpx; |
|||
font-weight: 900; |
|||
line-height: 46rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.agreement-title { |
|||
color: #073D33; |
|||
font-size: 27rpx; |
|||
font-weight: 800; |
|||
line-height: 38rpx; |
|||
} |
|||
|
|||
.agreement-arrow { |
|||
flex-shrink: 0; |
|||
margin-left: 18rpx; |
|||
color: rgba(7, 61, 51, .32); |
|||
font-size: 40rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.agreement-active { |
|||
opacity: .88; |
|||
transform: scale(.985); |
|||
} |
|||
|
|||
.bottom-space { |
|||
height: 80rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue