小程序互斥开关、互斥选择功能

最新推荐文章于 2024-07-10 21:28:05 发布
最新推荐文章于 2024-07-10 21:28:05 发布
阅读量1k 收藏 1
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38188047/article/details/103538051
版权

效果图

在这里插入图片描述

功能说明

  • 设置默认发货方式：

    • 默认发货只能选择一个或者不选，要做一个切换功能

  • 设置常用物流和默认物流

    • 常用物流可多选或者不选，不选则不能为默认
    • 默认只可以有一个

  • 思路：记录上一个选择的索引

    • 初始化时 记住索引
    • 初始化时 没有索引 把当前的索引给初始化时的索引

demo

js

Page({

  data: {
    logiList: [{
      CPNM: "物之桥测试",
      HYID: "300",
      RN: "1",
      STUS: "2",
    }, {
      CPNM: "物之桥",
      HYID: "444",
      RN: "2",
      STUS: "0"
    }, {
      CPNM: "三友物流",
      HYID: "1647",
      RN: "3",
      STUS: "1"
    }],
    preIndex: "0",
    deliveryModeList: [{
      FTNH: "1",
      FTNM: "自送至物流",
      STUS: "Y"
    }, {
      FTNH: "2",
      FTNM: "物流上门",
      STUS: "2"
    }, {
      FTNH: "3",
      FTNM: "指派代发",
      STUS: "3"
    }],
    preModeIndex: "0",
    page: 1
  },
  staticVal: {
    logiCompany: "",
    isNodata: false
  },
  onLoad: function(options) {
    let t = this;
    t.queryOrdGeyDic();
    t.queryOrdGetLogCity(1, "", "已显示全部标记");
  },
  queryOrdGeyDic() {
    let t = this;
    // wx.request({
    //   url: '你的接口',
    //   method: "POST",
    //   header: getApp().globalData.header,
    //   success(res) {
    //     let rows = res.data.rows;
    //     if (rows && rows.length > 0) {
    //       t.setData({
    //         deliveryModeList: rows
    //       });
    //       let preModeIndex = t.searchNext(rows, 'Y', "STUS");
    //       t.setData({
    //         preModeIndex: preModeIndex
    //       });
    //       preModeIndex
    //     } else {
    //       wx.showToast({
    //         title: '已显示全部标记',
    //         icon: 'loading',
    //         duration: 1000
    //       })
    //     }
    //   }
    // });
  },
  //查询常用物流
  queryOrdGetLogCity(page, comp, title) {
    let t = this;
    // wx.request({
    //   url: '你的接口',
    //   method: "POST",
    //   header: getApp().globalData.header,
    //   data: {
    //     page: page,
    //     rows: 20,
    //     comp: comp
    //   },
    //   success(res) {
    //     let rows = res.data.rows;
    //     if (rows && rows.length > 0) {
    //       t.setLogiList(rows);
    //       let preIndex = t.searchNext(rows, 2, "STUS");
    //       t.setData({
    //         preIndex: preIndex
    //       });
    //     } else {
    //       t.staticVal.isNodata = true;
    //       wx.showToast({
    //         title: title,
    //         icon: 'loading',
    //         duration: 300
    //       })
    //     }
    //   }
    // })
  },
  queryLogiCompany(e) {
    let t = this;
    let val = this.staticVal.logiCompany;
    t.queryOrdGetLogCity(1, val, "正在查询..");
  },
  handlerLogiCompany(e) {
    this.staticVal.logiCompany = e.detail.value;
  },
  setLogiSTUS(hyid, stus) {
    let t = this;
    // wx.request({
    //   url: '你的接口' + stus,
    //   method: "POST",
    //   header: getApp().globalData.header,
    //   data: {
    //     HYID: hyid
    //   },
    //   success(res) {
    //     if (res.data > 0) {

    //     } else {
    //       wx.showToast({
    //         title: '设置失败',
    //         icon: 'loading',
    //         duration: 1000
    //       })
    //     }
    //   }
    // })
  },
  setDeliveryMode(ftnh) {
    let t = this;
    // wx.request({
    //   url: '你的接口',
    //   method: "POST",
    //   header: getApp().globalData.header,
    //   data: {
    //     code: ftnh
    //   },
    //   success(res) {
    //     if (res.data > 0) {
    //     } else {
    //       wx.showToast({
    //         title: '设置失败',
    //         icon: 'loading',
    //         duration: 1000
    //       })
    //     }
    //   }
    // })
  },
  selectedLogi(e) {
    let t = this;
    let item = e.currentTarget.dataset.item;
    if (item.STUS > 0) {
      t.setLogiSTUSValue(item, 0);
    } else {
      t.setLogiSTUSValue(item, 1);
    }
  },
  setLogiSTUSValue(item, stus) {
    let t = this;
    let p = new Promise((resolve, reject) => {
      t.setLogiSTUS(item.HYID, stus);
      resolve()
    });
    p.then(() => {
      t.data.logiList[item.RN - 1].STUS = stus;
      t.setData({
        logiList: t.data.logiList
      });
    })
    return item.RN - 1;
  },
  selectedDefaultLogi(e) {
    let t = this;
    let preIndex = t.data.preIndex;
    let item = e.currentTarget.dataset.item;
    if (item.STUS > 1) {
      t.setLogiSTUSValue(item, 1);
    } else {
      let currentIndex = t.setLogiSTUSValue(item, 2);
      if (t.data.logiList[preIndex]) {
        if (t.data.logiList[preIndex].STUS * 1 > 0 && currentIndex * 1 != preIndex * 1) {
          t.data.logiList[preIndex].STUS = 1;
          t.setData({
            logiList: t.data.logiList
          });
        }
      }
      t.setData({
        preIndex: currentIndex
      });
    }
  },
  setDeliveryModeSTUS(item) {
    let t = this;
    let p = new Promise((resolve, reject) => {
      t.setDeliveryMode(item.FTNH);
      resolve()
    });
    p.then(() => {
      t.data.deliveryModeList[item.FTNH - 1].STUS = 'Y';
      t.setData({
        deliveryModeList: t.data.deliveryModeList
      });
    })
    return item.FTNH - 1;
  },

  selectedDeliveryMode(e) {
    let t = this;
    let preModeIndex = t.data.preModeIndex;
    let item = e.currentTarget.dataset.item;
    if (item.STUS == 'Y') {
      t.data.deliveryModeList[item.FTNH - 1].STUS = 'N';
      t.setData({
        deliveryModeList: t.data.deliveryModeList
      });
    } else {
      let currentIndex = t.setDeliveryModeSTUS(item)
      if (t.data.deliveryModeList[preModeIndex]) {
        if (t.data.deliveryModeList[preModeIndex].STUS == 'Y' && currentIndex * 1 != preModeIndex * 1) {
          t.data.deliveryModeList[preModeIndex].STUS = 'N';
          t.setData({
            deliveryModeList: t.data.deliveryModeList
          });
        }
      }
      t.setData({
        preModeIndex: currentIndex
      });
    }
  },

  setLogiList(rows) {
    let t = this;
    if (t.data.page == 1) {
      t.setData({
        logiList: rows
      });
    } else {
      let d = t.data.logiList;
      t.setData({
        logiList: d.concat(rows)
      });
    }

  },
  tolowerReflesh() {
    let t = this;
    if (!t.staticVal.isNodata) {
      t.setData({
        page: t.data.page + 1
      });
      t.queryOrdGetLogCity(t.data.page, "", "");
    }
  },
  searchNext(arr, key, field) {
    for (let i = 0; i < arr.length; i++) {
      if (key == arr[i][field]) {
        return i;
      }
    }
  },
  stopBubble() {
    return;
  }
})

