maziyang
4 weeks ago
7 changed files with 240 additions and 21 deletions
-
196components/FeedbackModal.vue
-
50pages/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