root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 1 month ago
parent
71f234a6ca
commit
5daf5cac2c
2 changed files with 586 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 202
      package5/legal/agreementDetail.vue
  2. 384
      package5/legal/qualification.vue

202
package5/legal/agreementDetail.vue
View File

@ -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>

384
package5/legal/qualification.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save