wxml

<view class="adl-wrap">
    <view class="adl-item-list adl-item-wrap">
        <view class="adl-item-title">设置默认发货方式</view>
        <view class="adl-item-content">
            <view class="adl-item-content-l" style="padding:0 15rpx 15rpx;justify-content: flex-start;">
                <block wx:for="{{deliveryModeList}}" wx:key="{{index}}">
                    <view class="adl-item-content-wrap {{item.STUS=='Y'?'active':''}}" bindtap="selectedDeliveryMode" data-item="{{item}}">
                        <text class="adl-item-content-text" style=" padding: 0 15rpx;">{{item.FTNM}}</text>
                    </view>
                </block>
            </view>
        </view>
    </view>
    <view class="adl-item-wrap">
        <view class="adl-item-head">
            <view class="adl-item-head-title">设置常用物流公司和默认物流公司</view>
        </view>
        <view class="adl-item-query">
            <input class="adl-item-query-input" type="text" bindinput="handlerLogiCompany"  value="" placeholder="输入物流公司名" />
            <view class="adl-item-query-select" bindtap="queryLogiCompany">搜索</view>
        </view>
        <view class="adl-item-head">
            <view class="adl-item-head-title adl-font">物流公司列表</view>
            <view class="adl-item-head-title adl-font">设为默认</view>
        </view>
        <view class="adl-item-cotent">
            <scroll-view id="page" scroll-y="true" style="height:740rpx;" bindscrolltolower="tolowerReflesh">
                <view class="adl-item-content-l" wx:for="{{logiList}}" wx:key="{{index}}">
                    <view class="adl-item-content-wrap {{item.STUS>0?'active':''}}" bindtap="selectedLogi"
                        data-item="{{item}}">
                        <text class="adl-item-content-text">{{item.CPNM}}</text>
                    </view>
                    <view catchtap="stopBubble">
                        <switch checked="{{item.STUS>1?true:false}}" data-item="{{item}}"
                            bindtap="selectedDefaultLogi" />
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</view>

