123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272 |
- <template>
- <view>
- <view class="fllow_form">
- <view class="label key">{{i18n['是否解决问题']}}</view>
- <view class="form_right">
- <radio-group @change="radioChange" class="radiowarp">
- <view class="radiobox" v-for="(item, index) in type" :key="index">
- <radio :value="item.id" color="#0287FF" :checked="item.id === typeIndex" />
- <view>{{item.name}}</view>
- </view>
- </radio-group>
- </view>
- </view>
- <view class="fllow_form">
- <view class="label key">{{i18n['评分']}}</view>
- <view class="form_right">
- <uni-rate :value="comment_score" @change="onChange" />
- </view>
- </view>
- <view class="inp_warp" style="margin-top:0;">
- <view class="inp_title">{{i18n['附件']}}:</view>
- <view class="form_right" @click="uploadFiles">
- <view class="righttext">{{i18n['上传图片']}}</view>
- <view class="iconfont icon-arrows_right"></view>
- </view>
- </view>
- <view class="imglist" v-if="imgList.length != 0">
- <view class="imgbox" v-for="(item,index) in imgList" :key="index">
- <image src="/static/img/close.png" class="delimg" @click="delImg(index)" mode=""></image>
- <image :src="item.url" class="selfimg" mode=""></image>
- </view>
- </view>
- <view class="fllow_area">
- <view class="area_head key">{{i18n['情况描述']}}</view>
- <textarea v-model="comment_content" class="textself" :placeholder="i18n['情况描述']" placeholder-style="color:#999" />
- </view>
-
- <view class="button" @click="$noMultipleClicks(toSubEvaluate)">{{i18n['确定']}}</view>
- </view>
- </template>
- <script>
- import { BASE_URL, SIGN_NO } from '@/api/http.js'
- import { netAddEvaluate, uploadUrl } from '@/api/api.js'
-
- export default{
- data() {
- return{
- noClick:true, //防止 重复点击
- is_resolved:1, //1是 2否
- comment_score:1, //评分
- comment_content:'', //评价内容
- comment_files:'', //附件
- id:'',
- type:[],
- typeIndex:0,
- imgList:[],
- }
- },
- computed:{
- i18n() {
- return this.$t("evaluate")
- }
- },
- onShow() {
- this.type = this.i18n['type']
- uni.setNavigationBarTitle({
- title: this.i18n['去评价']
- })
- },
- onLoad(options) {
- this.id = options.id
- },
- methods:{
- //评分
- onChange(e) {
- console.log(e,'===')
- this.comment_score = e.value
- },
- radioChange(e) {
- console.log(e,'是否解决问题')
- this.is_resolved = e.detail.value
- },
- //上传图片
- uploadFiles() {
- uni.chooseImage({
- count: 9,
- success: (res) => {
- console.log(res)
- let file = res.tempFilePaths
- file.forEach(ele=>{
- this.toUpload(ele)
- })
- }
- })
- },
- toUpload(file) {
- uni.uploadFile({
- url:uploadUrl,
- name: 'file',
- header: {
- 'token': uni.getStorageSync('token'),
- 'sign-no': SIGN_NO
- },
- filePath: file,
- success: (res) => {
- let data = JSON.parse(res.data)
- if (data.code == 1) {
- this.imgList.push(data.data)
- } else {
- uni.showToast({
- title: '上传失败',
- icon: 'none'
- })
- }
- },
- fail: (err) => {
- console.log(err)
- }
- })
- },
- delImg(index) {
- this.imgList.splice(index, 1)
- },
- toSubEvaluate() {
- let arr = this.imgList
- let newArr = []
- arr.forEach(ele=>{
- newArr.push(ele.id)
- })
- let params = {
- id:this.id,
- is_resolved: this.is_resolved,
- comment_score: this.comment_score,
- comment_content: this.comment_content,
- comment_files: newArr.join(',')
- }
- netAddEvaluate(params).then(res=>{
- uni.showToast({
- title:res.msg,
- icon:'none'
- })
- setTimeout(()=>{
- uni.navigateBack({
- delta:1
- })
- },2000)
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .radiowarp{
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .radiobox{
- display: flex;
- justify-content: center;
- align-items: center;
- radio{
- transform: scale(0.7);
- }
- }
- }
- .fllow_form {
- display: flex;
- justify-content: space-between;
- background-color: #fff;
- border-bottom: 1rpx solid #EAEAEA;
- padding:24rpx 45rpx 24rpx 50rpx;
- .label{
- font-size:26rpx;
- text{
- color:red;
- }
- }
- }
- .form_right{
- display: flex;
- justify-content: flex-end;
- align-items: center;
- color: #999;
- min-width:450rpx;
- text-align: right;
- .righttext{
- font-size:26rpx;
- }
- }
- .fllow_area {
- background-color: #fff;
- padding:24rpx 45rpx 24rpx 50rpx;
- margin-bottom: 30rpx;
- .area_head {
- height: 100rpx;
- font-size:26rpx;
- line-height: 100rpx;
- }
- .textself {
- width:660rpx;
- height: 230rpx;
- background:rgba(202, 202, 202, 0.2);
- box-sizing: border-box;
- padding:24rpx;
- font-size:26rpx;
- margin: 0 auto;
- border-radius: 20rpx;
- }
- }
- .inp_warp {
- padding:24rpx 45rpx 24rpx 50rpx;
- background: #fff;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1rpx solid #f5f5f5;
- .inp_title {
- font-size: 26rpx;
- color: #000;
- }
- .add_in{
- display: flex;
- justify-content: flex-end;
- align-items: center;
- font-size:26rpx;
- color:#14C2C1;
- .icon-jiahaocu{
- font-size:28rpx;
- color:#14c2c1;
- margin-right:5rpx;
- }
- }
- }
- .imglist {
- padding: 24rpx 34rpx;
- background: #fff;
- border-bottom: 1rpx solid #EAEAEA;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: wrap;
-
- .imgbox {
- width: 160rpx;
- height: 160rpx;
- margin-right: 14rpx;
- position: relative;
- margin-bottom: 24rpx;
- border: 1rpx solid #EAEAEA;
- &:nth-child(4n){
- margin-right:0;
- }
- .delimg {
- width: 32rpx;
- height: 32rpx;
- border-radius: 50%;
- position: absolute;
- right: -16rpx;
- top: -16rpx;
- background: rgba(0, 0, 0, 0.5);
- z-index: 2;
- }
-
- .selfimg {
- width: 160rpx;
- height: 160rpx;
- }
- }
- }
- </style>
|