mrr.sj.front/pages/shop/set.vue

<template>
  <view class="set-page">
    <view class="home-navbar">
      <custom-navbar
        title="营业设置"
        :show-back="true"
        title-color="#333333"
        :backgroundColor="'#FFFFFF'"
      ></custom-navbar>
    </view>
    <view class="set_item">
      <view class="set_item_left" @click="goMoreSetting">
        <image
          class="set_item_left_logo"
          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5c3fbe37-924a-476e-b266-f3c5b1eb9692.png"
        />
        <text class="text" >营业设置</text>
        <!-- <image
          class="set_item_left_right"
          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/675f97c8-93d2-440a-8d1e-e91279f13465.png"
        /> -->
      </view>
      <view class="set_item_right" @click="changeOrderTaking">
        <view
          class="btn_change btn_change_yes"
          v-if="userInfo.order_taking == 1"
          >营业中</view
        >
        <view v-else class="btn_change btn_change_no">休息中</view>
        <view
          class="btn_change_ball"
          :style="{ left: userInfo.order_taking == 2 ? '8rpx' : '88rpx' }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";

import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
export default {
  data() {
    return {
      isLogin: false,
      sjId: null,
      userInfo: {},
    };
  },
  components: {
    CustomNavbar,
  },
  onShow() {},
  computed: {},
  onLoad() {
    this.isLogin = uni.getStorageSync("accessToken") ? true : false;
    if (this.isLogin) {
      this.getUserInfo();
    }
  },

  methods: {
    goMoreSetting() {
      // uni.navigateTo({
      //   url: "/subPackages/artisan/unavailable-time",
      // });
    },
    changeOrderTaking() {
      let newStatus = this.userInfo.order_taking == 1 ? 2 : 1;
      request
        .post("/sj/sjordertaking", {
          order_taking: newStatus,
          sjid: this.sjId,
        })
        .then((res) => {
          this.userInfo.order_taking = newStatus;
          this.getUserInfo();
        });
    },
    getUserInfo() {
      request.post("/sj/user/getUser").then((result) => {
        this.userInfo = result.data;
        //存储用户id
        uni.setStorageSync("sjId", result.data.id);
        this.sjId = result.data.id;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  // background: linear-gradient(to bottom, #fafafa, #ffffff);
  background: #f5f5f5;
}

.set_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin: 40rpx 20rpx 0;

  .set_item_left {
    display: flex;
    align-items: center;
    gap: 14rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    .set_item_left_logo {
      width: 32rpx;
      height: 32rpx;
    }
    .set_item_left_right {
      width: 9rpx;
      height: 16rpx;
    }
  }
  .set_item_right {
    position: relative;
    width: 134rpx;
    height: 50rpx;
    overflow: hidden;
    .btn_change {
      position: absolute;
      box-sizing: border-box;
      right: 0;
      top: 0;
      width: 134rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      font-weight: 500;
      &.btn_change_yes {
        box-sizing: border-box;
        background: #e8101e;
        color: #ffffff;
        text-align: left;
        padding-left: 15rpx;
        z-index: 10;
        transition: all 0.3s ease;
      }
      &.btn_change_no {
        box-sizing: border-box;
        background: #cecfd5;
        color: #ffffff;
        text-align: right;
        padding-right: 15rpx;
      }
    }
    .btn_change_ball {
      position: absolute;
      top: 6rpx;
      width: 38rpx;
      height: 38rpx;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      z-index: 100;
    }
  }
}
</style>