wxss

.adl-wrap {
    display: flex;
    flex-direction: column;
    padding: 15rpx 15rpx;
}

.adl-item-list {
    display: flex;
    flex-direction: column;
    border-bottom: 10rpx solid #F3F1F1;
    margin-top: 15rpx;
}

.adl-item-title {
    height: 70rpx;
    font-size: 30rpx;
    font-weight: 540;
}

.adl-item-wrap .adl-item-wrap {
    display: flex;
    flex-direction: column;
}

.adl-item-wrap .adl-item-head {
    display: flex;
    justify-content: space-between;
    padding-top: 30rpx;
}

.adl-item-wrap .adl-item-head-title {
    font-weight: 540;
    margin-right: 20rpx;
}

.adl-font {
    margin-left: 20rpx;
    font-size: 28rpx;
    color: #302F31;
}

.adl-item-wrap .adl-item-content {
    display: flex;
    flex-direction: column;
}

.adl-item-wrap .adl-item-content-l {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 15rpx 15rpx;
    line-height: 70rpx;
    border-bottom: 1rpx solid #F3F1F1;
}

.adl-item-content-l .adl-item-content-wrap {
    border-radius: 10rpx;
    margin-right: 20rpx;
    background: #F7F1F7;
    color: #302F31;
}

.adl-item-wrap .adl-item-content-text {
    display: inline-block;
    padding: 0 30rpx;
    font-size: 28rpx;
}

.wx-switch-input {
    width: 82rpx !important;
    height: 40rpx !important;
    background: #23A8F2 !important;
    border: #23A8F2 !important;
}

.wx-switch-input::before {
    width: 84rpx !important;
    height: 40rpx !important;
}

.wx-switch-input::after {
    width: 42rpx !important;
    height: 40rpx !important;
}

.adl-item-content-wrap.active {
    background: #3164FE;
    color: #FCFDFF;
}

.adl-item-query {
    display: flex;
    padding: 15rpx;
    margin-top: 15rpx;
    border-bottom: 5rpx solid #F3F1F1;
}

