Parcourir la source

网点详情页、充值页修改

zuypeng il y a 1 an
Parent
commit
976944a02c

+ 9 - 0
src/components/station/index.vue

@@ -79,6 +79,15 @@ const handleNavStation = (station: any) => {
   console.log(station)
 }
 
+const handleNav = () => {
+  handleNavMap(props.item);
+}
+
+
+defineExpose({
+  handleNav
+})
+
 </script>
 
 <style scoped lang="scss">

+ 1 - 0
src/pages-user/login/index.vue

@@ -14,6 +14,7 @@
       </div>-->
       <uv-button :disabled="!isAgreePrivacy||isAgreePrivacy.length===0"
                  class="phone-login-btn" type="primary"        color="#C6171E"
+                 shape="circle"
                  @getphonenumber="handleGetPhone"  open-type="getPhoneNumber">
         手机号一键登录
       </uv-button>

+ 2 - 1
src/pages-user/wallet/index.vue

@@ -61,6 +61,7 @@
 
     <view class="wallet-bottom">
       <uv-button
+          shape="circle"
           type="primary"
           color="#C6171E"
           @click="to(`/pages-user/wallet/recharge`)">充值
@@ -296,7 +297,7 @@ const handleClickDetail = (walletDetail: any) => {
     height: 46px;*/
     width: calc(100vw - 40rpx);
     position: fixed;
-    bottom: 10rpx;
+    bottom: 30rpx;
     left: 20rpx;
   }
 

+ 74 - 56
src/pages-user/wallet/recharge.vue

@@ -1,21 +1,26 @@
 <template>
-  <view class="page">
-    <view class="recharge">
-      <view v-for="(recharge,idx) in state.configList" :key="idx"
-            @click="handleRechargeClick(recharge,idx)"
-            class="recharge-item" :class="idx===state.chosenIdx?'active':''">
-        <view class="recharge-item_amt">{{ (recharge.rechargeAmount/100).toFixed(2) }}</view>
-        <view class="recharge-item_grant" v-if="recharge.grantsAmount>0">
-          <uv-icon name="gift" :color="idx===state.chosenIdx?'#C6171E':'#2b2b2b'" size="14px"></uv-icon>
-          {{ (recharge.grantsAmount/100).toFixed(2) }}元
-        </view>
+  <uv-navbar leftIcon="arrow-left" @leftClick="handleLeftClick" title="充值" ></uv-navbar>
+  <view class="container">
+    <view class="title">请选择充值金额</view>
+    <view class="amount-list">
+      <view
+          v-for="(item, index) in state.configList"
+          :key="index"
+          :class="['amount-item', { 'active': state.chosenIdx === index }]"
+          @click="handleRechargeClick(item,index)"
+      >
+        {{ (item.rechargeAmount/100).toFixed(0) }}
       </view>
     </view>
+
+    <view v-if="state.rechargeItem.grantsAmount>0" class="flex-inline gift-box">
+      <uv-icon name="gift" size="20"></uv-icon>
+      赠送{{(state.rechargeItem.grantsAmount/100).toFixed(2)}}元</view>
+<!--    <button class="recharge-btn" type="primary" @click="startRecharge">立即充值</button>-->
     <view class="recharge-pay">
-      <uv-button type="primary" iconColor="white" color="#C6171E" text="充值" @click="debounceConfirm"></uv-button>
+      <uv-button type="primary" shape="circle" iconColor="white" color="#C6171E" text="充值" @click="debounceConfirm"></uv-button>
     </view>
   </view>
-
 </template>
 
 <script setup lang="ts">
@@ -24,10 +29,15 @@ import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
 import {debounce} from "@/utils/common";
 import {get, post,body} from "@/utils/https";
 
+// <uv-navbar leftIcon="arrow-left" title="充值" @leftClick="handleLeftClick"></uv-navbar>
+//
 const initState = () => ({
   configList: [],
   chosenIdx: -1,
-  stationId:'000'
+  stationId:'000',
+  rechargeItem:{
+    grantsAmount:0
+  }
 })
 
 const state = reactive(initState())
@@ -49,8 +59,12 @@ onHide(() => {
   Object.assign(state, initState());
 })
 
