maziyang
4 weeks ago
7 changed files with 240 additions and 21 deletions
-
196components/FeedbackModal.vue
-
38pages/customerServicePlatform/csPlatformIndex.vue
-
15pages/customerServicePlatform/historyRecord.vue
-
BINstatic/customer-service-platform/a1.png
-
BINstatic/customer-service-platform/a2.jpg
-
BINstatic/customer-service-platform/fail-icon.png
-
BINstatic/customer-service-platform/success-icon.png
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<view> |
|||
<view v-if="internalVisible" class="fm-overlay"></view> |
|||
|
|||
<view v-if="internalVisible" class="fm-wrap"> |
|||
<view class="fm-card" :style="{ width: _width }"> |
|||
<text class="fm-title">{{ _title }}</text> |
|||
|
|||
<view class="fm-icon-wrap"> |
|||
<image :src="imgSrcComputed" mode="aspectFit" class="fm-icon-img" /> |
|||
</view> |
|||
|
|||
<text class="fm-sub">{{ _subtitle }}</text> |
|||
|
|||
<view class="fm-btn-wrap"> |
|||
<button class="fm-btn" @click="onConfirm">{{ _buttonText }}</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'FeedbackModal', |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '提交成功' |
|||
}, |
|||
subtitle: { |
|||
type: String, |
|||
default: '— 感谢您的反馈 —' |
|||
}, |
|||
buttonText: { |
|||
type: String, |
|||
default: '确定' |
|||
}, |
|||
status: { |
|||
type: String, |
|||
default: 'success' |
|||
}, |
|||
lockScroll: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '600rpx' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
internalVisible: false, |
|||
_title: this.title, |
|||
_subtitle: this.subtitle, |
|||
_buttonText: this.buttonText, |
|||
_status: this.status, |
|||
_width: this.width, |
|||
}; |
|||
}, |
|||
computed: { |
|||
imgSrcComputed() { |
|||
return this._status === 'fail' ? |
|||
'/static/customer-service-platform/fail-icon.png' : |
|||
'/static/customer-service-platform/success-icon.png'; |
|||
} |
|||
}, |
|||
methods: { |
|||
show(options = {}) { |
|||
if (options.title) this._title = options.title; |
|||
if (options.subtitle) this._subtitle = options.subtitle; |
|||
if (options.buttonText) this._buttonText = options.buttonText; |
|||
if (options.status) this._status = options.status; |
|||
if (options.width) this._width = options.width; |
|||
if (this.lockScroll) this._lockScroll(); |
|||
|
|||
this.internalVisible = true; |
|||
}, |
|||
|
|||
hide() { |
|||
this.internalVisible = false; |
|||
if (this.lockScroll) this._unlockScroll(); |
|||
}, |
|||
|
|||
onConfirm() { |
|||
this.hide(); |
|||
this.$nextTick(() => { |
|||
this.$emit('confirm', { |
|||
status: this._status |
|||
}); |
|||
}); |
|||
}, |
|||
//整个页面的滚动条被禁用，防止用户无法上下滚动页面 |
|||
_lockScroll() { |
|||
try { |
|||
document.body.style.overflow = 'hidden'; |
|||
} catch (e) {} |
|||
}, |
|||
_unlockScroll() { |
|||
try { |
|||
document.body.style.overflow = ''; |
|||
} catch (e) {} |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.lockScroll) this._unlockScroll(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.fm-overlay { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.35); |
|||
z-index: 999; |
|||
} |
|||
|
|||
.fm-wrap { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1000; |
|||
padding: 40rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.fm-card { |
|||
background: #fff; |
|||
border-radius: 24rpx; |
|||
padding: 40rpx; |
|||
box-sizing: border-box; |
|||
text-align: center; |
|||
box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.12); |
|||
} |
|||
|
|||
.fm-title { |
|||
display: block; |
|||
font-size: 48rpx; |
|||
font-weight: 700; |
|||
color: #333333; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.fm-icon-wrap { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin: 0 auto 40rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.fm-icon-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.fm-sub { |
|||
display: block; |
|||
color: #666666; |
|||
font-size: 32rpx; |
|||
margin-bottom: 40rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.fm-btn-wrap { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.fm-btn { |
|||
width: 220rpx; |
|||
height: 60rpx; |
|||
border-radius: 32rpx; |
|||
background: #000; |
|||
color: #ffffff; |
|||
font-weight: 700; |
|||
font-size: 32rpx; |
|||
font-style: normal; |
|||
border: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
</style> |
|||
|
Before Width: 1920 | Height: 1040 | Size: 521 KiB |
|
Before Width: 522 | Height: 928 | Size: 166 KiB |
|
After Width: 100 | Height: 100 | Size: 4.2 KiB |
|
After Width: 100 | Height: 100 | Size: 4.2 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue