小程序置顶、自定义删除提示、联级默认选项

 

<!-- 顶部筛选 -->
<view class="fixHead">
    <view class="selectFactory" bindtap="openFactoryMask">厂别<text class="factoryName">{{factoryObj.defaultFactory}}</text></view>
    <view class="selectStorage" bindtap="openFactoryMask">仓库<text class="storageName">{{factoryObj.defaultStorage}}</text></view>
    <view class="selectDate">时间<picker class="dateTxt" mode="date" bindchange="selectDate">{{date}}</picker></view>
    <view wx:if="{{isShowEmptyMask}}" class="selectAllBtn">全选<checkbox class="checkbox" checked></checkbox></view>
    <view class="scannedNum">已扫总数：{{dataLst.length > 0 ? dataLst.length : '--'}}</view>
    <label bindtap="cancelScan" class="cancelScan {{isCancelScan ? 'doCancelScan' : 'nothing'}}">撤销扫描<checkbox class="checkbox"></checkbox></label>
</view>

<!-- 数据项 -->
<view wx:if="{{dataLst.length > 0 && !isShowStorage}}" class="dataWrapper {{isShowEmptyMask ? 'dataEmpty' : 'nothing'}}">
    <block wx:for="{{dataLst}}" wx:key="id">
        <view class="dataItem">
            <text class="dataNo">制令\采购单号:{{item.dataNo}}</text>
            <view class="customerName">客户简称：{{item.customerName}}</view>           
            <view class="dataRow">
                <text class="batchNo itemTxt">生产批号：{{item.batchNo}}</text>
                <text class="dataNum itemTxt">数量：{{item.dataNum}}</text>
            </view>
            <view class="specification">品名规格：{{item.specification}}</view>
            <checkbox wx:if="{{isShowEmptyMask}}" class="checkDelete checkbox" checked></checkbox>
            <button class="deleteBtn" data-index="{{index}}" bindtap="deleteData"><image class="iconDelete" src="QHImage/iconDelete.png" mode="widthFix"></image></button>
        </view>
    </block>
    <view class="endTip">到底了</view>
</view>

<!-- 为空提示 -->
<view class="nothingBox" wx:if="{{dataLst.length == 0}}">
    <image class="nothingPic" src="QHImage/nothingPic.png" mode="widthFix"></image>
    <text class="nothingTip">请扫码进行成品入库作业</text>
</view>

<!-- 厂别仓库选择 -->
<view class="storageWrapper {{isShowStorage ? 'showStorageMask' : 'nothing'}}">
    <view class="factoryContain">
        <block wx:for="{{factoryObj.factoryLst}}" wx:key="id">
            <text class="factoryOption {{factoryObj.factoryIndex == index ? 'defaultFactory' : 'nothing'}}" 
                data-name="{{item.factoryName}}" data-index="{{index}}" bindtap="selectFactory">{{item.factoryName}}</text>
        </block>
    </view>
    <view class="storageContain">
        <block wx:for="{{factoryObj.factoryLst[factoryObj.factoryIndex].storageLst}}" wx:key="id">
            <text  class="storageOption {{factoryObj.storageIndex == index ? 'defaultStorage' : 'nothing'}}"
                data-name="{{item.storageName}}" data-index="{{index}}" bindtap="selectStorage">{{item.storageName}}</text>
        </block>
    </view>
    <view class="footBtn"><button bindtap="closeFactoryMask" size="default" class="okBtn btnActive">确定</button></view>
</view>

<!-- 底部按钮 -->
<view class="fixFoot">
    <button bindtap="showEmptyBox" class="emptyBtn btnActive {{!!dataLst.length ? 'doEmpty' : 'nothing'}}">清空</button>
    <button bindtap="submitData" class="submitBtn btnActive {{!!dataLst.length ? 'doSubmit' : 'nothing'}}">提交</button>
    <button bindtap="scanCode" class="scanBtn btnActive"><image class="iconScan" src="QHImage/iconScan.png" mode="widthFit"></image>扫码</button>
</view>

<!-- 操作提示 -->
<view class="operateTip {{operateTip.isShowTip ? 'showOperateTip' : 'nothing'}}">{{operateTip.tipTxt}}</view>

