微信小程序，我的订单（取消订单）

首先是取消订单，在原有的页面上添加一个遮盖层wxml

<!--订单 -->
<view class="zan-dialog {{ showdDialog ? 'zan-dialog--show' : '' }}" catchtouchmove='ture' >
    <view class="zan-dialog__mask" bindtap="hidedType"/>
    <view class="zan-dialog__container">
        <radio-group bindchange="radioChanged" view style="margin: 40rpx 20rpx;">
            <view style="display: flex;">
                <radio value="价格有点贵" ></radio>
                <view class="weui-cell__bd">价格有点贵</view>
            </view>
            <view style="display: flex;margin: 60rpx 0;">
               <radio value="收货地址拍错" ></radio>
               <view class="weui-cell__bd">收货地址拍错</view>
            </view>
            <view style="display: flex;margin: 60rpx 0;">
               <radio value="规格/款式/数量拍错" ></radio>
               <view class="weui-cell__bd">规格/款式/数量拍错</view>
            </view>
            <view style="display: flex;margin: 60rpx 0;">
               <radio value="不想要了" ></radio>
               <view class="weui-cell__bd">不想要了</view>
            </view>
            <view style="display: flex;margin: 60rpx 0;">
               <radio value="其他原因" ></radio>
               <view class="weui-cell__bd">其他原因</view>
            </view>
        </radio-group>    
        <view class="determine" bindtap="paymentlType">确定</view>
    </view>
</view>

js

 // 取消
  cancellation:function(e){
     var index = e.currentTarget.dataset.index//获取下标
     this.setData({
       showdDialog:true,
       index:index
     })
  },
//取消订单遮盖层
  hidedType:function(e){
    this.setData({
      showdDialog:false
    })
  },
//取消订单 单选框
  radioChanged: function (event) {
    console.log(event,'eee')
    let imgType = event.detail.value;
    this.setData({
      cancellation: imgType
    });
  },
//取消订单 确定键
  paymentlType:function(){
       var li = wx.getStorageSync('payment') 
       var index = this.data.index
       var cance = {}
       for(var i=0;i<li.length;i++){//判断点击的下标一直
            li[i].index = i
            if(li[i].index == index){
              li[i].cancell=this.data.cancellation
              cance = li[i]
              
            }
       }
       var cancellation =  wx.getStorageSync('cancella')  || []//已取消数据
       cancellation.push(cance)
       wx.setStorageSync('cancella',cancellation) //存储已取消数据
       this.data.Paymentlist.splice(index,1)//删除点击的下标
       wx.setStorageSync('payment',this.data.Paymentlist) //存储待支付数据
       wx.showToast({
        title: '取消成功',
        duration:100,  
        icon: 'loading', //图标
        mask: true //显示透明蒙层 防止触摸穿透   
      })
      this.setData({
        showdDialog:false
      })
  },
  

wxss

 /* 件数弹窗 */
.zan-dialog__mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.3);
  height: 100vh;
  width: 100%;
  /* //设置阴影半透明背景如： background: rgba(0, 0, 0, 0.4); */
  display: none;
 }
 .zan-dialog__container {
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  /* //弹窗布局宽 */
  height: 70%;
  /* //弹窗布局高，与下面弹出距离transform有关 */
  border-radius:20rpx 20rpx 0 0  ;
  background: #f8f8f8;
  transform: translateY(300%);
  /* //弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度 */
  transition: all 0.4s ease;
  z-index: 112;
  /* //弹框的悬浮阴影效果，如不需要可注释该行 */
 }

 .zan-dialog--show .zan-dialog__container{
  transform: translateY(0);
 }
 
 .zan-dialog--show .zan-dialog__mask {
  display: block;
 }
 /*单选框  */
   /* // 大小设置 */
   radio .wx-radio-input {
    border-radius: 50%;
    width: 24px;
    height: 24px;
  }
  /* // 边框颜色 */
  radio .wx-radio-input {
    border-color: #87858a;
  }
  /* // 选中状态设置 */
  radio .wx-radio-input.wx-radio-input-checked {
    border-color: #e93323 !important;
    background: #e93323!important;
   }
.weui-cell__bd{
    margin-left: 20rpx;
    font-size: 16px;
}
  /* 确定 */
  .determine{
    position: absolute;
    bottom: 110rpx;
    background-color: #e93323;
    width: 93%;
    margin: 0rpx 25rpx;
    text-align: center;
    padding: 20rpx 0;
    color: #fff;
    border-radius: 100rpx;
    z-index: 8;
}

ok,这就做好了，之后就是那已取消的数据渲染到已取消的选项卡里就可以了，跟待付款一样的，就不写了。