yijianbao_user_uniapp/pages_im/pages/moments/mementsVisibility/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="谁可以看" :route="false" @leftClick="leftClick">
      <view class="nav_right_action" slot="more">
        <u-button
          type="primary"
          size="mini"
          text="完成"
          @click="transferData(false)"
        ></u-button>
      </view>
    </custom-nav-bar>

    <view class="settings_wrap">
      <setting-item title="公开" @click="permission = 0">
        <view class="left_icon" slot="icon">
          <image
            v-show="permission === 0"
            src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_checked.png"
          />
        </view>
        <view class="left_desc" slot="left"> 所有人可见 </view>
      </setting-item>
      <!-- <setting-item title="同事和好友" @click="permission = 1">
				<view class="left_icon" slot="icon">
					<image v-show="permission === 1" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_checked.png" />
				</view>
				<view class="left_desc" slot="left">
					所在组织同事和好友可见
				</view>
			</setting-item> -->
      <setting-item title="私密" @click="permission = 1">
        <view class="left_icon" slot="icon">
          <image
            v-show="permission === 1"
            src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_checked.png"
          />
        </view>
        <view class="left_desc" slot="left"> 仅自己可见 </view>
      </setting-item>
      <setting-item title="部分可见" show-right @click="chooseMember()">
        <view class="left_icon" slot="icon">
          <image
            v-show="permission === 2"
            src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_checked.png"
          />
        </view>
        <view class="left_desc" slot="left">
          <view> 选中的人可见 </view>
          <view v-show="permission === 2" class="">
            {{ choosedNameStr }}
          </view>
        </view>
      </setting-item>
      <setting-item title="不给谁看" show-right @click="chooseMember(false)">
        <view class="left_icon" slot="icon">
          <image
            v-show="permission === 3"
            src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/moments_checked.png"
          />
        </view>
        <view class="left_desc" slot="left">
          <view> 选中的人不可见 </view>
          <view v-show="permission === 3" class="">
            {{ choosedNameStr }}
          </view>
        </view>
      </setting-item>
    </view>
  </view>
</template>

<script>
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import { ContactChooseTypes } from "../../../constant";
import SettingItem from "../momentsRelease/SettingItem.vue";
export default {
  components: {
    CustomNavBar,
    SettingItem,
  },
  data() {
    return {
      permission: null,
      choosedUserInfoList: [],
      choosedGroupInfoList: [],
      originData: {},
      watchFlag: false,
      updateFlag: false,
    };
  },
  computed: {
    choosedNameStr() {
      if (this.permission === 0) {
        return "公开";
      }
      if (this.permission === 1) {
        return "私密";
      }
      let str = "";
      this.choosedUserInfoList.map((user) => (str += `${user.nickname}、`));
      this.choosedGroupInfoList.map((group) => (str += `${group.groupName}、`));
      return str.slice(0, str.length - 1);
    },
  },
  watch: {
    permission(newVal) {
      if (this.watchFlag) {
        this.choosedUserInfoList = [];
        this.choosedGroupInfoList = [];
        this.updateFlag = true;
      } else {
        this.watchFlag = true;
      }
    },
  },
  onLoad(options) {
    const {
      permission,
      choosedUserInfoList,
      choosedGroupInfoList,
      choosedNameStr,
    } = options;
    this.permission = JSON.parse(permission);
    this.choosedUserInfoList = JSON.parse(choosedUserInfoList);
    this.choosedGroupInfoList = JSON.parse(choosedGroupInfoList);
    this.originData = {
      choosedUserInfoList: this.choosedUserInfoList,
      choosedGroupInfoList: this.choosedGroupInfoList,
      permission: this.permission,
      choosedNameStr,
    };
  },
  methods: {
    chooseMember(canSee = true) {
      this.permission = canSee ? 2 : 3;
      this.updateFlag = true;
      uni.$u.route("/pages/common/contactChoose/index", {
        type: ContactChooseTypes.GetListWithGroup,
        checkedUserInfoList: JSON.stringify(this.choosedUserInfoList),
        checkedGroupInfoList: JSON.stringify(this.choosedGroupInfoList),
      });
    },
    getCheckedUsers(dataArray) {
      this.choosedUserInfoList = [...dataArray[0]];
      this.choosedGroupInfoList = [...dataArray[1]];
    },
    tryNavBack() {
      uni.showModal({
        title: "提示",
        content: "要保存设置吗？",
        showCancel: true,
        confirmText: "确认",
        cancelText: "取消",
        success: (res) => {
          this.transferData(res.cancel);
        },
      });
    },
    transferData(isCancel = false) {
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2];
      prevPage.$vm.getWhoCanSee(
        isCancel
          ? this.originData
          : {
              choosedUserInfoList: this.choosedUserInfoList,
              choosedGroupInfoList: this.choosedGroupInfoList,
              permission: this.permission,
              choosedNameStr: this.choosedNameStr,
            },
      );
      uni.navigateBack({
        delta: 1,
      });
    },
    leftClick() {
      if (this.updateFlag) {
        this.tryNavBack();
      } else {
        this.transferData();
      }
    },
  },
  onBackPress(options) {
    console.log("onBackPress");
    if (options.from === "navigateBack") return false;
    if (this.updateFlag) {
      this.tryNavBack();
    } else {
      this.transferData(true);
    }
    return true;
  },
};
</script>

<style lang="scss" scoped>
.page_container {
  background-color: #f8f8f8;

  .nav_right_action {
    margin-right: 44rpx;
    .u-button--mini {
      height: 52rpx;
    }
  }

  .settings_wrap {
    margin-top: 24rpx;

    .setting_item {
    }

    .left_icon {
      width: 24px;
      height: 24px;
      margin-right: 24rpx;
      margin-top: 24rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .left_desc {
      font-size: 24rpx;
      color: #999;
      margin-top: 12rpx;

      view:last-child {
        color: #0089ff;
        margin-top: 12rpx;
      }
    }
  }
}
</style>