前端冒泡

问题 点击一个按钮，触发了另外一个事件
这是因为清除按钮在客户选择区域内，事件冒泡导致了这个问题。我们需要修改一下事件处理
主要修改：
移除了外层容器的 @click="selectUser"
将选择客户的事件改为 @tap 并直接绑定在内层元素上
为清除按钮添加了 .stop 修饰符阻止事件冒泡
添加了简单的防抖处理
这样修改后：
点击清除按钮不会触发选择客户
点击客户信息区域才会进入选择界面
清除功能正常工作

          <view class=" tn-text-lg">客户</view>
        </view>
        <view class="tn-flex tn-flex-row-center tn-flex-col-center">
          <view class="tn-text-md tn-color-grey" @tap="selectUser">
            {{desc}}
            <text class="tn-margin-left-xs tn-icon-right"></text>
          </view>
          <text 
            v-if="user_id > 0" 
            class="tn-icon-close tn-padding-left-sm" 
            @tap.stop="clearUser"
          ></text>
        </view>
      </view>
      <view class="tn-flex tn-flex-direction-column tn-flex-row-between tn-strip-bottom-min tn-padding tn-bg-gray-light" >

      </view>
      <view class="tn-flex tn-flex-direction-column tn-flex-row-between tn-strip-bottom-min tn-padding tn-bg-gray-light"    @tap="$refs.chooseItems.show()">
        <view class="tn-flex ">
          <view class="tn-text-md" >消费项目</view>
		    <view class="tn-margin-left-xs tn-icon-right"></view>
        </view>
      </view>
	  <view class="car-count">
		   <view  class="car-list"  v-for="(item,k) in carts" :key="k">
			   <view class="car-list"> 
				   <view class="list">
					   <image :src="item.pic" class="itemPic" mode="aspectFill"></image>
					   <view class="car-mes centerboth" >
					   			   				 	<view class="mes-box">
					   			   						<view class="g-name line2">{{item.name}}</view>
					   			   						<view class="gz-box"><text>
					   			   						<view v-for="(itemS,kk) in item.staff_sets">
															
															<view @click="selectStaff(k,kk)">
																{{itemS.title}} {{itemS.staff_id>0 ? staffList[itemS.staff_id].nick_name:""}}
															</view>
															
														</view></text></view>
					   			   						<view class="price-change-num clearfix">
					   			   							<view class="price">{{user_id<1?"非":""}}会员价￥<text class="yj-price"> {{user_id<1? item.market_price/100:item.price/100}}</text></view>
					   			   							
															<tn-number-box @change="changeNum(k,item)" v-model="item.num" :key="item.id"></tn-number-box>
															<view class="price">{{user_id<1?"会员价￥":""}}<text class="yj-price"> {{user_id>0? "":item.price/100}}</text></view>
					   			   							
					   			   						</view>
					   			   	
					   			   					</view>	
					   </view>
					   
				   </view>

			   		 
			   		 </view>
			   		 
			   </view>
			   
	  </view>
	  <tn-list-view  :card="true" unlined="all" :lineRight="true" :lineLeft="false" style="padding-bottom: 100px;margin-bottom: 100px;">
		   <tn-list-cell  >商品金额 ￥{{totalPrice> 0 ? totalPrice.toFixed(2):0 }} </tn-list-cell>
		   <tn-list-cell :arrow="true" arrowRight="true">优惠券</tn-list-cell>
		 
		     <tn-list-cell >合计 ￥{{finalPrice> 0 ? finalPrice.toFixed(2):0 }} </tn-list-cell>

	      </tn-list-view>
	  <view>
		  
		 
	  </view>
	
		
      <tn-toast ref="toast"></tn-toast>

 



     
      <view class="tn-flex  tn-footerfixed">

        <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="putToOrder">
          <tn-button shape="round" background-color="rgb(100, 110, 230)" width="200rpx" font-color="rgb(255, 255, 255)" >
            <!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
            <text class="tn-color-white">挂单</text>
            <!-- <text class="tn-icon-light tn-padding-left-xs tn-color-black"></text> -->
          </tn-button>
        </view>
        <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="calculate">
          <tn-button shape="round" background-color="rgb(100, 110, 230)" width="200rpx" font-color="rgb(255, 255, 255)" >
            <!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
            <text class="tn-color-white">开单并收款</text>
            <!-- <text class="tn-icon-light tn-padding-left-xs tn-color-black"></text> -->
          </tn-button>
        </view>
      </view>


    </view>

    <choose-items ref="chooseItems" @confirm="confirmItems"></choose-items>

  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import ChooseItems from "../../common/popup/choose-items.vue";
