分销模块页面接口完成

pageMarket/distribution/components/fenxiao-mingxi.vue

@@ -0,0 +1,197 @@
+<template>
+  <view class="list u-font-28">
+    <view class="u-m-t-32 item" v-for="item in list" :key="item.id">
+      <view class="u-flex u-row-between">
+        <view class="color-666 u-font-24 u-flex">
+          <text class="no-wrap"> 关联订单:</text>
+          <text> {{ item.orderNo }} </text>
+        </view>
+        <view class="status" :class="[item.status]">
+          {{ returnStatus(item.status) }}</view
+        >
+      </view>
+      <view class="u-flex u-row-between u-m-t-16">
+        <view>
+          <view class="color-333 u-font-28 u-flex u-line-1">
+            <text class="font-bold"> 分销员 </text>
+            <text class="color-666 u-font-24 u-m-l-28">
+              {{ item.nickName }}
+            </text>
+            <text class="color-666 u-font-24 u-m-l-10"> {{ item.phone }} </text>
+          </view>
+          <view class="color-333 u-font-28 u-flex u-m-t-16 u-line-1">
+            <text class="font-bold"> 下级用户 </text>
+            <text class="color-666 u-font-24 u-m-l-28">
+              {{ item.sourceNickName }}
+            </text>
+            <text class="color-666 u-font-24 u-m-l-10"> {{ item.sourcePhone }} </text>
+          </view>
+          <view class="color-333 u-font-28 u-flex u-m-t-16 u-line-1">
+            <text class="font-bold"> 创建时间 </text>
+            <text class="color-666 u-font-24 u-m-l-28">
+              {{ item.sourceNickName }}
+            </text>
+            <text class="color-666 u-font-24 u-m-l-10"> {{ item.createTime }} </text>   
+          </view>
+        </view>
+        <view>
+          <view
+            class="text-center color-main font-bold"
+            :class="[ item.status == 'refund' ? 'color-red' : '']"
+            >{{ 0 }}</view
+          >
+          <view class="color-66 u-font-24">{{
+            item.level == 1 ? "直接分成" : "间接分成"
+          }}</view>
+        </view>
+      </view>
+    </view>
+    <view class="u-p-30">
+      <up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
+    </view>
+  </view>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  toRaw,
+  onMounted,
+  onUnmounted,
+  inject,
+} from "vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  isEnd: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const statusMap = {
+  success: "已入账",
+  refund: "已退款",
+  pending: "待入账",
+};
+function returnStatus(status) {
+  return status in statusMap ? statusMap[status] : status;
+}
+
+const $actions = [
+  {
+    name: "更改分销组",
+    value: "change-group",
+  },
+  {
+    name: "重置分销组",
+    value: "reset-group",
+  },
+  {
+    name: "恢复分销员",
+    value: "back-fenxiao",
+  },
+  {
+    name: "取消分销员",
+    value: "cancel-fenxiao",
+  },
+];
+const actions = ref($actions);
+
+const emits = defineEmits(["refresh"]);
+</script>
+<style lang="scss">
+.list {
+  padding: 0 30rpx;
+
+  .item {
+    padding: 32rpx 24rpx;
+    border-radius: 14rpx;
+    background-color: #fff;
+    overflow: hidden;
+  }
+}
+
+.tag {
+  border-radius: 12rpx;
+  padding: 8rpx 22rpx;
+  font-size: 28rpx;
+
+  &.success {
+    background-color: #edfff0;
+    color: #5bbc6d;
+  }
+
+  &.end {
+    background-color: #f7f7f7;
+    color: #999;
+  }
+}
+
+.my-btn {
+  font-size: 28rpx;
+  line-height: 36rpx;
+  padding: 8rpx 32rpx;
+  border-radius: 12rpx;
+  margin: 0;
+}
+.money {
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  padding: 16rpx 28rpx;
+}
+.more {
+  display: flex;
+  height: 56rpx;
+  padding: 8rpx 28rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  border-radius: 28rpx;
+  border: 2rpx solid $my-main-color;
+  color: $my-main-color;
+  background: #fff;
+}
+
+.bottom {
+  position: fixed;
+  bottom: calc(env(safe-area-inset-bottom) + 30rpx);
+  left: 30rpx;
+  right: 30rpx;
+}
+.status {
+  display: flex;
+  padding: 8rpx 18rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  font-size: 28rpx;
+  border-radius: 0 0 8rpx 8rpx;
+  border: 1px solid transparent;
+  &.success {
+    color: rgba(123, 209, 54, 1);
+    border-color: rgba(123, 209, 54, 1);
+    background-color: rgba(123, 209, 54, 0.12);
+  }
+  &.refund {
+    border-color: rgba(249, 50, 40, 1);
+    background-color: rgba(209, 64, 54, 0.12);
+    color: rgba(255, 47, 47, 1);
+  }
+  &.pending {
+    border-color: rgba(153, 153, 153, 1);
+    background-color: rgba(153, 153, 153, 0.12);
+    color: rgba(153, 153, 153, 1);
+  }
+}
+.color-red {
+  color: #ff2f2f;
+}
+.text-center{
+    text-align: center;
+}
+</style>

