vue-发布评论（星星打分，快捷输入）

重点：

• 星星打分 tapmode @click=“count=i+1” :class=“count>i?‘c-f83600 iconshoucang1’:‘iconshoucang’”；
• 快捷输入的js,选取某项或取消选取的功能；

1.星星打分

<div class="starli align-center">
    <div class="starname">整体评价</div>
    <div class="stars align-center c-ccc f-w-b">
    	<!-- 5分- 打分了就变色 换图标 -->
    	<!--fistclick='2' -->
        <i class="iconfont" v-for="(v,i) in 5"  tapmode @click="count=i+1" 
        	:class="count>i?'c-f83600 iconshoucang1':'iconshoucang'">
        </i>
    </div>
</div>

2.服务态度好…等快捷输入（可取消）

<!--好评快捷输入-->
<div class="fastshuru flex-row-wrap f-3-2">
	<!-- v-if="(count>2&&fistclick=='2') || fistclick=='1'" -->
   <div class="fastli" :class="{'active':commarr1.indexOf(v.value)>=0}" 
   v-for="(v,i) in models1" tapmode @click="tapindex1(i,v.value,v.text)">{{v.text}}</div>
</div>
<!--差评快捷输入-->
<div class="fastshuru flex-row-wrap f-3-2" v-if="count<3&&fistclick=='2'">
    <div class="fastli" :class="{'active':commarr2.indexOf(v.value)>=0}" v-for="(v,i) in models2" tapmode @click="tapindex2(i,v.value,v.text)">{{v.text}}</div>
</div>

<script type="text/javascript">
    var vm = new Vue({
		el:'#app',
		data:{
            //fistclick:'1',//刚打开展示服务好的快捷输入,选择了星星以后根据3星及以上好评,3星以下差评
            count:'',//整体评价
            models1:[
                {'text':'服务态度好',value:'0'},
                {'text':'做的快',value:'1'},
                {'text':'物品保存完好',value:'2'},
                {'text':'准时准点',value:'3'},
                {'text':'穿着专业',value:'4'},
                {'text':'衣着整洁',value:'5'},
                {'text':'热情负责',value:'6'}
            ],
            models2:[
                {'text':'服务态度差',value:'0'},
                {'text':'做的慢',value:'1'},
                {'text':'物品损坏',value:'2'},
                {'text':'不准时',value:'3'},
                {'text':'不送上楼',value:'4'},
                {'text':'比较马虎',value:'5'},
                {'text':'未穿制服',value:'6'},
                {'text':'形象邋遢',value:'7'}
            ],
            commarr1:[],
            commarr2:[],
            arr1:[],
            arr2:[],
            goodsdd1:'',
            goodsdd2:'',
            goodscomm:'',
			images:[],
            info:{
                'courier_info':{
                    'nick_name':'',
                    'avatar_url':'',
                },
            },
        },
        methods:{
            tapindex1(index,value,text){
            	//数组-1代表未匹配到元素（没有选择就去选择的操作）
                if(vm.commarr1.indexOf(value)==-1){
                    vm.commarr1.push(value);//push() 方法向数组末尾添加新项目，并返回新长度。
                    vm.arr1.push(text);
                    vm.goodsdd1 = vm.arr1.join(',');//join() 方法将数组作为字符串返回,元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。不会改变原始数组。
                }else{
                	//否则就是已有元素，去重操作
                    var index1 = vm.commarr1.indexOf(value);//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                    //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目（）
                    //arrayObject.splice(index,howmany,item1,.....,itemX)
                    //index---必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
                    //howmany---必需。要删除的项目数量。如果设置为 0，则不会删除项目。
                    //item1, ..., itemX---可选。向数组添加的新项目。
                    vm.commarr1.splice(index1,1);//删除指定位置的一项
                    var index1 = vm.arr1.indexOf(text)
                    vm.arr1.splice(index1,1);
                    vm.goodsdd1 = vm.arr1.join(',');
                }
                //vm.commarr1=------ ["1","4"]
                //vm.arr1=------ ["做的快","穿着专业"]
                //vm.goodsdd1=------ "做的快,穿着专业"
            },
            tapindex2(index,value,text){
                if(vm.commarr2.indexOf(value)==-1){
                    vm.commarr2.push(value);
                    vm.arr2.push(text);
                    vm.goodsdd2 = vm.arr2.join(',');
                }else{
                    var index1 = vm.commarr2.indexOf(value);
                    vm.commarr2.splice(index1,1);
                    var index2 = vm.arr2.indexOf(text)
                    vm.arr2.splice(index2,1);
                    vm.goodsdd2 = vm.arr2.join(',');
                }
            },
        },
   })
 </script>