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.
384 lines
8.5 KiB
384 lines
8.5 KiB
<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>
|
|
|