.adl-item-query-input {
    flex: 10;
    align-self: center;
}

.adl-item-query-select {
    flex: 2;
    text-align: center;
    border-radius: 10rpx;
    margin-right: 20rpx;
    padding: 10rpx 0rpx;
    background: #289CFF;
    color: #FCFDFF;
}
张张打怪兽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【微信小程序 | 实战开发】配置开发环境、生产环境和API
小新的博客
09-06 1453
配置开发环境、生产环境和API的使用 写在前面： 一、配置开发环境 1.1 项目目录： 1.2 JSON 配置 1.3 工具配置 project.config.json 1.4 页面配置 page.json 1.5 小程序的数据绑定 1.6 sitemap 配置 1.7 小程序的wxss文件 二、配置生产环境 2.1 完成账号关联和实名认证 2.2 进行生产环境初始化： 2.3 (云)服务器环境部署(基于Ubuntu) 三、小程序API 3.1 事件监听 API 3.2 同步 API 3.3 异步 API
同步与互斥
hqb_newfarmer的博客
03-21 132
linux驱动中的同步与互斥
微信小程序 - 自定义switch切换
Dark丶照萤映雪
12-14 1169
直接上代码 wxml代码 <view class="switch"> <view class="switchNums {{w_num == 0?'currentNum':''}}" bindtap="switchChange" data-index="0">{{selectItem[0]}} </view> <view class="switchNums {{w_num == 1?'currentNum':''}}" bi.
十六、FreeRTOS中如何实现互斥访问
m0_63702526的博客
03-20 362
简述互斥访问引入的必要性
微信小程序width:100%设置margin后宽度超过屏幕
代码界的萌新
09-26 9683
当width设置100%后屏幕实际显示状态是超过屏幕的，如下图: 这个时候宽度不能设置100%，把宽度改为width:auto即可解决超过屏幕的问题。
JavaScript--开关思想
weixin_30917213的博客
10-19 278
就是男默女泪的立flag! 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ...
如何设置QT的QToolBar里面的按钮互斥
koilin的专栏
07-11 2103
一个ToolBar里面的按钮都是button，如果有时候这些button用来表示同一件事情的不同状态，那就需要做到这个bar里面的所有button互斥，也就是同一个时间里，只有一个是处于按下的状态。如果另外一个按钮被按下了，这个按钮就要弹起来。那么，我们的做法就是把这些需要互斥的action组成一个group，并设置一个初始的被按下的按钮。 以下就是一个例子，大家可以参考。 QActionGroup *agViewGroup = new QActionGroup(this); agViewGrou
【愚公系列】《微信小程序开发解析》005-事件
最新发布
时光隧道
07-10 1万+
在微信小程序中，事件是用户和程序之间交互的核心概念。通过事件，用户可以与小程序进行各种交互操作，例如点击按钮、输入文字、滑动屏幕等。以下是微信小程序中事件的概念和使用方法。事件类型触摸事件：包括触摸开始、触摸移动、触摸结束等，如touchstarttouchmovetouchend等。鼠标事件：主要用于 PC 端小程序，如clickdblclick等。表单事件：与表单控件相关的事件，如submitinputfocusblur等。媒体事件：与音视频控件相关的事件，如playpauseended等。
微信小程序中遇到的多规格问题(一)
ZJW222的博客
11-05 2274
刚进入公司的时候就有遇到过多规格的问题，当时就觉得很麻烦，就只是看了下，没有尝试，最近在写微信小程序的时候，又遇到了多规格问题，就自己尝试了下，在这里记录下 1.效果图 2.文件及部分思路 index.wxml文件 &lt;view class="multipleStandard" bindtap="standardSelect"&gt; &lt;view class="stand...
微信小程序开发入门教程（十二）
QStack的博客
05-21 1857
背景 上一篇文章我们讲述了微信小程序的三个基础组件icon、text和progress。这些基础组件主要用途是进行信息展示，微信小程序除了信息展示还需要与用户交互，而表单是应用中获取用户输入的重要手段，它对于系统极其重要，用户在应用中输入的大部分内容都是在表单元素中完成的，本篇文章着重介绍表单组件的特性，至于数据如何传输到后段会在之后的文章着重介绍。 radio组件 单选框可以用来生成一组单选按钮，供用户从一批固定的选项中做出选择，它适用于数据不多的情况，小程序中的单选框是由ra-group和radio两个
多个select 的互斥选择实现
07-28
NULL 博文链接：https://fangfy0537.iteye.com/blog/783669
小程序实践（七）----checkbox实现多选弹窗
zhumeng_1的博客
06-24 2600
小程序（七）----checkbox实现多选弹窗 今天开发过程中需要实现一个多选然后以弹窗的方式实现，然后就有了接下来的这个不算太beautiful的弹窗多选可互斥功能。 有需要的复制粘贴即可使用，适合新手哦。 效果图： 1.布局wxll <view style="background:white;width:100%;height:auto;padding:20px 14px;"> <!-- 复选弹框列表 --> <view class='typeListBox'
PyQt(Python+Qt)学习随笔：toolButton的autoRaise和arrowType属性
老猿Python
11-23 2819
autoRaise属性 autoRaise属性表示toolButton按钮是否自动凸出，类型为布尔类型。默认值为False，可以通过autoRaise()、setAutoRaise(bool enable)来读取和设置。 如果 autoRaise为False，则toolButton初始状态为与界面齐平，看起来没有按钮一样，如图： 上图中黄色荧光笔标记部分为一个toolButton，设置autoR...
实现程序互斥运行的几种方法
scollins的专栏
07-16 851
 [ 原创文档 本文适合初级读者 已阅读21535次 ]文档代码工具<br /><br />实现程序互斥运行的几种方法<br />作者:ljpxyxc<br />下载本文配套源代码<br /><br />在WIN32下，实现程序互斥运行的方法有很多种，我简单分析以下几种不同的实现：<br />一、在VC下的实现<br />Visual C++ 是WIN32编程最主要也是最强大的编程工具这一，引用一名话来说VC就是“只有你想不到的，没有VC做不到的”。废话少说，下面看看用VC是如何这个功能。<br />A．
