vue+cube 評價/意見反饋頁面
2020.3.31
1 星星
<!--星星 -->
<div class="star-wrapper"
style="margin-top: 40px">
<span class="star">機艙環境</span>
<cube-rate v-model="value1"></cube-rate>
</div>
<div class="star-wrapper">
<span class="star">服務態度</span>
<cube-rate v-model="value2"></cube-rate>
</div>
<div class="star-wrapper">
<span class="star">整體印象</span>
<cube-rate v-model="value4"></cube-rate>
</div>
data () {
return {
value1: 0, // 環境
value2: 0, // 態度
value4: 0 // 印象
}
},
<style lang="stylus" scoped type="text/css">
>>> .cube-rate {
max-width: 60%;
}
.star {
color: #95a9bf;
display: inline-flex;
margin-right: 10px;
}
.star-wrapper {
font-size: 12px;
width: 180px;
margin-top: 0px;
margin-left: 30px;
margin-right: 30px;
font-weight: 200;
padding: 3px 0;
text-align: left;
line-height: 20px;
.cube-rate-item {
width: 25px;
height: auto;
background-size: 50%;
background-color: grey;
.cube-rate-item.active, .rate-item {
background-color: orange;
}
}
}
</style>
星星變顏色
就這幾行css就讓星星變顏色了，太神奇了叭，
<style type="text/css">
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
/*background: url("..");*/
background-repeat: no-repeat;
background-position: 50%;
background-image: url("../assets/images/system/start_unacive.png");
}
</style>
2 意見反饋與上傳圖片
改造，這裡限制最多九張圖
<template>
<div class="opinion-content">
<Nav></Nav>
<div class="info">
<!--建議 -->
<div class="suggest">
<cube-textarea indicator="indicator"
v-model="value3"
placeholder="請輸入您的意見或建議"
style="border: none"></cube-textarea>
<div class="selectPic">
<!-- <input multiple
type="file"
ref="file"
id="uploadFile"> -->
<!-- multiple:是否支援多選
max:最多上傳幾張
list:編輯反顯使用 -->
<updatefile v-on:fileChange="fileChange"
:multiple="true"
:list="imgList"
ref="upload"
v-model='upload'></updatefile>
</div>
</div>
<br>
</div>
</div>
</template>
<script>
import registryToast from '../components/common/toast/index'
import Nav from '../components/common/Nav.vue'
import uploadImages from '../components/opinion/uploadImages'
export default {
components: {
updatefile: uploadImages,
Nav: Nav
},
data () {
return {
value1: 0, // 環境
value2: 0, // 態度
value4: 0, // 印象
value3: '', // 意見
indicator: {
negative: true,
remain: true
},
imgList: [],
upload: []
}
},
created: function () {
},
methods: {
fileChange (data) {
this.imgdata = data
},
back2: function () {
if (this.value3.length > 1 || this.imgdata.length > 0 || this.phone.length > 0) {
if (confirm('是否確認退出？')) {
this.$router.go(-1) // 返回上一層
}
} else {
this.$router.go(-1) // 返回上一層
}
}
}
}
</script>
<style type="text/css">
/* 星星 */
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
/*background: url("..");*/
background-repeat: no-repeat;
background-position: 50%;
background-image: url("../assets/images/system/start_unacive.png");
}
/* 意見不加邊框 */
/* 輸入框固定 */
textarea::-webkit-input-placeholder {
color: #cad5e2;
font-weight: 200;
}
.cube-textarea-wrapper {
height: 75px;
}
div.cube-textarea-wrapper:after {
border: none;
}
textarea:-moz-placeholder {
color: #cad5e2;
font-weight: 200;
}
textarea:-ms-input-placeholder {
color: #cad5e2;
font-weight: 200;
}
/* 上傳圖片的X號邊框 */
i.iconfont.icon-chahao.upload_warp_img_div_del {
border: none;
}
.opinion-content {
/* background-color: rgba(247, 249, 252, 1); */
}
</style>
<style lang="stylus" scoped>
/* 星星 */
>>> .cube-rate {
max-width: 60%;
}
.star {
color: #95a9bf;
display: inline-flex;
margin-right: 10px;
}
.star-wrapper {
font-size: 12px;
width: 180px;
margin-top: 0px;
margin-left: 30px;
margin-right: 30px;
font-weight: 200;
padding: 3px 0;
text-align: left;
line-height: 20px;
.cube-rate-item {
width: 25px;
height: auto;
background-size: 50%;
background-color: grey;
.cube-rate-item.active, .rate-item {
background-color: orange;
}
}
}
// 意見
.info {
margin: 0 30px;
margin-bottom: 0px;
}
.selectPic {
width: 100%;
}
.suggest {
margin: 8px 0px;
border: 1px solid #95a9bf;
border-radius: 5px;
}
</style>
uploadImages.vue
這裡遺留了一個小bug就是，右上角的小叉號顯示不出來
3 匿名
<!-- 匿名 -->
<div style="width:200px;font-size:13px;">
<!--<cube-checkbox v-model="checked" style="color:#95a9bf;">匿名評價</cube-checkbox>
-->
<div class="box box-active"
@click="selCheck()"
v-if="checked">
匿名評價
</div>
<div class="box"
@click="selCheck()"
v-if="!checked">
匿名評價
</div>
<input type="checkbox"
style="display: none;"
:checked="checked" />
</div>
data() {
return {
checked: true
}
}
methods: {
selCheck () {
if (!this.checked) {
this.checked = true
} else {
this.checked = false
}
},
}
/* 匿名評價 */
.box {
height: 30px;
width: 200px;
line-height: 30px;
padding-left: 24px;
}
.box-active {
background: url("../assets/images/system/check_box.png") no-repeat;
background-size: 15px 15px;
background-position: left center;
}
.box-unactive {
background: url("../assets/images/system/check_box.png") no-repeat;
background-size: 15px 15px;
background-position: left center;
}
原始碼：
//opinion.vue
<template>
<div class="opinion-content">
<Nav></Nav>
<!--星星 -->
<div class="star-wrapper"
style="margin-top: 40px">
<span class="star">機艙環境</span>
<cube-rate v-model="value1"></cube-rate>
</div>
<div class="star-wrapper">
<span class="star">服務態度</span>
<cube-rate v-model="value2"></cube-rate>
</div>
<div class="star-wrapper">
<span class="star">整體印象</span>
<cube-rate v-model="value4"></cube-rate>
</div>
<div class="info">
<!--建議 -->
<div class="suggest">
<cube-textarea indicator="indicator"
v-model="value3"
placeholder="請輸入您的意見或建議"
style="border: none"></cube-textarea>
<div class="selectPic">
<!-- <input multiple
type="file"
ref="file"
id="uploadFile"> -->
<!-- multiple:是否支援多選
max:最多上傳幾張
list:編輯反顯使用 -->
<updatefile v-on:fileChange="fileChange"
:multiple="true"
:list="imgList"
ref="upload"
v-model='upload'></updatefile>
</div>
</div>
<!-- 匿名 -->
<div style="width:200px;font-size:13px;">
<!--<cube-checkbox v-model="checked" style="color:#95a9bf;">匿名評價</cube-checkbox>
-->
<div class="box box-active"
@click="selCheck()"
v-if="checked">
匿名評價
</div>
<div class="box"
@click="selCheck()"
v-if="!checked">
匿名評價
</div>
<input type="checkbox"
style="display: none;"
:checked="checked" />
</div>
<!-- 手機 -->
<cube-input ref="cubeinput"
v-model="phone"
placeholder="請輸入您的手機號"></cube-input>
<br>
<!--<p v-if="errors.length">
<ul>
<li class="error"
v-for="error in errors"
:key="error">{{ error }}
</li>
</ul>
</p>-->
</div>
<div class="opinion-footer">
<cube-button type="submit"
style=" background: linear-gradient(180deg,#349ffd,#027eea);"
@click="submitBtn">提 交
</cube-button>
</div>
</div>
</template>
<script>
import registryToast from '../components/common/toast/index'
import Nav from '../components/common/Nav.vue'
import uploadImages from '../components/opinion/uploadImages'
export default {
components: {
updatefile: uploadImages,
Nav: Nav
},
data () {
return {
value1: 0, // 環境
value2: 0, // 態度
value4: 0, // 印象
value3: '', // 意見
indicator: {
negative: true,
remain: true
},
imgList: [],
upload: [],
checked: true,
phone: '',
imgdata: '',
flightDetail: [],
orderNum: 0
}
},
methods: {
fileChange (data) {
this.imgdata = data
},
back2: function () {
if (this.value3.length > 1 || this.imgdata.length > 0 || this.phone.length > 0) {
if (confirm('是否確認退出？')) {
this.$router.go(-1) // 返回上一層
}
} else {
this.$router.go(-1) // 返回上一層
}
},
selCheck () {
if (!this.checked) {
this.checked = true
} else {
this.checked = false
}
},
submitBtn (e) {
this.errors = []
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/ // 驗證是不是以13,15,18,17開頭的數字
if (this.value1 === 0) {
this.errors.push('請對機艙環境作出評價！')
} else if (this.value2 === 0) {
this.errors.push('請對服務態度作出評價！')
} else if (this.value4 === 0) {
this.errors.push('請對整體印象作出評價！')
} else if (this.upload === '') {
this.errors.push('請選擇至少一張圖片！')
} else if (this.phone === '') {
this.errors.push('請輸入手機號！')
} else if (this.phone.length !== 11) {
this.errors.push('請輸入11位的手機號碼！')
} else if (!myreg.test(this.phone)) {
this.errors.push('請輸入有效的手機號碼！')
} else {
e.preventDefault()
this.postData()
// this.$router.push('/main')
// console.log('submit', e)
}
this.$refs.cubeinput.style = 'solid 1px red'
if (this.errors.length > 0) {
registryToast.showToast(this.errors[0])
}
},
postData () {
var newcheck = 1
if (this.checked === true) {
newcheck = 1 // 1是不匿名
} else {
newcheck = 2 // 2匿名
}
const teldata = new FormData()
teldata.append('environment', this.value1) // 環境
teldata.append('service', this.value2) // 服務態度
teldata.append('detail', this.value3) // 詳情描述
teldata.append('comprehensive', this.value4) // 整體印象
teldata.append('anonymous', newcheck) // 是否匿名
teldata.append('mobile', this.phone) // 手機號
for (let i = 0; i < this.imgdata.length; i++) {
teldata.append('inputFile', this.imgdata[i].file)
}
const that = this
var userInfo = localStorage.getItem('userInfo')
this.userInfo = JSON.parse(userInfo)
const instans = this.axios.create({
withCredentials: true,
headers: {
'Content-Type': 'multipart/form-data',
token: this.userInfo.token
}
})
const toast = this.$createToast({
txt: '正在提交請稍後',
mask: true
})
toast.show()
instans.post('/api/feedback/submit', teldata).then(
function (res) {
toast.hide()
// console.log(res)
if (res.data.status === 200) {
registryToast.showToast('提交成功')
that.$router.push('/main')
} else {
registryToast.showToast('提交失敗，請重試!')
}
},
function (error) {
toast.hide()
console.log('請求出錯', error)
}
)
}
}
}
</script>
<style type="text/css">
/* 星星 */
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
/*background: url("..");*/
background-repeat: no-repeat;
background-position: 50%;
background-image: url("../assets/images/system/start_unacive.png");
}
/* 意見不加邊框 */
/* 輸入框固定 */
textarea::-webkit-input-placeholder {
color: #cad5e2;
font-weight: 200;
}
.cube-textarea-wrapper {
height: 75px;
}
div.cube-textarea-wrapper:after {
border: none;
}
textarea:-moz-placeholder {
color: #cad5e2;
font-weight: 200;
}
textarea:-ms-input-placeholder {
color: #cad5e2;
font-weight: 200;
}
/* 上傳圖片的X號邊框 */
i.iconfont.icon-chahao.upload_warp_img_div_del {
border: none;
}
/* 匿名評價 */
.box {
height: 30px;
width: 200px;
line-height: 30px;
padding-left: 24px;
}
.box-active {
background: url("../assets/images/system/check_box.png") no-repeat;
background-size: 15px 15px;
background-position: left center;
}
.box-unactive {
background: url("../assets/images/system/check_box.png") no-repeat;
background-size: 15px 15px;
background-position: left center;
}
input {
border: 1px solid #c3c3c3;
}
/*
.cube-input-field {
width: 50%;
}
.cube-input-field.error {
border: solid 1px red;
}
.cube-input {
width: 200px;
background: rgba(247, 249, 252, 1);
}
.opinion-footer {
position: relative;
bottom: 10px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.opinion-footer .cube-btn {
width: 90%;
}
.cube-scroll-nav-panel {
margin: 10px auto;
}
.cube-upload-def .cube-upload-btn, .cube-upload-def .cube-upload-file {
padding: 10px;
}
*/
.opinion-content {
/* background-color: rgba(247, 249, 252, 1); */
}
</style>
<style lang="stylus" scoped>
/* 星星 */
>>> .cube-rate {
max-width: 60%;
}
.star {
color: #95a9bf;
display: inline-flex;
margin-right: 10px;
}
.star-wrapper {
font-size: 12px;
width: 180px;
margin-top: 0px;
margin-left: 30px;
margin-right: 30px;
font-weight: 200;
padding: 3px 0;
text-align: left;
line-height: 20px;
.cube-rate-item {
width: 25px;
height: auto;
background-size: 50%;
background-color: grey;
.cube-rate-item.active, .rate-item {
background-color: orange;
}
}
}
// 意見
.info {
margin: 0 30px;
margin-bottom: 0px;
}
.selectPic {
width: 100%;
}
.suggest {
margin: 8px 0px;
border: 1px solid #95a9bf;
border-radius: 5px;
}
</style>
//uponloadImages.vue
<template>
<div class="hello">
<div class="upload">
<input @change="fileChange($event)"
type="file"
id="upload_file"
multiple
accept="image/*"
style="display: none"
ref="file">
<div class="upload_warp_img"
v-show="imgList.length!=0">
<div class="upload_warp_img_div"
v-for="(item,index) in imgList"
:key="index">
<div class="upload_warp_img_div_top">
<div class="upload_warp_img_div_text">{{item.file.name}}</div>
<i class="iconfont icon-chahao upload_warp_img_div_del"
@click="fileDel(index)"></i>
</div>
<img :src="item.file.src">
</div>
</div>
<div class="upload_warp">
<div class="upload_warp_left"
@click="fileClick">
<div class="img"></div>
</div>
</div>
<!-- <div class="upload_warp_text">選中{{imgList.length}}個檔案，共{{bytesToSize(this.size)}}</div> -->
</div>
<!-- <div
v-for="(item,index) in imgList"
style="text-align: left"
v-bind:key="index"
>{{index}}：{{item.file.name}}</div>-->
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
imgList: [],
formData: new FormData(), // 上傳用列表
size: 0,
limit: 9
}
},
methods: {
// 設定
fileClick () {
document.getElementById('upload_file').click()
},
fileChange (el) {
// console.log(el) // input整個標籤
if (!el.target.files[0].size) return
this.fileList(el.target)
el.target.value = ''
/* 通過FormData物件可以組裝一組用 XMLHttpRequest傳送請求的鍵/值對。
它可以更靈活方便的傳送表單資料，因為可以獨立於表單使用。如果你把表單
的編碼型別設定為multipart/form-data ，則通過FormData傳輸的資料格式
和表單通過submit() 方法傳輸的資料格式相同 */
// 你可以自己建立一個FormData物件，然後通過呼叫它的append()方法新增欄位，就像這樣：
/*
let formData = new FormData()
formData.append('thumb', this.imgList)
console.log(formData, 'wsd')
*/
// 向父元件傳遞引數，事件為fileChange，引數為formData物件
this.$emit('fileChange', this.imgList)
},
fileList (fileList) {
const files = fileList.files
// console.log(files)
for (let i = 0; i < files.length; i++) {
// 判斷是否為資料夾
// eslint-disable-next-line eqeqeq
if (files[i].type != '') {
this.fileAdd(files[i])
} else {
// 資料夾處理
this.folders(fileList.items[i])
}
}
},
// 資料夾處理
folders (files) {
const _this = this
// 判斷是否為原生file
if (files.kind) {
files = files.webkitGetAsEntry()
}
files.createReader().readEntries(function (file) {
for (let i = 0; i < file.length; i++) {
if (file[i].isFile) {
_this.foldersAdd(file[i])
} else {
_this.folders(file[i])
}
}
})
},
foldersAdd (entry) {
const _this = this
entry.file(function (file) {
_this.fileAdd(file)
})
},
fileAdd (file) {
if (this.limit !== undefined) this.limit--
if (this.limit !== undefined && this.limit < 0) return
// 總大小
this.size = this.size + file.size
// 判斷是否為圖片檔案
// eslint-disable-next-line eqeqeq
if (file.type.indexOf('image') == -1) {
file.src = 'wenjian.png'
this.imgList.push({
file
})
} else {
const reader = new FileReader()
const image = new Image()
const _this = this
reader.readAsDataURL(file)
reader.onload = function () {
file.src = this.result
image.onload = function () {
const width = image.width
const height = image.height
file.width = width
file.height = height
_this.imgList.push({
file
})
// console.log(_this.imgList)
}
image.src = file.src
}
}
},
fileDel (index) {
this.size = this.size - this.imgList[index].file.size // 總大小
this.imgList.splice(index, 1)
if (this.limit !== undefined) this.limit = 9 - this.imgList.length
},
bytesToSize (bytes) {
if (bytes === 0) return '0 B'
const k = 1000 // or 1024
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}
}
}
</script>
<style scoped>
.upload_warp_img_div_del {
position: absolute;
top: -2px;
width: 16px;
right: 4px;
}
.upload_warp_img_div_top {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.4);
line-height: 30px;
text-align: left;
color: #fff;
font-size: 12px;
text-indent: 4px;
}
.upload_warp_img_div_text {
white-space: nowrap;
font-size: 12px;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
}
.upload_warp_img_div img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
vertical-align: middle;
}
/* 上傳的圖片展示 */
.upload_warp_img_div {
position: relative;
height: 70px;
width: 28%;
/*border: 1px solid #ccc;*/
margin: 10px 5px;
float: left;
line-height: 100px;
display: table-cell;
text-align: center;
background-color: rgb(236, 228, 228);
cursor: pointer;
}
.upload_warp_img {
/*border-top: 1px solid #d2d2d2;*/
padding: 10px;
overflow: hidden;
}
.upload_warp_text {
text-align: left;
margin-bottom: 10px;
padding-top: 10px;
text-indent: 14px;
border-top: 1px solid #ccc;
font-size: 14px;
}
.upload_warp_left .img {
margin: 1px;
width: 60px;
height: 60px;
background: url("./upload.png") no-repeat center center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.upload_warp_left {
float: left;
/* width: 80px;
height: 100px; */
/*border: 1px dashed #999;*/
border-radius: 4px;
cursor: pointer;
}
.upload_warp {
padding: 7px 14px;
height: 65px;
}
.upload {
/* border: 1px solid #ccc; */
background-color: #fff;
width: 100%;
/* box-shadow: 0px 1px 0px #ccc; */
border-radius: 4px;
}
.hello {
width: 100%;
}
</style>
2019年03月27日
<template>
<div>
<Nav></Nav>
<!-- model 就是整個表單需要的資料來源，schema 就是生成表單所定義的模式，immediate-validate 如果為 true 則初始時立即做校驗，options 則是配置選項。submit 校驗成功後提交事件，validate 每次有資料校驗更新的事件，reset 則是重置事件。 -->
<cube-form
:model="model"
:schema="schema"
:immediate-validate="false"
:options="options"
@validate="validateHandler"
@submit="submitHandler"
@reset="resetHandler"
></cube-form>
<!-- <div class="star-wrapper">
<span>機艙環境</span>
<cube-rate v-model="value">
<cube-rate-item v-for="n in max" :key="n" :value="value1" :index="n">
<div class="rate-item"></div>
</cube-rate-item>
</cube-rate>
</div>
<div class="star-wrapper">
<span>服務態度</span>
<cube-rate v-model="value2"></cube-rate>
</div>
<div class="info">
<div style=" margin:30px 5px 20px; border:1px solid #999;">
<cube-textarea indicator="indicator" placeholder="請輸入您的意見或建議"></cube-textarea>
div
<cube-upload
ref="upload"
:action="action"
:simultaneous-uploads="1"
:process-file="processFile"
@file-submitted="fileSubmitted"
/>
</div>
<cube-radio-group v-model="selected" :options="options"/>
<cube-input v-model="text" placeholder="請輸入您的手機號"></cube-input>
<br>
<cube-button type="submit" @click="submitBtn">提 交</cube-button>
</div>-->
</div>
</template>
<script>
import Nav from '../components/common/Nav.vue'
export default {
components: {
Nav
},
data() {
return {
value: '',
value1: '',
value2: '',
selected: '',
options: ['匿名評價'],
action: {
target: '//jsonplaceholder.typicode.com/photos/',
prop: 'base64Value'
},
validity: {},
valid: undefined,
model: {
checkboxValue: false,
checkboxGroupValue: [],
inputValue: '',
radioValue: '',
rateValue: 0,
selectValue: 2018,
switchValue: true,
textareaValue: '',
uploadValue: []
},
schema: {
groups: [
{
legend: '',
fields: [
{
type: 'rate',
modelKey: 'rateValue',
label: '機艙環境',
rules: {
required: true
}
},
{
type: 'rate',
modelKey: 'rateValue2',
label: '服務態度',
rules: {
required: true
}
}
]
},
{
legend: '',
fields: [
{
type: 'textarea',
modelKey: 'textareaValue',
label: '意見或建議',
rules: {
required: true
},
// debounce validate
// if set to true, the default debounce time will be 200(ms)
debounce: 100
},
{
type: 'upload',
modelKey: 'uploadValue',
label: '上傳圖片',
events: {
'file-removed': (...args) => {
console.log('file removed', args)
}
},
rules: {
required: true,
uploaded: (val, config) => {
return Promise.all(
val.map((file, i) => {
return new Promise((resolve, reject) => {
if (file.uploadedUrl) {
return resolve()
}
// fake request
setTimeout(() => {
if (i % 2) {
reject(new Error())
} else {
file.uploadedUrl = 'uploaded/url'
resolve()
}
}, 1000)
})
})
).then(() => {
return true
})
}
},
messages: {
uploaded: '上傳失敗'
}
},
{
type: 'checkbox',
modelKey: 'checkboxValue',
props: {
option: {
label: '匿名',
value: true
}
},
rules: {
required: false
},
messages: {
required: 'Please check this field'
}
},
{
type: 'input',
modelKey: 'inputValue',
label: '手機號',
props: {
placeholder: '請輸入您的聯絡方式'
},
rules: {
required: true
},
// validating when blur
trigger: 'blur'
}
]
},
{
fields: [
{
type: 'submit',
label: '提交'
},
{
type: 'reset',
label: '重置'
}
]
}
]
},
options: {
// [x:string]: 1;
scrollToInvalidField: true,
layout: 'standard' // classic fresh
}
}
},
methods: {
submitHandler(e) {
let teldata = new FormData()
teldata.append('mobile', this.loginForm.tel) // 手機號
teldata.append('environment', this.loginForm.tel) // 環境
teldata.append('service', this.loginForm.tel) // 服務態度
teldata.append('detail', this.loginForm.tel) // 詳情描述
teldata.append('IsAnonymous', this.loginForm.tel) // 是否匿名
teldata.append('inputFile', this.loginForm.tel) // 上傳圖片 不是必須
this.axios.post('/api/sms/send', teldata)
.then(function (res) {
console.log(res)
if (res.data.status === 200) {
} else {
console.log('請求失敗')
}
}, function (error) {
console.log('請求出錯', error)
})
this.$router.push('/main')
e.preventDefault()
console.log('submit', e)
},
validateHandler(result) {
this.validity = result.validity
this.valid = result.valid
console.log(
'validity',
result.validity,
result.valid,
result.dirty,
result.firstInvalidFieldIndex
)
},
resetHandler(e) {
console.log('reset', e)
}
}
}
</script>
<style lang="stylus" scoped>
.star-wrapper {
margin-top: 10px;
margin-left: 20px;
padding: 2px 0;
text-align: left;
line-height: 40px;
.rate-item {
width: 50%;
height: 50%;
background-size: 50%;
background-color: grey;
.cube-rate-item.active, .rate-item {
background-color: orange;
}
}
}
.info {
margin: 0 20px;
}
</style>
相關文章
- [BUG反饋]非管理員不能訪問模型頁面模型
- ITPUB部落格新版本上線啦，意見反饋收集！
- 用友盟或阿里百川接入問題意見反饋模組阿里
- [BUG反饋]SocialComment擴充套件問題：在文章頁面不顯示評論外掛套件
- [BUG反饋]模型管理中刪除模型後頁面不重新整理模型
- [BUG反饋]文件頁面聯合查詢時有個錯誤，求解決？
- Android解除安裝程式之後跳轉到指定的反饋頁面Android
- 關於《自然語言處理入門》的反饋意見，作者何晗說明如下自然語言處理
- [BUG反饋]onethink站這個頁面在firefox下顯示問題Firefox
- 評價頁筆記筆記
- 醫療AI商業化前夕，企業已經準備就緒？不妨看看醫生反饋意見AI
- 反饋工具BIC
- [BUG反饋]模板裡面沒有documentDetailBefore鉤子AI
- [BUG反饋]外掛管理新增外掛名叫"echo"就頁面錯誤！請稍後再試
- 常見頁面佈局
- [BUG反饋]public function group() 方法缺少網頁標題賦值Function網頁賦值
- 防止頁面被iframe惡意巢狀巢狀
- [BUG反饋]Markdown不解析
- [BUG反饋]文件模型bug模型
- [BUG反饋]安裝bug？
- Material-UI 使用反饋UI
- web app 觸控反饋WebAPP
- [BUG反饋]onethink\ThinkPHP\Library\OT\Database.class.php 問題反饋PHPDatabase
- [BUG反饋]OneThink1.0開發手冊書寫錯誤反饋
- 如何理解TRIZ的反饋原理？
- 基數反饋（Cardinality Feedback）
- Cardinality Feedback基數反饋
- CSS3實現的頁面反轉效果CSSS3
- 比特幣的常見批評與反駁 - casebitcoin比特幣
- AI 模型常見的評價指標彙總AI模型指標
- 如何挖掘網民意見？評價物件抽取綜述物件
- easy-mock寫的一個簡單的模擬二頁的反饋Mock
- 百度網頁搜尋投訴反饋的使用方法介紹網頁
- [BUG反饋]分類授權漏洞
- [BUG反饋]模型增加欄位BUG模型
- 遊戲模型研究：預測與反饋遊戲模型
- 在評價中學習評價
- 【圖靈社群問題反饋】堆疊跟蹤資訊被輸出在頁面上了圖靈