pageMarket/distribution/components/fenxiao-user-list.vue

@@ -45,7 +45,7 @@
     </view>
     <view style="height: 100rpx"></view>
     <view class="bottom">
-      <my-button>添加分销员</my-button>
+      <my-button @click="go.to('PAGES_DISTRIBUTION_ADD_FENXIAO_USER')">添加分销员</my-button>
     </view>
 
     <up-action-sheet
@@ -99,6 +99,8 @@ import {
   onUnmounted,
   inject,
 } from "vue";
+import go from "@/commons/utils/go.js";
+
 import Modal from "@/pageMarket/components/modal.vue";
 const props = defineProps({
   list: {

pageMarket/distribution/components/open-list.vue

@@ -0,0 +1,254 @@
+<template>
+  <view class="list u-font-28">
+    <view class="u-m-t-32 item" v-for="item in list" :key="item.id">
+      <view class="u-flex u-row-between">
+        <view class="color-666 u-font-24 u-flex">
+          <text class="no-wrap"> 订单号:</text>
+          <text> {{ item.orderNo }} </text>
+        </view>
+        <view>
+          <view class="color-999 u-font-20">{{ item.createTime }}</view>
+        </view>
+      </view>
+      <view class="u-flex u-row-between u-m-t-16">
+        <view class="color-333 u-font-28 color-666">
+          <view> 用户昵称 </view>
+          <view class="u-m-t-4">
+            <text class=""> {{ item.nickName }}</text>
+          </view>
+        </view>
+        <text class="color-main u-font-32 font-700">{{ item.changeAmount }}</text>
+
+      </view>
+      
+     
+    </view>
+    <view class="u-p-30">
+      <up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
+    </view>
+
+    <up-action-sheet
+      :show="showActions"
+      :actions="actions"
+      @select="handleSelect"
+      @close="showActions = false"
+      cancel-text="取消"
+    ></up-action-sheet>
+    <Modal
+      v-model="modalData.show"
+      :title="modalData.title"
+      @confirm="handleConfirm"
+    >
+      <view class="u-p-48" v-if="modalData.key == 'change-group'">
+        <view class="u-m-r-36 u-m-b-24">分销组</view>
+        <up-radio-group v-model="group" placement="row" place="row">
+          <up-radio
+            v-for="item in distributionStore.config.levelConfigList"
+            :key="item.id"
+            :name="item.id"
+            :label="item.name"
+          >
+            <template #label>
+              <text>
+                {{ item.name }}
+              </text>
+            </template>
+          </up-radio>
+        </up-radio-group>
+      </view>
+      <view class="u-p-48 u-flex" v-if="modalData.key == 'reset-group'">
+        <up-icon name="info-circle" color="#FF2F2F" size="20"></up-icon>
+        <view class="u-font-32 color-333 u-m-l-20"
+          >是否确认重置分销组 重置后将会按照用户的实际数据匹配分销组</view
+        >
+      </view>
+      <view class="u-p-48 u-flex" v-if="modalData.key == 'cancel-group'">
+        <up-icon name="info-circle" color="#FF2F2F" size="20"></up-icon>
+        <view class="u-font-32 color-333 u-m-l-20">是否确认取消分销员</view>
+      </view>
+    </Modal>
+  </view>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  watch,
+  toRaw,
+  onMounted,
+  onUnmounted,
+  inject,
+} from "vue";
+import go from "@/commons/utils/go.js";
+
+import Modal from "@/pageMarket/components/modal.vue";
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  isEnd: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+//选中的分销组
+const group = ref("");
+
+const distributionStore = inject("distributionStore");
+const distributionApi = inject("distributionApi");
+const modalData = reactive({
+  show: false,
+  title: "",
+  key: "",
+  data: null,
+});
+const showActions = ref(false);
+const $actions = [
+  {
+    name: "更改分销组",
+    value: "change-group",
+  },
+  {
+    name: "重置分销组",
+    value: "reset-group",
+  },
+  {
+    name: "恢复分销员",
+    value: "back-fenxiao",
+  },
+  {
+    name: "取消分销员",
+    value: "cancel-fenxiao",
+  },
+];
+const actions = ref($actions);
+function moreShow(item) {
+  modalData.data = item;
+  group.value = item.distributionLevelId;
+  if (item.isAssignLevel == 0) {
+    actions.value = $actions.filter((item) => item.value !== "reset-group");
+  } else {
+    actions.value = $actions.filter((item) => item.value !== "change-group");
+  }
+  if (item.status == 1) {
+    actions.value = actions.value.filter(
+      (item) => item.value !== "back-fenxiao"
+    );
+  }
+  if (item.status == 9) {
+    actions.value = actions.value.filter(
+      (item) => item.value !== "cancel-fenxiao"
+    );
+  }
+  showActions.value = true;
+}
+function handleSelect(item) {
+  console.log(item);
+  modalData.title = item.name;
+  modalData.key = item.value;
+
+  showActions.value = false;
+  modalData.show = true;
+}
+
+const emits = defineEmits(["refresh"]);
+
+async function handleConfirm() {
+  if (modalData.key == "reset-group") {
+    await distributionApi.resetLevel({
+      id: modalData.data.id,
+      shopId: uni.getSystemInfoSync("shopInfo").id || "",
+    });
+  }
+  if (modalData.key == "change-group") {
+    const level = distributionStore.config.levelConfigList.find(
+      (item) => item.id == group.value
+    );
+    await distributionApi.editDistributionUser({
+      id: modalData.data.id,
+      isAssignLevel: 1,
+      distributionLevelId: group.value,
+      distributionLevelName: level.name,
+    });
+    emits("refresh");
+  }
+  if (modalData.key == "cancel-fenxiao") {
+    await distributionApi.editDistributionUser({
+      id: modalData.data.id,
+      status: 9,
+    });
+    emits("refresh");
+  }
+  if (modalData.key == "back-fenxiao") {
+    await distributionApi.editDistributionUser({
+      id: modalData.data.id,
+      status: 1,
+    });
+    emits("refresh");
+  }
+  group.value = "";
+  modalData.show = false;
+}
+</script>
+<style lang="scss">
+.list {
+  padding: 0 30rpx;
+
+  .item {
+    padding: 32rpx 24rpx;
+    border-radius: 14rpx;
+    background-color: #fff;
+    overflow: hidden;
+  }
+}
+
+.tag {
+  border-radius: 12rpx;
+  padding: 8rpx 22rpx;
+  font-size: 28rpx;
+
+  &.success {
+    background-color: #edfff0;
+    color: #5bbc6d;
+  }
+
+  &.end {
+    background-color: #f7f7f7;
+    color: #999;
+  }
+}
+
+.my-btn {
+  font-size: 28rpx;
+  line-height: 36rpx;
+  padding: 8rpx 32rpx;
+  border-radius: 12rpx;
+  margin: 0;
+}
+.money {
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+  padding: 16rpx 28rpx;
+}
+.more {
+  display: flex;
+  height: 56rpx;
+  padding: 8rpx 28rpx;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  border-radius: 28rpx;
+  border: 2rpx solid $my-main-color;
+  color: $my-main-color;
+  background: #fff;
+}
+
+.bottom {
+  position: fixed;
+  bottom: calc(env(safe-area-inset-bottom) + 30rpx);
+  left: 30rpx;
+  right: 30rpx;
+}
+</style>