+const handleLeftClick = () => {
+  uni.navigateBack()
+}
 const handleRechargeClick = (recharge: any, idx: number) => {
   state.chosenIdx = idx;
+  state.rechargeItem = state.configList[idx]
 }
 
 const loadRechargeConfig = () => {
@@ -107,63 +121,67 @@ const confirm = () => {
 
 </script>
 
-<style lang="scss" scoped>
-.page {
-  min-height: 100vh;
-  width: 100%;
-  background-color: #fff;
+<style scoped lang="scss">
+.container {
+  padding: 20px;
+  margin-top: 100px;
+}
+
+.title {
+  font-size: 24rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 30px;
 }
 
-.recharge {
+.amount-list {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
-  justify-content: end;
-  align-items: start;
-  align-content: center;
-
-  &-item {
-    display: flex;
-    flex-direction: column;
-    width: 200rpx;
-    height: 100rpx;
-    background-color: #eeefff;
-    margin: 20rpx auto;
-    padding: 10rpx;
-    border-radius: 10rpx;
-
-    &_amt {
-      font-size: 20px;
-      font-weight: 600;
-    }
-
-    &_grant {
-      font-size: 12px;
-      margin-top: 4rpx;
-      display: inline-flex;
-    }
-  }
+  gap: 15px;
+  margin-bottom: 20px;
 }
 
+.amount-item {
+  background-color: #eee;
+  width: 140rpx;
+  padding: 10px 12px;
+  text-align: center;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: bold;
+}
 
-.active {
-  border-radius: 10rpx solid $uni-color-primary;
+.amount-item.active {
+  background-color: #C6171E;
+  color: white;
+  border-color: #C6171E;
+}
 
-  .recharge-item {
-    &_amt {
-      color: $uni-color-primary;
-    }
+.custom-amount input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 20px;
+}
 
-    &_grant {
-      color: $uni-color-primary;
-    }
-  }
+.recharge-btn {
+  width: 100%;
+}
+.gift-box{
+  display: inline-flex;
+  align-items: center;
+  margin-top: 10px;
+  padding-left: 20px;
 }
 
 .recharge-pay {
   width: calc(100vw - 40rpx);
   position: fixed;
-  bottom: 10rpx;
+  bottom: 30rpx;
   left: 20rpx;
 }
 
-</style>
+</style>

+ 5 - 4
src/pages-user/wallet/refund.vue

@@ -1,15 +1,16 @@
 <template>
+  <uv-navbar leftIcon="" title="退款申请" ></uv-navbar>
   <view class="page">
     <view class="block">
       <view class="fs-28 color-000 fw-500">退款金额</view>
       <view
           class="pt-24 pb-24 box-content flex-inline"
           style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)">
-        <text style="font-size: 32px; line-height: 32px">¥{{ (account.balance || 0).toFixed(2) }}</text>
+        <text style="font-size: 32px; line-height: 32px">¥{{ ((account.balance || 0)/100).toFixed(2) }}</text>
       </view>
       <view class="height-94 flex-align-center">
-        <view class="fs-28 color-999">可退金额 {{ (account.balance || 0).toFixed(2) }} 元,优惠金额
-          {{ (account.grantsBalance || 0).toFixed(2) }} 元
+        <view class="fs-28 color-999">可退金额 {{ ((account.balance || 0)/100).toFixed(2) }} 元,优惠金额
+          {{ ((account.grantsBalance || 0)/100).toFixed(2) }} 元
         </view>
         <!-- <view class="fs-28 color-primary" @click="allRefund">全部提现</view> -->
       </view>
@@ -46,7 +47,7 @@
     </view>
     <view>
       <view class="pl-40 pr-40 pb-30 pt-30" style="background-color: #fff">
-        <uv-button type="primary" @click="submit" :disabled="account.balance<=0">提交申请</uv-button>
+        <uv-button shape="circle" color="#C6171E" type="primary" @click="submit" :disabled="account.balance<=0">提交申请</uv-button>
       </view>
     </view>
 

+ 1 - 0
src/pages-wash/device/index.vue

@@ -38,6 +38,7 @@
       <view class="device-body_recharge">
         <uv-button
             v-if="state.isLogin"
+            shape="circle"
             type="default"
             color="#C6171E"
             @click="handleGotoRechage">余额¥ {{ fmtMoney(state.balance)  }},去充值

+ 108 - 32
src/pages-wash/station/index.vue

@@ -1,30 +1,49 @@
 <template>
+  <uv-navbar leftIcon="arrow-left" @leftClick="handleLeftClick" title="门店详情"></uv-navbar>
   <view :class="['page']">
-    <image :src="state.station.pictures" mode="heightFix"></image>
+    <image :src="state.station.pictures" mode="widthFix" class="station-bg"></image>
 
     <view class="station-box">
       <view class=" station_wrapper">
-        <WashStation :item=" state.station"></WashStation>
+        <WashStation :item=" state.station" ref="station_ref"></WashStation>
       </view>
     </view>
 
-    <view class="device-box w100">
+    <view class="device-box">
       <view class="device-item" v-for="device in state.deviceList" :key="device.id" @click="handleClickDevice(device)">
-        <view class="device-item_header">
-          <text class="device-item_header-short">No.{{ device.shortId }}</text>
-          <text class="device-item_header-status">{{ fmtDictName('WashDevice.state', device.state) }}</text>
-        </view>
-        <view class="device-item_func">
-          <view class="device-item_func-tag" v-for="f in device.functionList" :key="f">
-            <uv-tags :text="f" size="mini" plain plainFill bgColor="#C6171E" color="white"  type="error"></uv-tags>
+        <div class="device-item_header">
+          <text class="device-item_header-seq">{{ device.seqName }}</text>
+          <text class="device-item_header-status" :class="device.state=='idle'?'success':''">{{ fmtDictName('WashDevice.state', device.state) }}</text>
+        </div>
+        <div class="device-item_body">
+          <view class="device-item_body_header">
+            <text class="device-item_body_header-short">编号:{{ device.shortId }}</text>
+            <view></view>
+            <text class="device-item_body_header-short">服务:{{ device.functionList.join("、") }}</text>
           </view>
-        </view>
+<!--          <view class="device-item_body_func">
+            <view class="device-item_body_func-tag">
+              <uv-text text="服务:" size="mini" plain plainFill  color="black" ></uv-text>
+            </view>
+            <view class="device-item_body_func-tag" v-for="f in device.functionList" :key="f">
+              <uv-text :text="f" size="mini" plain plainFill  color="black" ></uv-text>
+            </view>
+          </view>-->
+        </div>
+
       </view>
 
     </view>
 
-    <view class="scan-btn">
-      <uv-button type="primary" icon="scan" iconColor="white" color="#C6171E" text="扫码洗车" @click="handleClickScan"></uv-button>
+    <view class="station-bottom">
+      <view class="station-bottom-box">
+        <view class="bottom-left">
+          <uv-button shape="circle" type="info"   text="门店导航" @click="handleNavStation"></uv-button>
+        </view>
+        <view class="bottom-right">
+          <uv-button shape="circle" type="primary" icon="scan" iconColor="white" color="#C6171E" text="扫码洗车" @click="handleClickScan"></uv-button>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -36,6 +55,8 @@ import {get} from "@/utils/https";
 import {fmtDictName} from "@/utils/common";
 import WashStation from "@/components/station/index.vue"
 
+const station_ref = ref()
+
 const initState = () => ({
   deviceList: [] as any[],
   station: {
@@ -50,6 +71,10 @@ onHide(() => {
   Object.assign(state, initState());
 })
 
+const handleLeftClick = () => {
+  uni.navigateBack()
+}
+
 /*onLoad((options) => {
   state.station.id = options?.id;
   let station = getApp<any>().globalData.last.station;
@@ -93,7 +118,7 @@ const loadStationDeviceList = () => {
 }
 
 const handleNavStation = () => {
-
+  station_ref.value?.handleNav();
 }
 
 const handleClickDevice = (device: any) => {
@@ -115,9 +140,18 @@ const handleClickDevice = (device: any) => {
 
 <style lang="scss" scoped>
 .page {
-  min-height: 100vh;
+  margin-top: 44px;
+  height: calc(100vh - 44px);
   width: 100%;
   background-color: #eee;
+  display: flex;
+  flex-direction: column;
+}
+
+.station-bg {
+  border-radius: 10px;
+  width: calc(100vw - 20rpx);
+  margin: 40px auto 0 auto;
 }
 
 .block {
@@ -136,26 +170,26 @@ const handleClickDevice = (device: any) => {
 }
 
 .device-box {
-  margin-top: 30rpx;
-  margin-bottom: 100rpx;
+  width: calc(100vw - 80rpx);
+  margin: 30rpx auto 100rpx;
 }
 
 .device-item {
   background-color: #fff;
   border-radius: 10rpx;
-  width: calc(100vw - 80rpx);
+  //width: calc(100vw - 80rpx);
   margin: 20rpx auto;
   padding: 10rpx;
   display: flex;
   flex-direction: column;
 
   &_header {
-    font-size: 13px;
-    padding: 10rpx 0;
+    display: flex;
+    justify-content: space-between;
+
 
-    &-short{
-      font-size: 16px;
-      font-weight: 500;
+    &-seq {
+      font-size: 28rpx;
     }
 
     &-status {
@@ -168,25 +202,67 @@ const handleClickDevice = (device: any) => {
     }
   }
 
-  &_func {
-    display: inline-flex;
+  &_body {
+    margin-top: 8rpx;
+    border-top: 1rpx solid #eee;
+    display: flex;
+    flex-direction: column;
 
-    &-label {
+    &_header {
       font-size: 24rpx;
-      color: #aaa;
+      padding: 10rpx 0;
+
+      &-short {
+        font-size: 24rpx;
+        font-weight: 500;
+        transform: scale(0.8);
+      }
+
+
     }
 
-    &-tag {
-      margin-right: 6px;
-      transform: scale(0.8);
+    &_func {
+      display: inline-flex;
+
+      &-label {
+        font-size: 24rpx;
+        color: #aaa;
+      }
+
+      &-tag {
+        margin-right: 6px;
+        transform: scale(0.8);
+        padding: 10rpx 0;
+      }
     }
   }
+
 }
 
-.scan-btn {
-  width: calc(100vw - 40rpx);
+.station-bottom {
+  width: 100%;
+
   position: fixed;
   bottom: 10rpx;
   left: 20rpx;
+
+  &-box {
+    width: calc(100vw - 40rpx);
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .bottom-left {
+    width: 200rpx;
+  }
+
+  .bottom-right {
+    flex: 1
+  }
+}
+
+.success{
+  background-color: $uni-color-success;
+  color: #fff;
 }
 </style>

+ 10 - 7
src/pages.json

@@ -25,7 +25,10 @@
     },
     {
       "path": "pages/order/index",
-      "navigationBarTitleText": "订单中心"
+      "navigationBarTitleText": "订单中心",
+      "navigationBarTitleFontSize": 18,
+      "navigationBarTitleFontWeight": "bold"
+
     },
     {
       "path": "pages/user/index",
@@ -90,7 +93,7 @@
         {
           "path": "wallet/recharge",
           "style": {
-            "navigationStyle": "default",
+            "navigationStyle": "custom",
             "navigationBarTitleText": "充值",
             "navigationBarBackgroundColor": "#ffffff"
           }
@@ -117,7 +120,7 @@
           "style": {
             "navigationStyle": "default",
             "navigationBarTitleText": "用户协议",
-            "navigationBarBackgroundColor": "#ffffff",
+            "navigationBarBackgroundColor": "#ffffff"
           }
         },
         {
@@ -125,7 +128,7 @@
           "style": {
             "navigationStyle": "default",
             "navigationBarTitleText": "隐私政策",
-            "navigationBarBackgroundColor": "#ffffff",
+            "navigationBarBackgroundColor": "#ffffff"
           }
         }
       ]
@@ -136,7 +139,7 @@
         {
           "path": "station/index",
           "style": {
-            "navigationStyle": "default",
+            "navigationStyle": "custom",
             "navigationBarTitleText": "网点",
             "navigationBarBackgroundColor": "#ffffff"
           }
@@ -216,7 +219,7 @@
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8",
-    "navigationStyle": "custom"
+    "backgroundColor": "#F8F8F8"
   }
 }
+

+ 1 - 1
src/pages/map/index.vue

@@ -50,7 +50,7 @@
             </view>
           </view>
           <view class="station_item-content-right">
-            <uv-button circle type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
+            <uv-button shape="circle" type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
           </view>
         </view>
 

+ 1 - 1
src/pages/user/index.vue

@@ -398,13 +398,13 @@ page{
 
   &-wrap{
     height: 80rpx;
+    border-radius: 40rpx;
     font-size: 28rpx;
     margin: 20px auto;
     width: 540rpx;
     text-align: center;
     background: #dd524d;
     color: white;
-    border-radius: 10rpx;
     display: flex;
     align-items: center;
     align-content: center;