import tools from "@/common/tools.js";
	import{
		customerDetail
	} from "@/src/api/user.js"

import { addOrder, AdminPay,fetchDetail,  fetchListOrderForCart } from '@/src/api/order.js';
export default {
  components: {
    ChooseItems,
  },
  mixins: [template_page_mixin],
  computed : {
  
  },
  data(){
    return {
		
		orderId:0,
		user:{},
		service_card:[],
		discount_card:{},
		user_id:0,
		user_name:'',
		desc: '',//
		carts:[],
        serviceList: [],
		staffList:[{nick_name:""}]
    }
  },
  watch: {
	// 'item.custom_price' : {
	// 	handler(newValue) {
	// 	        this.item.custom_price = newValue * 100
	// 	      },
	// 	 immediate: true	  
	// } 
	  
  },
    computed: {
      totalPrice() {
        let total = 0
		console.log(this.carts)
		this.carts.forEach(item => {
			if (this.user_id < 1) {
			  total += item.market_price * item.num / 100
			} else {
			  total += item.price * item.num / 100
			}
		})
	  return total;
      },
	  finalPrice() {
	    let total = 0
	  		this.carts.forEach(item => {
	  			if (this.user_id < 1) {
	  			  total += item.market_price * item.num / 100
	  			} else {
	  			  total += item.price * item.num / 100
	  			}
	  		})
	  return total;
	  }
	  
	   
    },
  onLoad(options){
  	  this.orderId = parseInt(options.id)
	  let _this  = this
		if (options.id>0) {
			fetchListOrderForCart({"id":options.id}).then(resp=>{
				_this.carts = resp.data[0].service_sub
				_this.user_id=resp.data[0].user_id
				
				_this.desc = resp.data[0].name
				
				if (_this.user_id<1) {
					_this.desc = "散客"
				}else{
					customerDetail({"id":_this.user_id}).then(respUserD=>{
						_this.user = respUserD.data.user;
						_this.service_card = respUserD.data.service_card;					
						_this.discount_card = respUserD.data.discount_card;
					})
				}
				console.log(_this.user)
			}  )
		}
  		uni.$on("selectedUser",function(res){
			
  			//this.user = res;
			customerDetail({"id":res.ID}).then(respUserD=>{
				_this.user = respUserD.data.user
				_this.service_card = respUserD.data.service_card;
				_this.discount_card = respUserD.data.discount_card;
			console.log(respUserD.data,_this.service_card,_this.discount_card);
			})
			
			_this.updateUser(res);
			_this.$forceUpdate();
			
  		});
		uni.$on("selectedStaff",function(res){
	
			
			_this.updateStaff(res)
  		});

		
  	  
  },
  onUnload(){
  	uni.$off("selectedUser");
	uni.$off("selectedStaff");
	uni.$off("confirm");
  },
  created(){
	this.getStaffList() 
	 

  },
  

  methods: {
	  getStaffList(){
	  	this.$http.get('/shop/staffs',{header:{'X-Token':tools.getToken(),'X-Shop-Id':tools.getShopId()}}).then(({code,data})=>{
	  		if (200!==code){
	  		  tools.toast(data); return;
	  		}
			
			console.log(data);
			const newObj = {};
			const objArr = data.map(obj => {
			newObj[obj.id] = obj;	
			})
	  		this.staffList = newObj;
			console.log(newObj);
	  	
	  	})
	  },
	  putToOrder(urlP ){
		   var hasErr = false
		        if (this.carts.length < 1) {
		          this.$message({
		            message: '请添加商品',
		            type: 'warning'
		          })
		          return
		        }
		        if (hasErr) {
		          return
		        }
		        this.payDv = true
		        var orderParam = { 'services': this.carts, 'source': 2, 'id': this.orderId }
		        if (this.memberId < 1) {
		          orderParam.anonymous_member = true
		        } else {
		          orderParam.user_id = this.user_id
		        }
		        addOrder(orderParam).then(response => {
		          console.log(response.code)
		  
		          if (response.code === 200) {
		            this.orderId = 0
		            this.carts = []
		            this.clearServiceStaffSet()
					if (urlP=="") {
						uni.navigateTo({
							url:"/pages/order/list"
						})
					}else{
					
					uni.navigateTo({
						url:urlP+response.data.id,
					})
						
					}
					
		          }
		          this.orderMoney = 0
		        })
	  },
	  calculate(){

		 this.putToOrder("/pages/order/buy?id=");
		 
	
	  },
	  changeNum(k,itemDel){
		 
		 
		  if(itemDel.num<1) {
			    this.carts.splice(k, 1);
				itemDel.num = 1
		  }else{
			  console.log("ss 289")
			    this.$set(this.carts,k,{...this.carts[k],num:itemDel.num})
			  
		  }
		  
	
		 
		 
	  },
	      clearServiceStaffSet() {
	        this.serviceList.map(v => {
	          if (v.staff_sets.length > 0) {
	            v.staff_sets.map(v1 => {
	              v1.staff_id = 0
	            })
	          }
	        })
	      },
	  confirmItems(e){
		 if (e.length>0) {
			 if (this.carts.length<1 ) {
				 this.carts.push(...e);
			 }else{
				 const set = new Set()
				 for(let i=0;i<this.carts.length;i++) {
					 set.add(this.carts[i].id)
				 }
				 
				 for(let i=0;i<e.length;i++) {
				 					if (!set.has(e[i].id)) {
										 this.carts.push(e[i]);
									}
				 }
			
				 
				 
			 }
			 
			
	
			
			
			 
		 }
		 
		
	  },
	  
	  removeItem(e){
		this.carts.splice(e,1)  
	  },
	  goDetail(){
		  console.log(this.user.ID);
		  if (this.user.Id== undefined) {
			  
			  return;
		  }
		  if(this.user.ID+0<1){
			  return;
		  }
		  wx.navigateTo({url:"/pages/user_detail?id="+this.user.ID})
	  },
	  updateUser(u){
		  this.user =u;
		  this.desc= u.name;
		  this.user_id = u.ID
	  },
	  updateStaff(u){
		this.carts[u.k].staff_sets[u.kk].staff_id= u.id
		
		  console.log(u)
	  },
selectUser(){
	uni.navigateTo({
		url:"/pages/user_list?method=billing"
	})
},
selectStaff(k,kk){
	uni.navigateTo({
		url:"/pages/staff_list?method=billing&k="+k+"&kk="+kk
	})
},
    tn(url) {
      try {
        uni.navigateTo({
          url,
        });
      } catch (e) {
        console.error(e);
        uni.showToast({
          title: "跳转失败",
          icon: "none",
          mask: true,
        });
      }
    },
    clearUser() {
      if (this._clearUserTimer) return
      this._clearUserTimer = setTimeout(() => {
        this.user_id = 0
        this.user = {}
        this.desc = '选择客户'
        this.service_card = []
        this.discount_card = {}
        
        // 如果需要重新计算价格
        this.calculatePrice()
        this._clearUserTimer = null
      }, 100)
    },
  }
`