添加设备列表，添加待配送订单

Liuyi

2024-10-08 404ebee9f47d2d80353e64974193e3e31e7b91b6

添加设备列表，添加待配送订单

 pages.json

@@ -71,6 +71,12 @@
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/deviceList/index",
            "style": {
                "navigationStyle":"custom"
            }
        }
    ],
    "globalStyle": {

 pages/deviceList/index.vue

对比新文件
@@ -0,0 +1,111 @@
<template>
    <view class="container">
        <navbar title = '设备列表'></navbar>
        <view class="content">
            <view class="list">
                <block v-for="(item,index) in deviceList" :key="index">
                    <view class="item">
                        <view class="item-img">
                            <image src="../../static/logo.png" alt=''></image>
                        </view>
                        <view class="item-info">
                            <view class="info-name">{{item.name}}</view>
                            <view class="info-addr">
                                <text class="addr-text">地址：{{item.address}}</text>
                                <view>
                                    <image src="../../static/images/index/icon22.png" alt=''></image>
                                    <text>{{item.distance}}km</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    const deviceList = ref([
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道工业互联网产业园',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
        {name:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
    ])
</script>

<style lang="scss">
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            padding:32rpx 32rpx 100rpx;
            box-sizing: border-box;
            .list{
                width:100%;
                height:100%;
                overflow: scroll;
                // background-color: #f1ffef;
                .item{
                    height:200rpx;
                    width:100%;
                    background-color: #FFFFFF;
                    border-radius: 24rpx;
                    padding:0 20rpx;
                    margin-bottom:20rpx;
                    box-sizing: border-box;
                    display: flex;
                    align-items:center;
                    .item-img{
                        image{
                            width:130rpx;
                            height: 130rpx;
                        }
                    }
                    .item-info{
                        display: flex;
                        flex-direction: column;
                        margin-left:20rpx;
                        justify-content: space-between;
                        .info-name{
                            color:#222c35;
                        }
                        .info-addr{
                            display: flex;
                            justify-content: space-between;
                            align-items:center;
                            .addr-text{
                                width:340rpx;
                                height:80rpx;
                                color: #6a6e75;
                                font-size:26rpx;
                            }
                            view{
                                display: flex;
                                justify-content: space-between;
                                align-items:center;
                                image{
                                    width:50rpx;
                                    height:50rpx;
                                }
                                text{
                                    color: #6a6e75;
                                    font-size:26rpx;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 pages/index/index.vue

@@ -48,9 +48,17 @@
     * 扫码取水相关
     */
    function toScan(){
        uni.navigateTo({
            url:'/pages/scanWater/index'
        })
        // 调用二维码扫描接口
        uni.scanCode({
            scanType: ['qrCode'],
            success: function (res) {
                console.log('条码类型：' + res.scanType);
                console.log('条码内容：' + res.result);
                uni.navigateTo({
                    url:'/pages/scanWater/index'
                })
            }
        });
    }
    /**
     * 功能列表相关
@@ -90,11 +98,11 @@
    }
    onMounted( async() =>{
        getTopHeight()
        await getInfo()
        // await getInfo()
        // await getUserLocation()
    })
    onShow(async() =>{
    await getInfo()
        await getInfo()
    })
</script>

@@ -120,8 +128,14 @@
                            <view class="left-bottom">电话：{{cardInfo.userPhone}}</view>
                        </view>
                        <view class="card-right">
                            <view>金额卡</view>
                            <view>
                            <view class="card-right-top">
                                <view @click="navTo('/pages/addCard/index')">
                                    <image src='../../static/images/index/vip-add.png' alt=''></image>
                                    <span>添加会员卡</span>
                                </view>
                                <span>金额卡</span>
                            </view>
                            <view @click="navTo('/pages/recharge/index')">
                                <span>余额：</span>
                                <span class="card-balance">{{cardInfo.balance}}</span>
                                <span>元</span>
@@ -135,15 +149,17 @@
                    <image src="../../static/images/index/home21.png" alt=""></image>
                    <view>送水到家</view>
                </view>
                <view class="box1-bg box1-two">
                    <view>账户余额（元)</view>
                <view @click="navTo('/pages/deviceList/index')" class="box1-bg box1-two">
                    <image src="../../static/images/index/icon22.png" alt=""></image>
                    <view>附近设备</view>
                    <!-- <view>账户余额（元)</view>
                    <view class="recharge">
                        <text>￥</text>
                        <text>120.00</text>
                    </view>
                    <view @click="navTo('/pages/recharge/index')">
                        充值
                    </view>
                    </view> -->
                </view>
                <view class="box1-bg box1-three" @click="toScan()">
                    <image src="../../static/images/index/icon23.png" alt=""></image>
@@ -297,6 +313,27 @@
                            align-items:flex-end;
                            flex-direction: column;
                            height:100%;
                            .card-right-top{
                                align-items: center;
                                display: flex;
                                justify-content: space-between;
                                view{
                                    background-color: #fff;
                                    color: #5EA1FA;
                                    border-radius:20rpx;
                                    padding: 5rpx 8rpx;
                                    align-items: center;
                                    display: flex;
                                    justify-content: space-around;
                                    font-size:24rpx;
                                    margin-right:10rpx;
                                    image{
                                            width:28rpx;
                                            height:28rpx;
                                            margin-right:10rpx;
                                    }
                                }
                            }
                            .card-balance{
                                font-weight:600;
                            }
@@ -336,45 +373,51 @@
                    }
                }
                .box1-two{
                    box-sizing: border-box;
                    padding:25rpx 0 10rpx;
                    font-weight: 300;
                    font-size: 32rpx;
                    color: #000000;
                    display: flex;
                    flex-direction:column;
                    align-items:center;
                    justify-content:space-around;
                    view:first-child{
                        font-weight: 300;
                        font-size: 24rpx;
                        color: #464646;
                        text-align: center;
                        margin-bottom:10rpx;
                    justify-content:space-evenly;
                    image{
                        width:96rpx;
                        height: 96rpx;
                        // margin-bottom:20rpx;
                    }
                    .recharge{
                        text:first-child{
                            font-weight: 500;
                            font-size: 32rpx;
                            color: #000;
                        }
                        text:last-child{
                            font-weight: 300;
                            font-size: 32rpx;
                            color: #2269E5;
                        }
                    }
                    view:last-child{
                        width: 140rpx;
                        height: 80rpx;
                        font-weight:300;
                        font-size: 24rpx;
                        color: #000141;
                        background-image: url('../../static/images/index/icon22.png');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100% 100%;
                        text-align:center;
                        line-height:80rpx;
                        margin-top:10rpx;
                    }
                    // view:first-child{
                    //     font-weight: 300;
                    //     font-size: 24rpx;
                    //     color: #464646;
                    //     text-align: center;
                    //     margin-bottom:10rpx;
                    // }
                    // .recharge{
                    //     text:first-child{
                    //         font-weight: 500;
                    //         font-size: 32rpx;
                    //         color: #000;
                    //     }
                    //     text:last-child{
                    //         font-weight: 300;
                    //         font-size: 32rpx;
                    //         color: #2269E5;
                    //     }
                    // }
                    // view:last-child{
                    //     width: 140rpx;
                    //     height: 70rpx;
                    //     font-weight:300;
                    //     font-size: 24rpx;
                    //     color: #000141;
                    //     background-image: url('../../static/images/index/icon22.png');
                    //     background-repeat: no-repeat;
                    //     background-position: center;
                    //     background-size: 100% 100%;
                    //     text-align:center;
                    //     line-height:70rpx;
                    //     margin-top:10rpx;
                    // }
                }
                .box1-three{
                    font-weight: 300;

 pages/sendWater/index.vue

@@ -1,21 +1,75 @@
<script setup>
    import{ ref } from 'vue'
    function navTo(){
        uni.navigateTo({
            url:'/pages/preSendWater/index'
        })
    }
    const isComplete = ref(true)
    const isActive = ref({borderBottom:`3px solid #226AC9`})
    function swatch(val){
        if((val == 1 && !isComplete.value) || (val == 2 && isComplete.value)){
        }else if(val == 1){
            isComplete.value = false
        }else if(val == 2){
            isComplete.value = true
        }
    }
    //待配送
    const deliverList = ref([
        {count:'20',num:'132123123',addre1:'测试1',addre2:'测试2',time:'16：00-18：00'},
        {count:'20',num:'132123123',addre1:'测试1',addre2:'测试2',time:'16：00-18：00'},
        {count:'20',num:'132123123',addre1:'测试1',addre2:'测试2',time:'16：00-18：00'},
    ])
    //已完成
    const completeList = ref([1,2,3])
</script>
<template>
    <view class="container">
        <navbar title = '送水到家'></navbar>
        <view class="content">
            <view class="nav-container">
            <view class="nav">
                <view class="nav-title">
                    <view class="title-one" @click="navTo()">立即预约</view>
                    <view class="title-text">待配送</view>
                    <view class="title-text">已完成</view>
                    <view class="title-text" @click="swatch(1)" :style="!isComplete ? isActive : {}">待配送</view>
                    <view class="title-text" @click="swatch(2)" :style="isComplete ? isActive : {} ">已完成</view>
                </view>
                <view class="main1"></view>
            </view>
            <view v-if='!isComplete' class="main-deliving">
                <block v-for="(item,index) in deliverList" :key='index'>
                    <view class="item">
                        <view class="item-top">
                            <view class="top-left">
                                <text>{{item.count}}</text>
                                <text>桶</text>
                            </view>
                            <text class="top-right">订单编号：{{item.num}}</text>
                        </view>
                        <view class="item-content">
                            <view class="item-one">
                                <view class="item-color1">取</view>
                                <text>{{item.addre1}}</text>
                            </view>
                            <view class="line"></view>
                            <view class="item-one">
                                <view class="item-color2">送</view>
                                <text>{{item.addre2}}</text>
                            </view>
                            <view class="line"></view>
                            <view class="item-one">
                                <view class="item-color3">达</view>
                                <text>预计今天{{item.time}}送达</text>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view v-else class="main-complete">
                    <block v-for="(item,index) in completeList" :key='index'>
                        <view class="item">
							
                        </view>
                    </block>
            </view>
        </view>
    </view>
@@ -29,7 +83,7 @@
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            .nav-container{
            .nav{
                height: 160rpx;
                width:100%;
                padding: 20rpx 0;
@@ -63,11 +117,100 @@
                        height:88rpx;
                        text-align: center;
                        line-height:88rpx;
                        border-bottom:6rpx solid #226AC9;
                    }
                }
            }
			
            .main-deliving{
                height:calc(100% - 320rpx);
                width:100%;
                padding:32rpx;
                overflow:scroll;
                box-sizing: border-box;
                .item{
                    width:100%;
                    height:420rpx;
                    background-color: #FFF;
                    margin-bottom:20rpx;
                    border-radius:24rpx;
                    .item-top{
                        width:100%;
                        height:88rpx;
                        border-bottom:2rpx solid #DFDFDF;
                        display:flex;
                        justify-content: space-between;
                        align-items: center;
                        .top-left{
                            margin-left:52rpx;
                            font-weight: 300;
                            font-size: 28rpx;
                            color: #000000;
                            text:first-child{
                                color: #FF3400;
                            }
                        }
                        .top-right{
                            margin-right:22rpx;
                            font-weight: 300;
                            font-size: 24rpx;
                            color: #4D4D4D;
                        }
                    }
                    .item-content{
                        width:100%;
                        height:330rpx;
                        padding:50rpx 46rpx;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        .item-one{
                            display: flex;
                            align-items: center;
                            view{
                                width:52rpx;
                                height:52rpx;
                                text-align: center;
                                line-height:52rpx;
                                border-radius:50%;
                                color:#fff;
                                font-size:24rpx;
                                margin-right:32rpx;
                            }
                            text{
                                font-size:28rpx;
                            }
                            .item-color1{
                                background-color: #189Df5;
                            }
                            .item-color2{
                                background-color: #32CB65;
                            }
                            .item-color3{
                                background-color: #DCDCDC;
                            }
                        }
                        .line{
                            height:40rpx;
                            width:2rpx;
                            background-color: #707070;
                            margin-left:25rpx;
                        }
                    }
                }
            }
            .main-complete{
                height:calc(100% - 320rpx);
                width:100%;
                padding:32rpx;
                overflow:scroll;
                box-sizing: border-box;
                .item{
                    width:100%;
                    height:420rpx;
                    background-color: #FFF;
                    margin-bottom:20rpx;
                    border-radius:24rpx;
                }
            }
        }
    }       
</style>

 static/images/index/icon22.png

 unpackage/dist/dev/mp-weixin/app.js

@@ -15,6 +15,7 @@
  "./pages/addressAdd/index.js";
  "./pages/addressLocate/index.js";
  "./pages/success/index.js";
  "./pages/deviceList/index.js";
}
const _sfc_main = {
  __name: "App",

 unpackage/dist/dev/mp-weixin/app.json

@@ -11,7 +11,8 @@
    "pages/address/index",
    "pages/addressAdd/index",
    "pages/addressLocate/index",
    "pages/success/index"
    "pages/success/index",
    "pages/deviceList/index"
  ],
  "window": {
    "navigationStyle": "custom"

 unpackage/dist/dev/mp-weixin/common/assets.js

@@ -1,13 +1,15 @@
"use strict";
const _imports_0$6 = "/static/images/index/hend1.png";
const _imports_1$2 = "/static/images/index/back.png";
const _imports_1$3 = "/static/images/index/back.png";
const _imports_2 = "/static/images/index/code1.png";
const _imports_3 = "/static/images/index/home21.png";
const _imports_4 = "/static/images/index/icon23.png";
const _imports_5 = "/static/images/index/bg4.png";
const _imports_6 = "/static/images/index/icon51.png";
const _imports_7 = "/static/images/index/more-info5.png";
const _imports_8 = "/static/images/index/notice5.png";
const _imports_3 = "/static/images/index/vip-add.png";
const _imports_4 = "/static/images/index/home21.png";
const _imports_1$2 = "/static/images/index/icon22.png";
const _imports_6 = "/static/images/index/icon23.png";
const _imports_7 = "/static/images/index/bg4.png";
const _imports_8 = "/static/images/index/icon51.png";
const _imports_9 = "/static/images/index/more-info5.png";
const _imports_10 = "/static/images/index/notice5.png";
const _imports_0$5 = "/static/images/addCard/code.png";
const _imports_0$4 = "/static/logo.png";
const _imports_1$1 = "/static/images/other/more.png";
@@ -23,13 +25,15 @@
exports._imports_0$4 = _imports_0$3;
exports._imports_0$5 = _imports_0$2;
exports._imports_0$6 = _imports_0$1;
exports._imports_1 = _imports_1$2;
exports._imports_1$1 = _imports_1$1;
exports._imports_1$2 = _imports_1;
exports._imports_1 = _imports_1$3;
exports._imports_1$1 = _imports_1$2;
exports._imports_1$2 = _imports_1$1;
exports._imports_1$3 = _imports_1;
exports._imports_10 = _imports_10;
exports._imports_2 = _imports_2;
exports._imports_3 = _imports_3;
exports._imports_4 = _imports_4;
exports._imports_5 = _imports_5;
exports._imports_6 = _imports_6;
exports._imports_7 = _imports_7;
exports._imports_8 = _imports_8;
exports._imports_9 = _imports_9;

 unpackage/dist/dev/mp-weixin/pages/address/index.js

@@ -89,7 +89,7 @@
          };
        }),
        c: common_assets._imports_0$4,
        d: common_assets._imports_1$2,
        d: common_assets._imports_1$3,
        e: common_vendor.o(($event) => navToAdd())
      };
    };

 unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -41,8 +41,15 @@
      common_vendor.index.setStorageSync("userInfo", JSON.stringify(cardInfo.value));
    }
    function toScan() {
      common_vendor.index.navigateTo({
        url: "/pages/scanWater/index"
      common_vendor.index.scanCode({
        scanType: ["qrCode"],
        success: function(res) {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          common_vendor.index.navigateTo({
            url: "/pages/scanWater/index"
          });
        }
      });
    }
    const functionList = common_vendor.ref([
@@ -64,7 +71,6 @@
    }
    common_vendor.onMounted(async () => {
      getTopHeight();
      await getInfo();
    });
    common_vendor.onShow(async () => {
      await getInfo();
@@ -78,14 +84,18 @@
        e: common_assets._imports_2,
        f: common_vendor.t(cardInfo.value.waterCardNumber),
        g: common_vendor.t(cardInfo.value.userPhone),
        h: common_vendor.t(cardInfo.value.balance),
        i: topHeight.value + "rpx",
        j: common_assets._imports_3,
        k: common_vendor.o(($event) => navTo("/pages/sendWater/index")),
        l: common_vendor.o(($event) => navTo("/pages/recharge/index")),
        h: common_assets._imports_3,
        i: common_vendor.o(($event) => navTo("/pages/addCard/index")),
        j: common_vendor.t(cardInfo.value.balance),
        k: common_vendor.o(($event) => navTo("/pages/recharge/index")),
        l: topHeight.value + "rpx",
        m: common_assets._imports_4,
        n: common_vendor.o(($event) => toScan()),
        o: common_vendor.f(functionList.value, (item, index, i0) => {
        n: common_vendor.o(($event) => navTo("/pages/sendWater/index")),
        o: common_assets._imports_1$1,
        p: common_vendor.o(($event) => navTo("/pages/deviceList/index")),
        q: common_assets._imports_6,
        r: common_vendor.o(($event) => toScan()),
        s: common_vendor.f(functionList.value, (item, index, i0) => {
          return {
            a: item.icon,
            b: common_vendor.t(item.text),
@@ -93,11 +103,11 @@
            d: index
          };
        }),
        p: common_assets._imports_5,
        q: common_assets._imports_6,
        r: common_assets._imports_7,
        s: common_assets._imports_8,
        t: common_assets._imports_7
        t: common_assets._imports_7,
        v: common_assets._imports_8,
        w: common_assets._imports_9,
        x: common_assets._imports_10,
        y: common_assets._imports_9
      };
    };
  }

 unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + i}}"><view class="user-info data-v-1cf27b2a" bindtap="{{d}}"><image class="user-img data-v-1cf27b2a" src="{{a}}" alt=""></image><text class="data-v-1cf27b2a">{{b}}</text><image class="user-more data-v-1cf27b2a" src="{{c}}"></image></view><view class="card data-v-1cf27b2a"><view class="card-content data-v-1cf27b2a"><view class="card-left data-v-1cf27b2a"><view class="left-top data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}" alt=""></image><text class="data-v-1cf27b2a">会员卡</text></view><view class="data-v-1cf27b2a">ID:{{f}}</view></view><view class="left-bottom data-v-1cf27b2a">电话：{{g}}</view></view><view class="card-right data-v-1cf27b2a"><view class="data-v-1cf27b2a">金额卡</view><view class="data-v-1cf27b2a"><label class="data-v-1cf27b2a">余额：</label><label class="card-balance data-v-1cf27b2a">{{h}}</label><label class="data-v-1cf27b2a">元</label></view></view></view></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg box1-one data-v-1cf27b2a" bindtap="{{k}}"><image class="data-v-1cf27b2a" src="{{j}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view><view class="box1-bg box1-two data-v-1cf27b2a"><view class="data-v-1cf27b2a">账户余额（元)</view><view class="recharge data-v-1cf27b2a"><text class="data-v-1cf27b2a">￥</text><text class="data-v-1cf27b2a">120.00</text></view><view class="data-v-1cf27b2a" bindtap="{{l}}"> 充值 </view></view><view class="box1-bg box1-three data-v-1cf27b2a" bindtap="{{n}}"><image class="data-v-1cf27b2a" src="{{m}}" alt=""></image><view class="data-v-1cf27b2a">扫码取水</view></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{o}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view><view class="advertisement-box data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{p}}" alt=""></image></view><view class="service-box data-v-1cf27b2a"><view class="service-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">服务指南</text></view><view class="service-content data-v-1cf27b2a"><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{q}}" alt=""></image><text class="data-v-1cf27b2a">附近站点</text></view><view class="service-info data-v-1cf27b2a">蔡家供水服务中心正在营业中……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{r}}" alt=""></image></view></view><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{s}}" alt=""></image><text class="data-v-1cf27b2a">公示公告</text></view><view class="service-info data-v-1cf27b2a">停水公告的部分摘要的内容展示……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{t}}" alt=""></image></view></view></view></view></view></view>
<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + l}}"><view class="user-info data-v-1cf27b2a" bindtap="{{d}}"><image class="user-img data-v-1cf27b2a" src="{{a}}" alt=""></image><text class="data-v-1cf27b2a">{{b}}</text><image class="user-more data-v-1cf27b2a" src="{{c}}"></image></view><view class="card data-v-1cf27b2a"><view class="card-content data-v-1cf27b2a"><view class="card-left data-v-1cf27b2a"><view class="left-top data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}" alt=""></image><text class="data-v-1cf27b2a">会员卡</text></view><view class="data-v-1cf27b2a">ID:{{f}}</view></view><view class="left-bottom data-v-1cf27b2a">电话：{{g}}</view></view><view class="card-right data-v-1cf27b2a"><view class="card-right-top data-v-1cf27b2a"><view class="data-v-1cf27b2a" bindtap="{{i}}"><image class="data-v-1cf27b2a" src="{{h}}" alt=""></image><label class="data-v-1cf27b2a">添加会员卡</label></view><label class="data-v-1cf27b2a">金额卡</label></view><view class="data-v-1cf27b2a" bindtap="{{k}}"><label class="data-v-1cf27b2a">余额：</label><label class="card-balance data-v-1cf27b2a">{{j}}</label><label class="data-v-1cf27b2a">元</label></view></view></view></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg box1-one data-v-1cf27b2a" bindtap="{{n}}"><image class="data-v-1cf27b2a" src="{{m}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view><view bindtap="{{p}}" class="box1-bg box1-two data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{o}}" alt=""></image><view class="data-v-1cf27b2a">附近设备</view></view><view class="box1-bg box1-three data-v-1cf27b2a" bindtap="{{r}}"><image class="data-v-1cf27b2a" src="{{q}}" alt=""></image><view class="data-v-1cf27b2a">扫码取水</view></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{s}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view><view class="advertisement-box data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{t}}" alt=""></image></view><view class="service-box data-v-1cf27b2a"><view class="service-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">服务指南</text></view><view class="service-content data-v-1cf27b2a"><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{v}}" alt=""></image><text class="data-v-1cf27b2a">附近站点</text></view><view class="service-info data-v-1cf27b2a">蔡家供水服务中心正在营业中……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{w}}" alt=""></image></view></view><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{x}}" alt=""></image><text class="data-v-1cf27b2a">公示公告</text></view><view class="service-info data-v-1cf27b2a">停水公告的部分摘要的内容展示……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{y}}" alt=""></image></view></view></view></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -114,6 +114,27 @@
  flex-direction: column;
  height: 100%;
}
.container .content .card-box .card .card-content .card-right .card-right-top.data-v-1cf27b2a {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.container .content .card-box .card .card-content .card-right .card-right-top view.data-v-1cf27b2a {
  background-color: #fff;
  color: #5EA1FA;
  border-radius: 20rpx;
  padding: 5rpx 8rpx;
  align-items: center;
  display: flex;
  justify-content: space-around;
  font-size: 24rpx;
  margin-right: 10rpx;
}
.container .content .card-box .card .card-content .card-right .card-right-top view image.data-v-1cf27b2a {
  width: 28rpx;
  height: 28rpx;
  margin-right: 10rpx;
}
.container .content .card-box .card .card-content .card-right .card-balance.data-v-1cf27b2a {
  font-weight: 600;
}
@@ -149,43 +170,17 @@
  margin-bottom: 20rpx;
}
.container .content .function-box1 .box1-two.data-v-1cf27b2a {
  box-sizing: border-box;
  padding: 25rpx 0 10rpx;
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  justify-content: space-evenly;
}
.container .content .function-box1 .box1-two view.data-v-1cf27b2a:first-child {
  font-weight: 300;
  font-size: 24rpx;
  color: #464646;
  text-align: center;
  margin-bottom: 10rpx;
}
.container .content .function-box1 .box1-two .recharge text.data-v-1cf27b2a:first-child {
  font-weight: 500;
  font-size: 32rpx;
  color: #000;
}
.container .content .function-box1 .box1-two .recharge text.data-v-1cf27b2a:last-child {
  font-weight: 300;
  font-size: 32rpx;
  color: #2269E5;
}
.container .content .function-box1 .box1-two view.data-v-1cf27b2a:last-child {
  width: 140rpx;
  height: 80rpx;
  font-weight: 300;
  font-size: 24rpx;
  color: #000141;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  line-height: 80rpx;
  margin-top: 10rpx;
.container .content .function-box1 .box1-two image.data-v-1cf27b2a {
  width: 96rpx;
  height: 96rpx;
}
.container .content .function-box1 .box1-three.data-v-1cf27b2a {
  font-weight: 300;

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.js

@@ -16,13 +16,52 @@
        url: "/pages/preSendWater/index"
      });
    }
    const isComplete = common_vendor.ref(true);
    const isActive = common_vendor.ref({ borderBottom: `3px solid #226AC9` });
    function swatch(val) {
      if (val == 1 && !isComplete.value || val == 2 && isComplete.value)
        ;
      else if (val == 1) {
        isComplete.value = false;
      } else if (val == 2) {
        isComplete.value = true;
      }
    }
    const deliverList = common_vendor.ref([
      { count: "20", num: "132123123", addre1: "测试1", addre2: "测试2", time: "16：00-18：00" },
      { count: "20", num: "132123123", addre1: "测试1", addre2: "测试2", time: "16：00-18：00" },
      { count: "20", num: "132123123", addre1: "测试1", addre2: "测试2", time: "16：00-18：00" }
    ]);
    const completeList = common_vendor.ref([1, 2, 3]);
    return (_ctx, _cache) => {
      return {
      return common_vendor.e({
        a: common_vendor.p({
          title: "送水到家"
        }),
        b: common_vendor.o(($event) => navTo())
      };
        b: common_vendor.o(($event) => navTo()),
        c: common_vendor.o(($event) => swatch(1)),
        d: common_vendor.s(!isComplete.value ? isActive.value : {}),
        e: common_vendor.o(($event) => swatch(2)),
        f: common_vendor.s(isComplete.value ? isActive.value : {}),
        g: !isComplete.value
      }, !isComplete.value ? {
        h: common_vendor.f(deliverList.value, (item, index, i0) => {
          return {
            a: common_vendor.t(item.count),
            b: common_vendor.t(item.num),
            c: common_vendor.t(item.addre1),
            d: common_vendor.t(item.addre2),
            e: common_vendor.t(item.time),
            f: index
          };
        })
      } : {
        i: common_vendor.f(completeList.value, (item, index, i0) => {
          return {
            a: index
          };
        })
      });
    };
  }
};

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.wxml

@@ -1 +1 @@
<view class="container"><navbar wx:if="{{a}}" u-i="5d3da990-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="nav-container"><view class="nav-title"><view class="title-one" bindtap="{{b}}">立即预约</view><view class="title-text">待配送</view><view class="title-text">已完成</view></view><view class="main1"></view></view></view></view>
<view class="container"><navbar wx:if="{{a}}" u-i="5d3da990-0" bind:__l="__l" u-p="{{a}}"></navbar><view class="content"><view class="nav"><view class="nav-title"><view class="title-one" bindtap="{{b}}">立即预约</view><view class="title-text" bindtap="{{c}}" style="{{d}}">待配送</view><view class="title-text" bindtap="{{e}}" style="{{f}}">已完成</view></view></view><view wx:if="{{g}}" class="main-deliving"><block wx:for="{{h}}" wx:for-item="item" wx:key="f"><view class="item"><view class="item-top"><view class="top-left"><text>{{item.a}}</text><text>桶</text></view><text class="top-right">订单编号：{{item.b}}</text></view><view class="item-content"><view class="item-one"><view class="item-color1">取</view><text>{{item.c}}</text></view><view class="line"></view><view class="item-one"><view class="item-color2">送</view><text>{{item.d}}</text></view><view class="line"></view><view class="item-one"><view class="item-color3">达</view><text>预计今天{{item.e}}送达</text></view></view></view></block></view><view wx:else class="main-complete"><block wx:for="{{i}}" wx:for-item="item" wx:key="a"><view class="item"></view></block></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/sendWater/index.wxss

@@ -32,13 +32,13 @@
  height: calc(100vh - 176rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
}
.container .content .nav-container {
.container .content .nav {
  height: 160rpx;
  width: 100%;
  padding: 20rpx 0;
  box-sizing: border-box;
}
.container .content .nav-container .nav-title {
.container .content .nav .nav-title {
  width: 100%;
  background: #FFF;
  padding: 0 32rpx;
@@ -48,7 +48,7 @@
  justify-content: space-between;
  align-items: center;
}
.container .content .nav-container .nav-title .title-one {
.container .content .nav .nav-title .title-one {
  height: 60rpx;
  width: 160rpx;
  background: #DEEDFF;
@@ -60,7 +60,7 @@
  font-size: 28rpx;
  color: #007EFF;
}
.container .content .nav-container .nav-title .title-text {
.container .content .nav .nav-title .title-text {
  font-weight: 300;
  font-size: 28rpx;
  color: #000000;
@@ -68,5 +68,95 @@
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  border-bottom: 6rpx solid #226AC9;
}
.container .content .main-deliving {
  height: calc(100% - 320rpx);
  width: 100%;
  padding: 32rpx;
  overflow: scroll;
  box-sizing: border-box;
}
.container .content .main-deliving .item {
  width: 100%;
  height: 420rpx;
  background-color: #FFF;
  margin-bottom: 20rpx;
  border-radius: 24rpx;
}
.container .content .main-deliving .item .item-top {
  width: 100%;
  height: 88rpx;
  border-bottom: 2rpx solid #DFDFDF;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .content .main-deliving .item .item-top .top-left {
  margin-left: 52rpx;
  font-weight: 300;
  font-size: 28rpx;
  color: #000000;
}
.container .content .main-deliving .item .item-top .top-left text:first-child {
  color: #FF3400;
}
.container .content .main-deliving .item .item-top .top-right {
  margin-right: 22rpx;
  font-weight: 300;
  font-size: 24rpx;
  color: #4D4D4D;
}
.container .content .main-deliving .item .item-content {
  width: 100%;
  height: 330rpx;
  padding: 50rpx 46rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.container .content .main-deliving .item .item-content .item-one {
  display: flex;
  align-items: center;
}
.container .content .main-deliving .item .item-content .item-one view {
  width: 52rpx;
  height: 52rpx;
  text-align: center;
  line-height: 52rpx;
  border-radius: 50%;
  color: #fff;
  font-size: 24rpx;
  margin-right: 32rpx;
}
.container .content .main-deliving .item .item-content .item-one text {
  font-size: 28rpx;
}
.container .content .main-deliving .item .item-content .item-one .item-color1 {
  background-color: #189Df5;
}
.container .content .main-deliving .item .item-content .item-one .item-color2 {
  background-color: #32CB65;
}
.container .content .main-deliving .item .item-content .item-one .item-color3 {
  background-color: #DCDCDC;
}
.container .content .main-deliving .item .item-content .line {
  height: 40rpx;
  width: 2rpx;
  background-color: #707070;
  margin-left: 25rpx;
}
.container .content .main-complete {
  height: calc(100% - 320rpx);
  width: 100%;
  padding: 32rpx;
  overflow: scroll;
  box-sizing: border-box;
}
.container .content .main-complete .item {
  width: 100%;
  height: 420rpx;
  background-color: #FFF;
  margin-bottom: 20rpx;
  border-radius: 24rpx;
}

 unpackage/dist/dev/mp-weixin/static/images/index/icon22.png