import Taro, { Component } from '@tarojs/taro'
import { View, Text, } from '@tarojs/components'
import { bindActionCreators } from 'redux'
import { connect } from '@tarojs/redux'
import Layout from 'layout'
import { } from './redux'
import 'assets/style/customer-ui.scss'
import style from './index.module.scss'
import { AtRate, AtImagePicker } from 'taro-ui'
import Evaluation from 'components/Evaluation'
import Toast from 'utils/toast'
import LINK from 'utils/link'
import api from 'config/api'
import rental from 'services/rental'
class ShortRentEvaluation extends Layout {
config = {
navigationBarTitleText: '订单评价'
}
state = {
starCfg: [
{ label: '手续办理', fieds: 'procedures_level', value: 0 },
{ label: '服务态度', fieds: 'service_quality_level', value: 0 },
{ label: '车辆整洁', fieds: 'clean_level', value: 0 },
{ label: '车辆状态', fieds: 'vehicle_condition_level', value: 0 },
],
files: []
}
sameDidMount() { }
async sameDidShow() {
if (!this.$router.params.id) { // url 中订单id检测
await Toast({
title: '参数错误',
icon: 'error',
duration: 1300,
})
Taro.redirectTo({ url: LINK.INDEX })
}
}
/**
- 点击星星
*/
starChange(fields, value) {
let starCfg = [...this.state.starCfg]
starCfg.forEach(item => {
if (item.label === fields) {
item.value = value
}
})
this.setState({ starCfg })
}
onChange(files) {
console.log(files);
console.log(files[0].url);
Taro.uploadFile({
url: api.uploadCommentsImages, //仅为示例,非真实的接口地址
filePath: files[0].url,
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
this.setState({
files
})
}
onFail(mes) {
console.log(mes)
}
onImageClick(index, file) {
console.log(index, file)
}
/**
- 提交
*/
confirm = async res => {
let data = {
description: res.msg,
}
this.state.starCfg.forEach(item => {
data[item.fieds] = item.value
})
await rental.comments(this.$router.params.id, data)
await Toast({
title: '感谢评价!',
duration: 1300
})
Taro.navigateTo({
url: LINK.HOME,
})
}
render() {
const { starCfg } = this.state
return <View className={`page-wrap`}>
<View className={style.tit}><Text>请对本次服务进行评价</Text></View>
{/* 星级 */}
<View className={style.stars}>
{
starCfg.map(item =>
<View className={style.starRow}>
<Text>{item.label}</Text><AtRate onChange={e => this.starChange(item.label, e)} value={item.value} margin={20} />
</View>
)
}
</View>
{/* 输入框和选择标签 */}
<Evaluation
tags={['车内整洁', '取还车便捷', '驾驶体验不错', '车内有异味', '服务体验不好',]}
onConfirm={this.confirm}
/>
<View className={style.AtImagePicker}>
<AtImagePicker
multiple
count={5}
files={this.state.files}
onChange={this.onChange.bind(this)}
onFail={this.onFail.bind(this)}
onImageClick={this.onImageClick.bind(this)}
/>
</View>
</View>
}
}
export default connect(
state => {
return {
// TODO...
}
},
dispatch => bindActionCreators(
{
// TODO...
},
dispatch,
),
)(ShortRentEvaluation)
//问题描述
我上传图片的时候想要下面的
但是现在我上传图片确实这样的,导致后台接收有问题