小程序点击实现隐藏和显示（两个事件双向）
lamxin的博客
03-28 1万+
刚开始做小程序的小白，遇到了一个问题就是这个就是这个点击事件，我查到的方法只有https://blog.csdn.net/zero_1996/article/details/74067201这种，只能实现一个事件的显示隐藏。WXML文件&lt;view class="hide{{showView?'':'show'}}"&gt;    &lt;view class='content'&gt;   ...
关闭互斥体实现微信多开，适用于现在所有版本
qq_36608560的博客
05-22 1632
关闭互斥体实现微信多开，适用于现在所有版本 上一篇文章写了一个有版本限制的多开方法，现在有了个适用于所有版本的多开方法。 只要关闭互斥体句柄就能实现多开。 就是枚举微信进程所有的句柄，找出_WeChat_App_Instance_Identity_Mutex_Name 这个句柄名字，关闭它，就能实现多开了，现在的版本都可以用这个方法。 ...
微信小程序实现多个button按钮 多选操作
这里是痞子Monkey的博客
08-24 1万+
&lt;block wx:for="{{gd1List2}}"&gt; &lt;button class="{{item.isChecked2?'normal':'a2'}}" bindtap='getDemo2' data-text="{{item.name}}" data-index='{{index}}'&gt; {{item.name}} &lt;/button&gt; &lt
微信小程序----button组件
止于至善
12-28 1万+
DEMO下载 展示效果图 button组件的常用属性 size：default、mini—-default为块级按钮、mini为小按钮 type：primary、default、warn—-primary提交成功、default默认灰色、warn警告色 plain：true、false—-按钮是否镂空，背景色透明 disabled：true、false—-是否禁用 loading：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值