feat(单次洗车): 实现单次洗车功能并优化界面样式

- 新增单次洗车页面，包含金额选择、协议勾选和注意事项 - 调整首页扫码启动按钮为单次启动和余额启动双按钮 - 优化单次洗车页面样式和交互逻辑 - 移除首页单次消费弹窗及相关逻辑
2026-01-03 22:12:29 +08:00
parent ad4e2228a6
commit 30e8122c21
7 changed files with 371 additions and 290 deletions
--- a/pages/singleStart/singleStart.js
+++ b/pages/singleStart/singleStart.js
@@ -1,19 +1,126 @@
+var e = getApp(), t = require("../../utils/login.js");
+
 Page({
    data: {
        banner: [],
-        selectIndex: 0
+        list: [],
+        loading: !1,
+        message: "",
+        selectItemID: null,
+        approve: !0,
+        protocol: {
+            url: "",
+            name: "聚美汽服购买协议"
+        },
+        isSubmit: !1
    },
-    onLoad: function(n) {},
-    onReady: function() {},
-    onShow: function() {},
-    onHide: function() {},
-    onUnload: function() {},
-    onPullDownRefresh: function() {},
-    onReachBottom: function() {},
-    onShareAppMessage: function() {},
-    selectItem: function(n) {
+    onLoad: function () {
+        this.getAgentConfig();
+    },
+    getAgentConfig: function () {
+        var a = this;
+        if (a.data.loading) return !1;
+        a.setData({ loading: !0 });
+        var payload = {
+            number: e.globalData.deviceData.number || e.globalData.devicecode || "",
+            agentid: e.globalData.deviceData.agentid || "",
+            method: "POST"
+        };
+        t.request('/miniprogram/single/getAgentConfig', payload, !0).then(function (res) {
+            a.setData({ loading: !1 });
+            if (res.code != 200) {
+                a.setData({
+                    list: [],
+                    message: res.message || "加载失败"
+                });
+                return;
+            }
+            var list = (res.data || []).map(function (x, idx) {
+                x.selected = idx === 0;
+                return x;
+            });
+            a.setData({
+                list: list,
+                selectItemID: list.length ? list[0].id : null,
+                message: ""
+            });
+        }).catch(function () {
+            a.setData({
+                loading: !1,
+                list: [],
+                message: "网络异常，请稍后重试"
+            });
+        });
+    },
+    selectItem: function (n) {
+        var id = n.currentTarget.dataset.id;
+        var list = (this.data.list || []).map(function (x) {
+            x.selected = x.id == id;
+            return x;
+        });
+        this.setData({ selectItemID: id, list: list });
+    },
+    tobuyNow: function () {
+        if (!this.data.approve) return wx.showToast({
+            title: "请勾选同意相关条款",
+            icon: "none"
+        }), !1;
+        if (!this.data.selectItemID || this.data.isSubmit) return wx.showToast({
+            title: "请选择单次洗车金额~",
+            icon: "none"
+        }), !1;
+        var i = this, sel = (this.data.list || []).find(function (x) { return x.id == i.data.selectItemID; });
+        if (!sel || !sel.token) return wx.showToast({
+            title: "请选择有效档位~",
+            icon: "none"
+        }), !1;
+        this.setData({ isSubmit: !0 }), wx.showLoading({ title: "" });
+        t.request('/miniprogram/single/create', {
+            token: sel.token,
+            method: "POST"
+        }, !0).then(function (res) {
+            wx.hideLoading(), i.setData({ isSubmit: !1 });
+            if (200 != res.code) return wx.showModal({
+                title: "提示",
+                content: res.message || "下单失败"
+            }), !1;
+            var p = res.data.result || {};
+            var orderid = res.data.orderid || p.orderid || "";
+            wx.requestPayment({
+                timeStamp: p.timeStamp,
+                nonceStr: p.nonceStr,
+                package: p.package,
+                signType: p.signType,
+                paySign: p.paySign,
+                success: function () {
+                    if (orderid) {
+                        t.request('/miniprogram/single/notify', {
+                            orderid: orderid,
+                            method: "POST"
+                        }, !0).then(function () {
+                            wx.redirectTo({
+                                url: "/pages/washing/washing"
+                            });
+                        }).catch(function () {
+                            wx.redirectTo({
+                                url: "/pages/washing/washing"
+                            });
+                        });
+                    } else {
+                        wx.redirectTo({
+                            url: "/pages/washing/washing"
+                        });
+                    }
+                }
+            });
+        }).catch(function () {
+            wx.hideLoading(), i.setData({ isSubmit: !1 });
+        });
+    },
+    change: function (t) {
+        var i = t.detail.value.length;
        this.setData({
-            selectIndex: n.currentTarget.dataset.index
+            approve: 1 == i
        });
    }
-});
+});
--- a/pages/singleStart/singleStart.wxml
+++ b/pages/singleStart/singleStart.wxml
@@ -1,12 +1,44 @@
 <view class="container">
    <head-swiper banner="{{banner}}"></head-swiper>
    <view class="title-tips">请选择单次洗车金额</view>
