311 lines
9.8 KiB
Vue
311 lines
9.8 KiB
Vue
<template>
|
||
<view class="notification">
|
||
<view class="notification-block">
|
||
<view class="notification-title">
|
||
<view class="" style="display: flex;flex-direction: row;">
|
||
<image class="answer-img" src="/static/news/news.png" mode="widthFix" />官方客服回复
|
||
</view>
|
||
<view class="date" v-if="notificationInfo.detail"> {{notificationInfo.detail.created_at}}</view>
|
||
</view>
|
||
<view class="notification-radiobox">
|
||
<view class="answer show"> A : {{notificationInfo.content}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="notification-block">
|
||
<view class="notification-title">
|
||
我的意见与建议
|
||
<view class="date"> {{notificationInfo.created_at}}</view>
|
||
</view>
|
||
<view class="notification-radiobox">
|
||
<view class="notification-radiobox-item" :class="{'show': radioValue === '页面闪退'}">页面闪退</view>
|
||
<view class="notification-radiobox-item" :class="{'show': radioValue === '操作体验'}">操作体验</view>
|
||
<view class="notification-radiobox-item" :class="{'show': radioValue === '账号问题'}">账号问题</view>
|
||
<view class="notification-radiobox-item" :class="{'show': radioValue === '功能异常'}">功能异常</view>
|
||
<view class="notification-radiobox-item" :class="{'show': radioValue === '产品建议'}">产品建议</view>
|
||
<view class="notification-radiobox-item" :class="{'show': radioValue === '其他问题'}">其他问题</view>
|
||
</view>
|
||
</view>
|
||
<view class="notification-block" v-if="notificationImg.length>0">
|
||
<view class="notification-title">上传应用截图({{notificationImg.length}}/8)</view>
|
||
<view class="notification-sbutitle">上传出现问题的应用图片；</view>
|
||
<view class="notification-imgs">
|
||
<view class="notification-imgs-item" v-for="(item, index) in notificationImg" :key="index">
|
||
<image :src="item" mode="aspectFill" @click="prieve(index)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="notification-block" v-if="description.length>0">
|
||
<view class="notification-title"> 问题说明</view>
|
||
<view class="notification-sbutitle">请对您所遇到的问题进行尽可能详细的描述</view>
|
||
<view class="notification-textarea">
|
||
<textarea maxlength="200" v-model="description" :disabled="true" />
|
||
<view class="notification-textarea-size">{{description.length}}/200</view>
|
||
</view>
|
||
</view>
|
||
<view class="notification-block" v-if="mobile.length>0">
|
||
<view class="notification-title">联系方式</view>
|
||
<input class="notification-input" type="number" :disabled="true" v-model="mobile" maxlength="11"
|
||
placeholder="输入手机号码" />
|
||
</view>
|
||
<!-- 微信客服 -->
|
||
<u-modal :show="wechatCode" title="微信客服" confirmColor="#34CE98" :showCancelButton="true" cancelText="关闭"
|
||
confirmText="保存二维码" @cancel="wechatCode = false" @confirm="dowQrCode">
|
||
<slot>
|
||
<view class="wechat-content">
|
||
<image class="wechat-qrcode" :src="require('@/static/user/qrCode.png')" mode="widthFix"></image>
|
||
<view class="wechat-text">扫描企业微信二维码，添加微信客服</view>
|
||
</view>
|
||
</slot>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
notifications
|
||
} from '@/apis/interfaces/versions'
|
||
import {
|
||
detail
|
||
} from '@/apis/interfaces/news'
|
||
export default {
|
||
data() {
|
||
return {
|
||
radioValue: "页面闪退",
|
||
description: "",
|
||
mobile: "",
|
||
systemInfo: {},
|
||
notificationImg: [],
|
||
wechatCode: false,
|
||
notificationInfo: {}
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.getSystemInfo({
|
||
success: systemRes => {
|
||
this.systemInfo = {
|
||
brand: systemRes.brand,
|
||
models: systemRes.model,
|
||
pixel: systemRes.pixelRatio,
|
||
width: systemRes.windowWidth,
|
||
height: systemRes.windowHeight,
|
||
version: systemRes.system,
|
||
platform: systemRes.platform,
|
||
font_size: systemRes.fontSizeSetting,
|
||
client_id: systemRes.deviceId,
|
||
}
|
||
}
|
||
})
|
||
detail(this.$Route.query.id).then(res => {
|
||
this.notificationInfo = res;
|
||
this.radioValue = res.detail.type || ''
|
||
this.notificationImg = res.detail.pictures || []
|
||
this.description = res.detail.description || ''
|
||
this.mobile = res.detail.mobile || ''
|
||
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none',
|
||
mask: true,
|
||
})
|
||
})
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
this.wechatCode = true
|
||
},
|
||
methods: {
|
||
dowQrCode() {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: require('@/static/user/qrCode.png'),
|
||
success(res) {
|
||
uni.showToast({
|
||
title: '二维码已保存到系统相册',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
prieve(index) {
|
||
uni.previewImage({
|
||
urls: this.notificationImg,
|
||
current:index
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.notification-block {
|
||
padding: 30rpx;
|
||
border-top: solid 20rpx #F8F8F8;
|
||
}
|
||
|
||
.notification-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
.date{
|
||
color: grey;
|
||
font-size: 26rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.notification-title text {
|
||
color: #e6576b;
|
||
padding-left: 5rpx;
|
||
}
|
||
|
||
.notification-radiobox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 20rpx -10rpx 0;
|
||
}
|
||
|
||
.notification-radiobox-item {
|
||
position: relative;
|
||
width: calc(33.33% - 20rpx);
|
||
display: inline-block;
|
||
margin: 10rpx;
|
||
background: #F8F8F8;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.answer {
|
||
position: relative;
|
||
width: calc(100% - 20rpx);
|
||
display: inline-block;
|
||
margin: 10rpx;
|
||
background: rgba($color: #34ce98, $alpha: 0.1);
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
|
||
.notification-radiobox-item.show {
|
||
background: #34CE98;
|
||
color: white;
|
||
}
|
||
|
||
.notification-imgs {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
margin: 10rpx -10rpx 0;
|
||
}
|
||
|
||
.notification-imgs-item {
|
||
position: relative;
|
||
width: calc(25% - 20rpx);
|
||
padding-top: calc(25% - 20rpx);
|
||
margin: 20rpx 10rpx 0 10rpx;
|
||
}
|
||
|
||
.notification-imgs-item image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: solid 1rpx #f8f8f8;
|
||
}
|
||
|
||
.notification-sbutitle {
|
||
font-size: 28rpx;
|
||
padding-top: 10rpx;
|
||
color: gray;
|
||
}
|
||
|
||
.notification-textarea {
|
||
background: #F8F8F8;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.notification-textarea textarea {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.notification-textarea-size {
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
}
|
||
|
||
.notification-input {
|
||
background: #F8F8F8;
|
||
border-radius: 20rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
margin-top: 20rpx;
|
||
font-size: 32rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.btn button {
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: 45rpx;
|
||
background: #34CE98;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: white;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.btn button:after {
|
||
display: none;
|
||
}
|
||
|
||
/* 弹出层 */
|
||
.wechat-content {
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.wechat-qrcode {
|
||
width: 248rpx;
|
||
height: 248rpx;
|
||
}
|
||
|
||
.wechat-text {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
padding-top: 30rpx;
|
||
}
|
||
|
||
.answer-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
</style>
|