<!-- 删除提示 -->
<view class="mask {{isShowEmptyMask ? 'showMask' : 'nothing'}}"></view>
<view class="confirmBox {{isShowEmptyMask ? 'showConfirmBox' : 'nothing'}}">
    <text class="confirmTip">提示</text>
    <view class="confirmTxt">是否清空界面所有数据？</view>
    <button bindtap="cancelEmpty" class="cancelBtn btnActive" size="mini">取消</button>
    <button bindtap="emptyData" class="confirmBtn" size="mini">确定</button>
</view>

<!-- 置顶 -->
<view class="goTopBtn  {{isScroll ? 'showGoTop' : 'hideGoTop' }}" bindtap="goTop">顶部</view>

 

Page({

    /**
     * 页面的初始数据
     */
    data: {
        isShowEmptyMask: false,
        isCancelScan: false,
        isShowStorage: false,
        operateTip: {
            isShowTip: false,
            tipTxt: ""
        },
        factoryObj: { // 工厂仓库
            defaultFactory: "第二工厂",
            defaultStorage: "成品仓库2-2",
            factoryLst: []
        },
        date: "", // 日期
        dataLst: []  // 扫码数据
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        that.loadFactory();
        that.getNowDate();

        var dataInfo = [
            { "id": 1,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 3,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 4,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 5,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }
        ];
        that.setData({
            dataLst: dataInfo 
        });
    },

    // 获取工厂
    loadFactory: function() {
        var that = this;
        var factoryIndex = 0; // 根据工厂显示对应仓库
        var storageIndex = 0; 
        var factoryInfo = [
            {
                "id": 1,
                "factoryName": "第一工厂",
                "storageLst": [
                    {"storageName": "成品仓库A"},
                    {"storageName": "成品仓库A"},
                    {"storageName": "成品仓库A"},
                    {"storageName": "成品仓库A"},
                    {"storageName": "成品仓库B"},
                    {"storageName": "成品仓库C"},
                    {"storageName": "成品仓库D"},
                    {"storageName": "成品仓库E"},
                    {"storageName": "成品仓库G"},
                    {"storageName": "成品仓库H"},
                    {"storageName": "成品仓库I"},
                    {"storageName": "成品仓库J"},
                    {"storageName": "成品仓库K"},
                    {"storageName": "成品仓库L"},
                    {"storageName": "成品仓库M"},
                    {"storageName": "成品仓库N"},
                    {"storageName": "成品仓库END"}
                ]
            },
            {
                "id": 2,
                "factoryName": "第二工厂",
                "storageLst": [
                    {"storageName": "成品仓库2-1"},
                    {"storageName": "成品仓库2-2"},
                    {"storageName": "成品仓库2-3"},
                    {"storageName": "成品仓库2-4"},
                    {"storageName": "成品仓库2-5"},
                    {"storageName": "成品仓库2-6"},
                    {"storageName": "成品仓库2-7"},
                    {"storageName": "成品仓库2-8"}
                ]
            },
            {
                "id": 3,
                "factoryName": "第三工厂",
                "storageLst": [
                    {"storageName": "成品仓库3-1"},
                    {"storageName": "成品仓库3-2"},
                    {"storageName": "成品仓库3-3"},
                    {"storageName": "成品仓库3-4"},
                    {"storageName": "成品仓库3-5"},
                    {"storageName": "成品仓库3-6"}
                ]
            }
        ];

        factoryInfo.forEach((item, index) => {
            if(item.factoryName == that.data.factoryObj.defaultFactory) {
                factoryIndex = index;
                item.storageLst.forEach((item2, index2) => {
                    if(item2.storageName == that.data.factoryObj.defaultStorage) {
                        storageIndex = index2;
                    }
                });
            }
        });

        that.setData({
            "factoryObj.factoryLst": factoryInfo,
            "factoryObj.factoryIndex": factoryIndex,
            "factoryObj.storageIndex": storageIndex
        });
    },

    // 打开工厂弹框
    openFactoryMask: function() {
        this.setData({
            isShowStorage: true
        });
        wx.setNavigationBarTitle({
            title: '厂别仓库选择' 
        });
    },

    // 选择工厂 ———— 选择工厂的同时也要选择仓库（如果工厂一开始不是默认的，则仓库默认选中第一个）
    selectFactory: function(e) {
        var that = this;
        var factoryName = e.currentTarget.dataset.name;
        var factoryIndex = e.currentTarget.dataset.index;
        var factoryObj = that.data.factoryObj;
        var storageName = factoryObj.defaultStorage;
        var storageIndex = factoryObj.storageIndex;

        if(factoryIndex != factoryObj.factoryIndex) {
            storageIndex = 0;
            storageName = factoryObj.factoryLst[factoryIndex].storageLst[storageIndex].storageName;
        }

        that.setData({
            "factoryObj.defaultFactory": factoryName,
            "factoryObj.factoryIndex": factoryIndex,
            "factoryObj.defaultStorage": storageName,
            "factoryObj.storageIndex": storageIndex
        });
    },

    // 选择仓库
    selectStorage: function(e) {
        var storageName = e.currentTarget.dataset.name;
        var storageIndex = e.currentTarget.dataset.index;
        this.setData({
            "factoryObj.defaultStorage": storageName,
            "factoryObj.storageIndex": storageIndex
        });
    },

    // 关闭工厂弹框
    closeFactoryMask: function() {
        this.setData({
            isShowStorage: false
        });
        wx.setNavigationBarTitle({
          title: '产品入库作业',
        });
    },

    // 默认当天
    getNowDate: function() {
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        var day = nowDate.getDate();
        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        var date = year + "-" + month + "-" + day;
        this.setData({
            date: date
        });
    },
    
    // 选择日期
    selectDate: function(e) {
        this.setData({
            date: e.detail.value
        });
    },    

    // 扫描
    scanCode: function(e) {
        var that = this;
        var dataInfo = [
            { "id": 1,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" },
            { "id": 3,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }
        ];
        wx.scanCode({
            success(res) {
                wx.showToast({
                    title: "加载中……",
                    icon: "loading",
                    duration: 400
                  })
                dataInfo = that.data.dataLst.concat(dataInfo);
                console.log(dataInfo.length);
                that.setData({
                    dataLst: dataInfo 
                });
            },
            fail(res) {
                wx.showToast({
                  title: "扫码失败",
                  icon: "none",
                  duration: 1000
                })
            }
        })
    },

    // 清空
    showEmptyBox: function() {
        this.setData({
            isShowEmptyMask: true
        });
    },    

    // 取消清空
    cancelEmpty: function() {
        this.setData({
            isShowEmptyMask: false
        })
    },

    // 确认清空
    emptyData: function() {
        var that = this;
        that.setData({
            dataLst: [],
            "operateTip.isShowTip": true,
            "operateTip.tipTxt": "清空完成",
            isShowEmptyMask: false
        });
        that.hideOperateTip();
    },

    // 提交
    submitData: function() {
        var that = this;
        that.setData({
            dataLst: [],
            "operateTip.isShowTip": true,
            "operateTip.tipTxt": "已提交保存",
        });
        that.hideOperateTip();
    },

    // 撤销扫描
    // 使用场景————对已经通过扫码进来的数据重新扫描后会根据单号删除列表对应数据，例如要取消 G 项数据，但列表内容太多、难找时，可应用撤销扫描。
    cancelScan: function(e) {
        var that = this;
        that.setData({
            isCancelScan: !that.data.isCancelScan
        });
    },

    // 删除数据
    deleteData: function(e) {
        var that = this;
        var index = e.currentTarget.dataset.index;
        that.data.dataLst.splice(index, 1);
        that.setData({
            dataLst: that.data.dataLst,
            "operateTip.isShowTip": true,
            "operateTip.tipTxt": "删除成功"
        });
        that.hideOperateTip();
    },

    // 关闭操作提示 ———— 关闭时间同 wxss 动画设置时间一致
    hideOperateTip: function() {
        var that = this;
        setTimeout(function() {
            that.setData({
                "operateTip.isShowTip": false,
                "operateTip.tipTxt": "",
            });
        }, 1000)
    },

    // 页面滚动
    onPageScroll: function(e) {
        var that = this;
        if(e.scrollTop >= 200) {
            that.setData({
                isScroll: true
            });
        } else {
            that.setData({
                isScroll: false
            });
        }
    },

    // 置顶
    goTop: function() {
        if(wx.pageScrollTo) {
            wx.pageScrollTo({
                scrollTop: 0,
                duration: 300
            });
        }
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

 

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad {box-sizing:border-box;padding:0;margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height: 1;}
page {
    position: relative;
    background-color: #f5f5f5;
}

.btnActive:active { filter: opacity(.85);}

/* 顶部 */
.fixHead {
    position: fixed;
    display: grid;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    grid-template-columns: 60.5% 39.5%;
    justify-content: space-between;
    align-items: center;
    grid-row-gap: 20rpx;
    padding: 30rpx 30rpx 20rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #fff;
}

.selectFactory { grid-column-start: span 2;}

.factoryName,
.storageName,
.dateTxt {
    display: inline-block;
    position: relative;
    height: 70rpx;
    padding: 0 20rpx;
    margin-left: 10rpx;
    line-height: 70rpx;
    font-weight: 700;
    border-radius: 10rpx;
    background-color: #f5f5f5;
}

.factoryName {width: 628rpx;}
.storageName {width: 336rpx;}
.dateTxt {width: 210rpx;}

.factoryName::after,
.storageName::after,
.dateTxt::after {
    position: absolute;
    top: 42%;
    right: 20rpx;
    content: "";
    width: 10rpx;
    height: 10rpx;
    color: #399EFF;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(45deg);
}

.selectAllBtn {
    grid-column-start: span 2;
    text-align: right;
    color: #a3a3a3;
}

.selectAllBtn ~ .scannedNum,
.selectAllBtn ~ .cancelScan {
    display: none;
}

.scannedNum {font-weight: 800;}
.cancelScan {
    width: 203rpx;
    height: 50rpx;
    margin-left: auto;
    line-height: 50rpx;
    text-align: center;
    font-weight: 700;
    color: #7f7f7f;
    background-color: #f5f5f5;
    border-radius: 6rpx;
    transition: all .2s;
}

.doCancelScan {
    color: #399EFF;
    background-color: #ECF6FF;
}

.checkbox {
    width: 28rpx;
    height: 28rpx;
    margin-left: 28rpx;
    vertical-align: 4rpx;
}

.checkbox .wx-checkbox-input {
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
}

.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background-color: #399EFF;
    border-color: #399EFF;
    transition: all .3s;
}

.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 28rpx;
    height: 28rpx;
    line-height: 30rpx;
    font-size: 30rpx;
    color: #fff;
}

/* 成品项 */
.dataWrapper {
    position: relative;
    height: 100%;
    padding: 310rpx 0 130rpx;
}
.dataEmpty {padding-top: 290rpx;}

.endTip::before, .endTip::after {
    position: absolute;
    top: 50%;
    content: "";
    width: 34%;
    border-bottom: 2rpx solid #EBEBEB;
    transform: scaleY(.5) translateY(-50%);
}

.endTip::before {left: 0;}
.endTip::after {right: 0;}

.dataItem {
    position: relative;
    width: 92%;
    padding: 26rpx 20rpx 10rpx 30rpx;
    margin: 0 auto 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
}

.dataNo {
    display: block;
    padding-bottom: 26rpx;
    line-height: inherit;
    font-size: 30rpx;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
}

.dataRow { display: flex;  margin-bottom: 14rpx;}

.customerName, .specification { padding-bottom: 14rpx;}

.customerName, .itemTxt, .specification{
    display: block;
    flex-shrink: 0;
    line-height: 1.3;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 26rpx;
    color: #7F7F7F;
}

.batchNo {
    min-width: 370rpx;
    max-width: 450rpx;
    padding-right: 20rpx;
}

.dataNum { flex: 1 0 0; }

.checkDelete {
    position: absolute;
    top: 24rpx;
    right: 30rpx;
}

.deleteBtn:not([size=mini]) {
    position: absolute;
    right: 20rpx;
    bottom: 30rpx;
    width: 50rpx;
    height: 50rpx;
    padding: 0;
    margin: 0;
    line-height: 47rpx;
    background-color: #EBEBEB;
}

.deleteBtn:active {background-color: #d6d4d4;}

.iconDelete {width: 23rpx; height: 23rpx;}

.endTip {
    position: relative;
    width: 92%;
    margin: 0 auto;
    font-size: 26rpx;
    text-align: center;
    color: #7F7F7F;
}

/* 厂别、仓库选择 */
.storageWrapper {
    position: fixed;
    display: flex;
    top: 0;
    left: 100%;
    z-index: 10;
    width: 100%;
    height: 100%;
    padding-bottom: 96rpx;
    visibility: hidden;
    opacity: 1;
    background-color: #f5f5f5;
}

.showStorageMask {
    left: 0;
    visibility: visible;
    opacity: 1;
    transition: left .3s;
}

.factoryContain {
    overflow: auto;
    width: 43.2%;
    height: 100%;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.factoryContain::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.storageContain {
    overflow: auto;
    width: 56.8%;
    height: 100%;
    padding: 20rpx 20rpx 0;
    -webkit-overflow-scrolling: touch;
}

.factoryOption {
    display: block;
    width: 100%;
    padding: 24rpx 32rpx 24rpx;
    line-height: 1.5;
    font-size: 26rpx;
    text-align: center;
    color: #333;
    transition: all .35s, background-color .55s;
}

.defaultFactory {
    font-weight: 800;
    color: #399EFF;
    background-color: #f5f5f5;
}

.storageOption {
    display: block;
    padding: 23rpx 20rpx;
    margin-bottom: 30rpx;
    line-height: 1.5;
    font-size: 28rpx;
    border-radius: 10rpx;
    background-color: #fff;
    transition: all .2s, background-color .35s;
}

.defaultStorage {
    color: #fff;
    background-color: #399EFF;
}

.footBtn {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 98rpx;
    padding: 10rpx 30rpx;
    background-color: #fff;
}

.okBtn[size=default] {
    width: 100%;
    height: 78rpx;
    padding: 0;
    line-height: 78rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #fff;
    background-color: #3FB2FF;
    border-radius: 39rpx;
}

/* 底部 */
.fixFoot {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 98rpx;
    padding: 0 30rpx;
    background-color: #fff;
}

.emptyBtn:not([size=mini]),
.submitBtn:not([size=mini]),
.scanBtn:not([size=mini]) {
    width: 222rpx;
    height: 78rpx;
    padding: 0;
    margin: 0;
    line-height: 78rpx;
    font-size: 30rpx;
    font-weight: 400;
    border-radius: 39rpx;
}

.emptyBtn, .submitBtn {
    pointer-events: none;
    color: #7F7F7F;
    background-color: #f5f5f5;
    transition: all .3s;
}

.doEmpty {
    pointer-events: initial;
    color: #fff;
    background-color: #576B95;
}

.doSubmit {
    pointer-events: initial;
    color: #fff;
    background-color: #399EFF;
}

.scanBtn {
    color: #fff;
    background-color: #399EFF;
}

.iconScan {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
    vertical-align: -5rpx;
}

/* 操作提示 */
.operateTip {
    position: fixed;
    left: 50%;
    bottom: 128rpx;
    min-width: 192rpx;
    height: 57rpx;
    padding: 0 20rpx;
    line-height: 57rpx;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    background-color: rgba(51,51,51,.7);
    border-radius: 10rpx;
    transform: translateX(-50%);
}

.showOperateTip {animation: showTip 1s;}

@keyframes showTip {
    0% { visibility: hidden;opacity: 0; }
    100% { visibility: visible;opacity: 1; }
}

/* 删除提示 */
.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0,0,0,.2);
}

.confirmBox {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: 640rpx;
    height: 274rpx;
    padding: 30rpx;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    background-color: #fff;
    border-radius: 24rpx;
    transform: translate(-50%, -50%);
}

.showMask {
    visibility: visible;
    opacity: 1;
    transition: all .15s;
}

.showConfirmBox {
    visibility: visible;
    opacity: 1;
    transition: all .4s;
}

.confirmTip {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
}

.confirmTxt {
    padding: 50rpx 0 50rpx;
    font-size: 26rpx;
}

.cancelBtn[size=mini], 
.confirmBtn[size=mini] {
    width: 50%;
    font-size: 30rpx;
    background-color: #fff;
}
.confirmBtn {color: #399EFF;}

.cancelBtn:active,
.confirmBtn:active {
    background-color: #f5f5f5;
}

/* 为空提示 */
.nothingBox {
    width: 400rpx;
    padding-top: 60%;
    margin: 0 auto;
    text-align: center;
}

.nothingPic {
    width: 400rpx;
    height: 400rpx;
}

.nothingTip {
    font-size: 26rpx;
    color: #7f7f7f;
}

/* 置顶 */
.goTopBtn {
    position: fixed;
    bottom: 190rpx;
    width: 74rpx;
    height: 74rpx;
    line-height: 5;
    font-size: 20rpx;
    text-align: center;
    color: #fff;
    background-color: #2C8CFD;
    border-radius: 10rpx 0 0 10rpx;
    transition: all .3s;
}

.hideGoTop { right: -74rpx; opacity: 0;}
.showGoTop { right: 0; opacity: .85;}

.goTopBtn::before {
    position: absolute;
    top: 20rpx;
    left: 50%;
    z-index: 6;
    content: '';
    width: 20rpx;
    height: 20rpx;
    color: #fff;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: translateX(-50%) rotate(-45deg);
}
.goTopBtn:active {
    opacity: .7;
    transition: all .2s;
}

 

示例：