+
    <view class="list">
-        <view bindtap="selectItem" class="{{selectIndex==index?'active item':'item'}}" data-index="{{index}}" wx:for="{{5}}" wx:key="index"> 6.00元 </view>
+        <view bindtap="selectItem" class="item {{item.selected?'active':''}} {{item.isrecommend?'select':''}}" data-id="{{item.id}}" wx:for="{{list}}" wx:key="id">
+            <view class="g">{{item.price}}元<view class="u">购</view></view>
+            <view class="j">{{item.actualprice}}<view class="p">洗车金</view></view>
+            <view class="t">
+              <text>1、洗车金用完，机器自动停止。\n 2、洗车金没用完，到达[ <text class="b">{{item.usetime}}分钟</text> ]机器自动停止。</text>
+            </view>
+        </view>
    </view>
+
+
+    <view class="no-content" wx:if="{{list.length==0&&!loading}}">
+        <image src="/img/nocontent.png"></image>
+        <view>{{message||'暂无相关数据'}}</view>
+    </view>
+
+    <view bindtap="tobuyNow" class="tobuy-btn {{approve?'':'disabled'}}">立即启动·单次洗车</view>
+
+    <checkbox-group bindchange="change">
+        <label class="provision">
+            <checkbox checked value="{{approve}}"></checkbox> 启动单次洗车表示同意 <navigator class="text" url="/pages/webview/webview?url={{protocol.url}}">《聚美汽服购买协议》</navigator>
+        </label>
+    </checkbox-group>
+
+    <view class="warm-prompt">
+        <view class="title">注意事项:</view>
+        <view class="content">
+            <view>1、<b>没有完成洗车，请勿按红色“结束”按钮</b>；</view>
+            <view>2、单次洗车不支持余额支付；</view>
+            <view>3、单次洗车仅限1次洗车，不得分开多次使用；</view>
+            <view>4、购买单次洗车后，将获得相应的洗车金和洗车时长；</view>
+            <view>5、购买单次洗车后，洗车机将立即启动，请确保你在洗车机前；</view>
+            <view>6、洗车金为本次最多可用金额，按量扣费；</view>
+            <view>7、洗车时长为本次最长可用时间，洗车机启动后开始计时；</view>
+            <view>8、当洗车金为0或达到洗车时长，洗车机将自动结束洗车；</view>
+        </view>
+    </view>
+
    <service-tel tel="{{servicetel}}"></service-tel>
-    <view class="footer-btn-box">
-        <view class="btn yellow">余额洗车</view>
-        <view class="btn">单次启动</view>
-    </view>
 </view>
--- a/pages/singleStart/singleStart.wxss
+++ b/pages/singleStart/singleStart.wxss
@@ -11,42 +11,163 @@
    padding: 0;
 }

-.item {
-    background-color: #fff;
-    border-radius: 18rpx;
-    box-shadow: 0 0rpx 9rpx 4rpx hsla(0,0%,40%,.3);
-    color: #333;
-    font-size: 87rpx;
-    height: 180rpx;
-    line-height: 180rpx;
-    margin-bottom: 32rpx;
-    text-align: center;
+.list .item {
+  position: relative;
+  padding-left: 286rpx;
+  background: #fff;
+  border: 5rpx solid #0281db;
+  border-radius: 26rpx;
+  box-sizing: border-box;
+  color: #0281db;
+  flex-direction: column;
+  height: 158rpx;
+  justify-content: center;
+  margin: 0 0 28rpx;
+  width: 100%;
+  overflow: hidden;
 }

-.item.active {
-    box-shadow: 0 0rpx 9rpx 4rpx rgba(255,102,0,.3);
-    color: #f60;
+.list .item .g, .list .item .j  {
+  position: absolute;
+}
+.list .item .g {
+  left: 0;
+  top: 0;
+  height: 153rpx;
+  width: 158rpx;
+  line-height: 153rpx;
+  text-align: center;
+  background-color: #0281db;
+  color: #fff;
+  font-size: 50rpx;
 }

-.footer-btn-box {
-    bottom: 0;
-    color: #fff;
-    display: flex;
-    font-size: 44rpx;
-    left: 0;
-    position: fixed;
-    width: 100vw;
+.list .item .g .u {
+  position: absolute;
+  right: -25rpx;
+  top: 55rpx;
+  width: 40rpx;
+  height: 40rpx;
+  font-size: 26rpx;
+  line-height: 40rpx;
+  border-radius: 100rpx;
+  border: 5rpx solid #0281db;
+  color: #0281db;
+  background-color: #fff;
 }

-.footer-btn-box .btn {
-    align-items: center;
-    background: #4cadf1;
-    display: inline-flex;
-    flex: 1;
-    height: 104rpx;
-    justify-content: center;
+.list .item .j {
+  left: 158rpx;
+  top: 0;
+  height: 153rpx;
+  width: 138rpx;
+  font-size: 66rpx;
+  line-height: 108rpx;
+  text-align: center;
 }

-.btn.yellow {
-    background: #fccaa9;
+.list .item .j .p {
+  font-size: 26rpx;
+  line-height: 1;
+}
+
+.list .item .t {
+  font-size: 25rpx;
+  height: 153rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20rpx;
+  background-color: #eee;
+}
+
+.list .item .t .b {
+  font-weight: 700;
+  color: #1baa1c;
+}
+
+.list .item.select, .list .item.select .g .u {
+  border-color: #f50;
+  color: #f50;
+}
+
+.list .item.select .g {
+  background-color: #f50;
+}
+
+.list .item.active, .list .item.active .g .u {
+  border-color: #4cadf1;
+  color: #4cadf1;
+}
+
+.list .item.active .g {
+  background-color: #4cadf1;
+}
+
+.list .item.active.select, .list .item.active.select .g .u {
+  border-color: #f90;
+  color: #f90;
+}
+
+.list .item.active.select .g {
+  background-color: #f90;
+}
+
+
+.tobuy-btn {
+  align-items: center;
+  background: #1baa1c;
+  border: 2rpx solid #218721;
+  border-radius: 18rpx;
+  color: #fff;
+  display: flex;
+  font-size: 33rpx;
+  height: 91rpx;
+  justify-content: center;
+  margin-top: 3rpx;
+}
+
+.tobuy-btn.disabled {
+  opacity: .7;
+}
+
+.provision {
+  display: block;
+  margin: 40rpx 0 0;
+  font-size: 26rpx;
+}
+
+.provision .text {
+  color: #0281db;
+  display: inline-block;
+}
+
+.warm-prompt {
+  padding: 60rpx 0;
+}
+
+.warm-prompt .title {
+  color: #f30;
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+}
+
+.warm-prompt .content {
+  color: #666;
+  font-size: 26rpx;
+  line-height: 1.8;
+}
+
+.warm-prompt .content .view {
+  margin-bottom: 10rpx;
+}
+
+.warm-prompt .content view b {
+  font-weight: 700;
+  color: red;
+}
+
+.scan-btn {
+  background-color: #218721;
 }