From 8aa4ddc7747296129d419764d9405f250745869d Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Wed, 4 Jun 2025 13:57:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(resettle):=20=E5=AE=89=E7=BD=AE=E6=9E=B6?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resettleArchite/resettle1.vue             | 1397 +++++++++--------
 1 file changed, 735 insertions(+), 662 deletions(-)

diff --git a/src/pages/architecture/resettleArchite/resettle1.vue b/src/pages/architecture/resettleArchite/resettle1.vue
index 6f27aad..67ae298 100644
--- a/src/pages/architecture/resettleArchite/resettle1.vue
+++ b/src/pages/architecture/resettleArchite/resettle1.vue
@@ -1,716 +1,789 @@
 <template>
-	<view>
-		<view class="seach">
-			<view class="neibox">
-				会员编号
-			</view>
-			<view class="seach_i">
-				<u--input class="these" v-model="queryParams.memberCode">
-					<template slot='suffix'>
-						<view class="seatch_r">
-							<u-icon @click="getDataList" name="search" size="22" color="#fff"></u-icon>
-						</view>
-					</template>
-				</u--input>
-			</view>
-			<view class="neibox" @click="popShow = true">
-				筛选
-			</view>
+  <view>
+    <view class="seach">
+      <view>
+        <view style="display: flex; align-items: center">
+          <view class="neibox"> 会员编号 </view>
+          <view class="seach_i">
+            <u--input class="these" v-model="queryParams.memberCode">
+              <template slot="suffix">
+                <view class="seatch_r">
+                  <u-icon
+                    @click="getDataList"
+                    name="search"
+                    size="22"
+                    color="#fff"
+                  ></u-icon>
+                </view>
+              </template>
+            </u--input>
+          </view>
+        </view>
+        <TopMemberSelect @change="topMemberHandleChange" />
+      </view>
+      <view class="neibox" @click="popShow = true"> 筛选 </view>
+    </view>
+    <view class="mainbox">
+      <view class="main_top">
+        <view
+          class="top_flex"
+          v-for="(item, index) in avaerInfoList"
+          :key="index"
+        >
+          <img class="theimg" :src="item.value" alt="" />
+          <view class="fle2">{{ item.name }}</view>
+        </view>
+      </view>
 
-		</view>
-		<view class="mainbox">
-			<view class="main_top">
-				<view class="top_flex" v-for="item,index in avaerInfoList" :key="index">
-					<img class="theimg" :src="item.value" alt="">
-					<view class="fle2">{{item.name}}</view>
-				</view>
+      <view class="main_bottom">
+        <view
+          class="scoll_main"
+          ref="scrollMain"
+          @touchstart="handleTouchStart"
+          @touchmove="handleTouchMove"
+          @touchend="handleTouchEnd"
+        >
+          <TreeChart
+            :size="size"
+            :json="data"
+            :class="{ landscape: landscape.length }"
+            @click-node="clickNode"
+          />
+        </view>
+      </view>
+    </view>
+    <u-popup
+      :show="popShow"
+      mode="right"
+      @close="popShow = false"
+      :closeOnClickOverlay="false"
+    >
+      <view class="rightPopup">
+        <view class="popup_top">
+          <view
+            @click="
+              () => {
+                getDataList(), (popShow = false);
+              }
+            "
+            >筛选</view
+          >
+          <view class="top_red" @click="popShow = false">{{ '返回' }}</view>
+        </view>
+        <view class="typesBox">
+          <view class="typeTitle" @click="listShow = true"> 结算期数 </view>
+          <view class="choiceBox">
+            <view class="inputbox" @click="listShow = true">
+              <view class="">
+                {{ settleName ? settleName : '请选择' }}
+              </view>
+              <u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
+            </view>
+          </view>
+        </view>
+        <view class="typesBox">
+          <view class="typeTitle"> 代数 </view>
+          <view class="choiceBox">
+            <u--input
+              v-model="queryParams.level"
+              style="
+                background-color: rgba(255, 234, 233, 0.65);
+                border-color: rgba(255, 234, 233, 0.65) !important;
+              "
+              placeholder="请输入"
+              border="surround"
+              shape="circle"
+            ></u--input>
+          </view>
+        </view>
 
-			</view>
-
-			<view class="main_bottom">
-				<view class="scoll_main" ref="scrollMain" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
-					@touchend="handleTouchEnd">
-					<TreeChart :size="size" :json="data" :class="{ landscape: landscape.length }"
-						@click-node="clickNode" />
-				</view>
-			</view>
-		</view>
-		<u-popup :show="popShow" mode="right" @close="popShow = false" :closeOnClickOverlay="false">
-			<view class="rightPopup">
-				<view class="popup_top">
-					<view @click="()=>{getDataList(),popShow = false}">筛选</view>
-					<view class="top_red" @click="popShow = false">{{'返回'}}</view>
-				</view>
-				<view class="typesBox">
-					<view class="typeTitle" @click='listShow=true'>
-						结算期数
-					</view>
-					<view class="choiceBox">
-						<view class="inputbox" @click="listShow=true">
-							<view class="">
-								{{settleName?settleName:"请选择"}}
-							</view>
-							<u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
-						</view>
-					</view>
-				</view>
-				<view class="typesBox">
-					<view class="typeTitle">
-						代数
-					</view>
-					<view class="choiceBox">
-						<u--input v-model="queryParams.level"
-							style="background-color: rgba(255, 234, 233, 0.65);border-color:rgba(255, 234, 233, 0.65)!important;"
-							placeholder="请输入" border="surround" shape='circle'></u--input>
-					</view>
-				</view>
-
-				<view class="popup_bottom">
-					<view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
-					<view class="bottom_btn thebtn2" @click="()=>{getDataList(),popShow = false}">{{'确定'}}
-					</view>
-				</view>
-
-			</view>
-			<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="memberSettlePeriodList"
-				@confirm="confirm" keyName='settleDate'></u-picker>
-
-		</u-popup>
-		<u-popup :show="isPop" closeable mode="center" round='10' @close="isPop=false">
-			<view class="ispop_box ">
-
-				<view class="Poster1">
-					<view class="pop_top">
-						<view class="pop_top">
-							<view>
-								<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.avatarUrl"
-									:src=" 'data:image/png;base64,' + popMould.avatarUrlBase64" mode="aspectFit" class="poster1"></image>
-							</view>
-							<view>
-								<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.countryUrl2"
-									:src="'data:image/png;base64,' +popMould.countryUrl2Base64" mode="aspectFit" class="poster2"></image>
-							</view>
-						</view>
-						<view class="top_right">
-							<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.settleCountryUrl2"
-								:src="'data:image/png;base64,' + popMould.settleCountryUrl2Base64" mode="aspectFit" class="poster2"></image>
-							<view style="margin-top: 18rpx;">
-								结算国家
-							</view>
-						</view>
-					</view>
-					<view class="pop_center">
-						<view class="center_flex">
-							<view class="c1">会员编号</view>
-							<view class="c2">{{popMould.memberCode}}</view>
-						</view>
-						<view class="center_flex">
-							<view class="c1">会员姓名</view>
-							<view class="c2">{{popMould.name}}</view>
-						</view>
-						<view class="center_flex">
-							<view class="c1">支付时间</view>
-							<view class="c2">{{popMould.payDate}}</view>
-						</view>
-					</view>
-					<view class="pop_bottom">
-						<view class="b_flex">
-							<view class="bt1">业绩(PV)</view>
-							<view class="bt1">左区</view>
-							<view class="bt1">右区</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">真实新增</view>
-							<view class="bt2">{{popMould.leftRealNewPv}}</view>
-							<view class="bt2">{{popMould.rightRealNewPv}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">首购新增</view>
-							<view class="bt2">{{popMould.leftFirstPurchaseAdd}}</view>
-							<view class="bt2">{{popMould.rightFirstPurchaseAdd}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">复购新增</view>
-							<view class="bt2">{{popMould.leftRepeatPurchaseSurplus}}</view>
-							<view class="bt2">{{popMould.rightRepeatPurchaseSurplus}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">真实累计</view>
-							<view class="bt2">{{popMould.leftRealTotal}}</view>
-							<view class="bt2">{{popMould.rightRealTotal}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">首购累计</view>
-							<view class="bt2">{{popMould.leftFirstTotal}}</view>
-							<view class="bt2">{{popMould.rightFirstTotal}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">复购累计</view>
-							<view class="bt2">{{popMould.leftRepeatPurchaseTotal}}</view>
-							<view class="bt2">{{popMould.rightRepeatPurchaseTotal}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">首购结余</view>
-							<view class="bt2">{{popMould.leftFirstSurplus}}</view>
-							<view class="bt2">{{popMould.rightFirstSurplus}}</view>
-						</view>
-						<view class="b_flex">
-							<view class="bt2">复购结余</view>
-							<view class="bt2">{{popMould.leftRepeatPurchaseSurplus}}</view>
-							<view class="bt2">{{popMould.rightRepeatPurchaseSurplus}}</view>
-						</view>
-					</view>
-				</view>
-				<view class="btn_box">
-					<view class="small-btn" @click="downImage('Poster1')">下载图片</view>
-					<view class="small-text-btn" @click="copyText()">复制文字</view>
-				</view>
-			</view>
-		</u-popup>
-		<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
-			ref="Eposter">
-		</Eposter>
-	</view>
+        <view class="popup_bottom">
+          <view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
+          <view
+            class="bottom_btn thebtn2"
+            @click="
+              () => {
+                getDataList(), (popShow = false);
+              }
+            "
+            >{{ '确定' }}
+          </view>
+        </view>
+      </view>
+      <u-picker
+        @cancel="listShow = false"
+        :show="listShow"
+        ref="uPicker"
+        :columns="memberSettlePeriodList"
+        @confirm="confirm"
+        keyName="settleDate"
+      ></u-picker>
+    </u-popup>
+    <u-popup
+      :show="isPop"
+      closeable
+      mode="center"
+      round="10"
+      @close="isPop = false"
+    >
+      <view class="ispop_box">
+        <view class="Poster1">
+          <view class="pop_top">
+            <view class="pop_top">
+              <view>
+                <image
+                  crossorigin="anonymous"
+                  data-etype="image"
+                  :data-enode="popMould.avatarUrl"
+                  :src="'data:image/png;base64,' + popMould.avatarUrlBase64"
+                  mode="aspectFit"
+                  class="poster1"
+                ></image>
+              </view>
+              <view>
+                <image
+                  crossorigin="anonymous"
+                  data-etype="image"
+                  :data-enode="popMould.countryUrl2"
+                  :src="'data:image/png;base64,' + popMould.countryUrl2Base64"
+                  mode="aspectFit"
+                  class="poster2"
+                ></image>
+              </view>
+            </view>
+            <!-- <view class="top_right">
+              <image
+                crossorigin="anonymous"
+                data-etype="image"
+                :data-enode="popMould.settleCountryUrl2"
+                :src="
+                  'data:image/png;base64,' + popMould.settleCountryUrl2Base64
+                "
+                mode="aspectFit"
+                class="poster2"
+              ></image>
+              <view style="margin-top: 18rpx"> 结算国家 </view>
+            </view> -->
+          </view>
+          <view class="pop_center">
+            <view class="center_flex">
+              <view class="c1">会员编号</view>
+              <view class="c2">{{ popMould.memberCode }}</view>
+            </view>
+            <view class="center_flex">
+              <view class="c1">会员姓名</view>
+              <view class="c2">{{ popMould.name }}</view>
+            </view>
+            <view class="center_flex">
+              <view class="c1">安置部门</view>
+              <view class="c2">第{{ popMould.placeDept }}部门</view>
+            </view>
+            <view class="center_flex">
+              <view class="c1">支付时间</view>
+              <view class="c2">{{ popMould.payDate }}</view>
+            </view>
+          </view>
+          <view class="pop_bottom">
+            <view class="b_flex">
+              <view class="bt1">业绩(¥)</view>
+              <view class="bt1">左区</view>
+              <view class="bt1">右区</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">真实新增</view>
+              <view class="bt2">{{ popMould.leftRealNewPv }}</view>
+              <view class="bt2">{{ popMould.rightRealNewPv }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">首购新增</view>
+              <view class="bt2">{{ popMould.leftFirstPurchaseAdd }}</view>
+              <view class="bt2">{{ popMould.rightFirstPurchaseAdd }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">复购新增</view>
+              <view class="bt2">{{ popMould.leftRepeatPurchaseSurplus }}</view>
+              <view class="bt2">{{ popMould.rightRepeatPurchaseSurplus }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">真实累计</view>
+              <view class="bt2">{{ popMould.leftRealTotal }}</view>
+              <view class="bt2">{{ popMould.rightRealTotal }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">首购累计</view>
+              <view class="bt2">{{ popMould.leftFirstTotal }}</view>
+              <view class="bt2">{{ popMould.rightFirstTotal }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">复购累计</view>
+              <view class="bt2">{{ popMould.leftRepeatPurchaseTotal }}</view>
+              <view class="bt2">{{ popMould.rightRepeatPurchaseTotal }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">首购结余</view>
+              <view class="bt2">{{ popMould.leftFirstSurplus }}</view>
+              <view class="bt2">{{ popMould.rightFirstSurplus }}</view>
+            </view>
+            <view class="b_flex">
+              <view class="bt2">复购结余</view>
+              <view class="bt2">{{ popMould.leftRepeatPurchaseSurplus }}</view>
+              <view class="bt2">{{ popMould.rightRepeatPurchaseSurplus }}</view>
+            </view>
+          </view>
+        </view>
+        <view class="btn_box">
+          <view class="small-btn" @click="downImage('Poster1')">下载图片</view>
+          <view class="small-text-btn" @click="copyText()">复制文字</view>
+        </view>
+      </view>
+    </u-popup>
+    <Eposter
+      width="750"
+      height="1334"
+      :list="list"
+      backgroundColor="rgb(255, 255, 255)"
+      @on-success="onSuccess"
+      ref="Eposter"
+    >
+    </Eposter>
+  </view>
 </template>
 
 <script>
-	import html2canvas from 'html2canvas';
-	import TreeChart from "@/components/architectures/resettleSO.vue";
-	import Eposter from '@/components/architectures/Poster.vue';
+  import html2canvas from 'html2canvas';
+  import TreeChart from '@/components/architectures/resettleSO.vue';
+  import Eposter from '@/components/architectures/Poster.vue';
+  import TopMemberSelect from '@/components/top-member-select/index.vue';
+  import * as arc from '@/api/architecture.js';
+  export default {
+    components: {
+      TreeChart,
+      Eposter,
+      TopMemberSelect,
+    },
+    data() {
+      return {
+        avaerInfoList: [],
+        treeData: [],
+        queryParams: {
+          memberSettlePeriodId: '', // 期数
+          memberCode: '', // 会员编号
+          level: 6, // 代数
+          type: 1,
+        },
+        memberSettlePeriodList: [], // 期数
+        popShow: false,
+        listShow: false,
+        settleName: '',
+        data: {},
+        size: 0.3,
+        landscape: [],
+        popMould: {},
+        isPop: false,
+        touchStartPosition1: {
+          x: 0,
+          y: 0,
+        },
+        touchStartPosition2: {
+          x: 0,
+          y: 0,
+        },
+        initialDistance: 0,
+        list: [],
+      };
+    },
+    onLoad() {
+      this.getAvarerInfo();
+      // this.getDataList();
+    },
+    methods: {
+      topMemberHandleChange(val) {
+        this.$set(this.queryParams, 'memberCode', val);
+        this.getDataList();
+      },
+      // 复制文字
+      copyText() {
+        const self = this;
+        const md = self.popMould;
+        const text = `会员编号：${md.memberCode} \n会员姓名：${md.name} \n支付时间：${md.payDate} \n业绩(PV)  左区  右区 \n真实新增  ${md.leftRealNewPv}  ${md.rightRealNewPv} \n首购新增  ${md.leftFirstPurchaseAdd}  ${md.rightFirstPurchaseAdd} \n复购新增  ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n真实累计  ${md.leftRealTotal}  ${md.rightRealTotal} \n首购累计  ${md.leftFirstTotal}  ${md.rightFirstTotal} \n复购累计  ${md.leftRepeatPurchaseTotal}  ${md.rightRepeatPurchaseTotal} \n首购结余  ${md.leftFirstSurplus}  ${md.rightFirstSurplus} \n复购结余  ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n`;
+        uni.setClipboardData({
+          data: text,
+          success: function (res) {
+            uni.getClipboardData({
+              success: function (res) {
+                uni.showToast({
+                  title: '复制成功',
+                });
+              },
+            });
+          },
+        });
+      },
+      // 下载图片
+      downImage(elClass) {
+        this.$refs.Eposter.createForElRect(elClass, false);
+      },
+      downloadImg() {
+        const self = this;
+        const element = document.querySelector('.Poster1');
+        uni.showLoading({
+          title: '图片保存中',
+        });
+        html2canvas(element)
+          .then(function (canvas) {
+            const dataURL = canvas.toDataURL('image/jpeg');
+            const link = document.createElement('a');
+            link.style.display = 'none';
+            link.href = dataURL;
+            link.download = 'image.jpg';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            uni.showToast({
+              icon: 'none',
+              title: '保存成功',
+              duration: 2000,
+            });
+            uni.hideLoading();
+          })
+          .catch(function (error) {
+            uni.hideLoading();
+            uni.showModal({
+              title: '保存失败',
+            });
+          });
+      },
+      onSuccess(val) {
+        // console.log('🌈val',val)
+        this.posterImg = val;
+        this.downloadImg(this.posterImg);
+      },
 
-	import * as arc from '@/api/architecture.js'
-	export default {
-		components: {
-			TreeChart,
-			Eposter
-		},
-		data() {
-			return {
-				avaerInfoList: [],
-				treeData: [],
-				queryParams: {
-					memberSettlePeriodId: "", //期数
-					memberCode: "", //会员编号
-					level: 6, //代数
-					type: 1
-				},
-				memberSettlePeriodList: [], //期数
-				popShow: false,
-				listShow: false,
-				settleName: "",
-				data: {},
-				size: 0.3,
-				landscape: [],
-				popMould: {},
-				isPop: false,
-				touchStartPosition1: {
-					x: 0,
-					y: 0
-				},
-				touchStartPosition2: {
-					x: 0,
-					y: 0
-				},
-				initialDistance: 0,
-				list: []
-
-			};
-		},
-		onLoad() {
-			this.getAvarerInfo();
-			this.getDataList()
-		},
-		methods: {
-			//复制文字
-			copyText() {
-				let self = this;
-				let md = self.popMould;
-				let text =
-					`会员编号：${md.memberCode} \n会员姓名：${md.name} \n支付时间：${md.payDate} \n业绩(PV)  左区  右区 \n真实新增  ${md.leftRealNewPv}  ${md.rightRealNewPv} \n首购新增  ${md.leftFirstPurchaseAdd}  ${md.rightFirstPurchaseAdd} \n复购新增  ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n真实累计  ${md.leftRealTotal}  ${md.rightRealTotal} \n首购累计  ${md.leftFirstTotal}  ${md.rightFirstTotal} \n复购累计  ${md.leftRepeatPurchaseTotal}  ${md.rightRepeatPurchaseTotal} \n首购结余  ${md.leftFirstSurplus}  ${md.rightFirstSurplus} \n复购结余  ${md.leftRepeatPurchaseSurplus}  ${md.rightRepeatPurchaseSurplus} \n`;
-				uni.setClipboardData({
-					data: text,
-					success: function(res) {
-						uni.getClipboardData({
-							success: function(res) {
-								uni.showToast({
-									title: '复制成功'
-								})
-							}
-						})
-					}
-				})
-			},
-			//下载图片
-			downImage(elClass) {
-				this.$refs.Eposter.createForElRect(elClass, false);
-			},
-			downloadImg() {
-				let self = this;
-				let element = document.querySelector('.Poster1');
-				uni.showLoading({
-					title: '图片保存中'
-				});
-				html2canvas(element).then(function(canvas) {
-					let dataURL = canvas.toDataURL('image/jpeg');
-					let link = document.createElement('a');
-					link.style.display = 'none';
-					link.href = dataURL;
-					link.download = 'image.jpg';
-					document.body.appendChild(link);
-					link.click();
-					document.body.removeChild(link);
-					uni.showToast({
-						icon: 'none',
-						title: '保存成功',
-						duration: 2000
-					});
-					uni.hideLoading();
-				}).catch(function(error) {
-					uni.hideLoading();
-					uni.showModal({
-						title: '保存失败'
-					});
-				});
-			},
-			onSuccess(val) {
-				// console.log('🌈val',val)
-				this.posterImg = val;
-				this.downloadImg(this.posterImg);
-			},
-
-			handleTouchStart(event) {
-				const touch1 = event.touches[0];
-				const touch2 = event.touches[1];
-				if (touch2) {
-					this.touchStartPosition1 = {
-						x: touch1.pageX,
-						y: touch1.pageY
-					};
-					this.touchStartPosition2 = {
-						x: touch2.pageX,
-						y: touch2.pageY
-					};
-					this.initialDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
-				}
-			},
-			handleTouchMove(event) {
-				const touch1 = event.touches[0];
-				const touch2 = event.touches[1];
-				if (touch2) {
-					const currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
-					const scale = currentDistance / this.initialDistance;
-					this.size = this.size * scale;
-
-				}
-			},
-			handleTouchEnd() {
-				this.touchStartPosition1 = {
-					x: 0,
-					y: 0
-				};
-				this.touchStartPosition2 = {
-					x: 0,
-					y: 0
-				};
-				this.initialDistance = 0;
-			},
-			clickNode(e) {
-				let self = this;
-				if (e) {
-					
-					arc.getUrlBase({
-						countryUrl2: e.countryUrl2,
-						settleCountryUrl2: e.settleCountryUrl2,
-						avatarUrl: e.avatarUrl,
-					}).then((res) => {
-						self.popMould = e;
-						self.popMould.countryUrl2Base64 = res.countryUrl2Base64;
-						self.popMould.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
-						self.popMould.avatarUrlBase64 = res.avatarUrlBase64;
-						self.isPop = true;
-					});
-				}
-			},
-			confirm(e) {
-				this.queryParams.memberSettlePeriodId = e.value[0].pkId
-				this.settleName = e.value[0].settleDate
-				this.listShow = false
-			},
-			getAvarerInfo() {
-				arc.getAvarerInfo().then((res) => {
-					this.avaerInfoList = res.data;
-				});
-				arc.getMemberSettlePeriod().then(res => {
-					this.memberSettlePeriodList = [res.data]
-				})
-			},
-			getDataList() {
-				arc.getAzFramework(this.queryParams).then((res) => {
-					this.data = res.data[0];
-				});
-			},
-			clearAll() {
-				this.popShow = false
-				this.settleName = ""
-				this.queryParams = {
-					memberSettlePeriodId: "", //期数
-					memberCode: "", //会员编号
-					level: "", //代数
-				}
-				this.getDataList()
-			},
-
-		}
-	}
+      handleTouchStart(event) {
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        if (touch2) {
+          this.touchStartPosition1 = {
+            x: touch1.pageX,
+            y: touch1.pageY,
+          };
+          this.touchStartPosition2 = {
+            x: touch2.pageX,
+            y: touch2.pageY,
+          };
+          this.initialDistance = Math.hypot(
+            touch2.pageX - touch1.pageX,
+            touch2.pageY - touch1.pageY
+          );
+        }
+      },
+      handleTouchMove(event) {
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        if (touch2) {
+          const currentDistance = Math.hypot(
+            touch2.pageX - touch1.pageX,
+            touch2.pageY - touch1.pageY
+          );
+          const scale = currentDistance / this.initialDistance;
+          this.size = this.size * scale;
+        }
+      },
+      handleTouchEnd() {
+        this.touchStartPosition1 = {
+          x: 0,
+          y: 0,
+        };
+        this.touchStartPosition2 = {
+          x: 0,
+          y: 0,
+        };
+        this.initialDistance = 0;
+      },
+      clickNode(e) {
+        const self = this;
+        if (e) {
+          arc
+            .getUrlBase({
+              countryUrl2: e.countryUrl2,
+              settleCountryUrl2: e.settleCountryUrl2,
+              avatarUrl: e.avatarUrl,
+            })
+            .then((res) => {
+              self.popMould = e;
+              self.popMould.countryUrl2Base64 = res.countryUrl2Base64;
+              self.popMould.settleCountryUrl2Base64 =
+                res.settleCountryUrl2Base64;
+              self.popMould.avatarUrlBase64 = res.avatarUrlBase64;
+              self.isPop = true;
+            });
+        }
+      },
+      confirm(e) {
+        this.queryParams.memberSettlePeriodId = e.value[0].pkId;
+        this.settleName = e.value[0].settleDate;
+        this.listShow = false;
+      },
+      getAvarerInfo() {
+        arc.getAvarerInfo().then((res) => {
+          this.avaerInfoList = res.data;
+        });
+        arc.getMemberSettlePeriod().then((res) => {
+          this.memberSettlePeriodList = [res.data];
+        });
+      },
+      getDataList() {
+        arc.getAzFramework(this.queryParams).then((res) => {
+          this.data = res.data[0];
+        });
+      },
+      clearAll() {
+        this.popShow = false;
+        this.settleName = '';
+        this.queryParams = {
+          memberSettlePeriodId: '', // 期数
+          memberCode: '', // 会员编号
+          level: '', // 代数
+        };
+        this.getDataList();
+      },
+    },
+  };
 </script>
 <style lang="scss" scoped>
-	.ispop_box {
-		padding: 27rpx;
-		padding-top: 60rpx;
-		width: 670rpx;
-		font-size: 24rpx;
-		color: #333333;
+  .ispop_box {
+    padding: 27rpx;
+    padding-top: 60rpx;
+    width: 670rpx;
+    font-size: 24rpx;
+    color: #333333;
 
-		.pop_top {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
+    .pop_top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-			.poster1 {
-				height: 88rpx;
-				width: 88rpx;
-			}
+      .poster1 {
+        height: 88rpx;
+        width: 88rpx;
+      }
 
-			.poster2 {
-				width: 88rpx;
-				height: 54rpx;
-				border-radius: 10rpx;
-				margin-left: 20rpx;
-			}
+      .poster2 {
+        width: 88rpx;
+        height: 54rpx;
+        border-radius: 10rpx;
+        margin-left: 20rpx;
+      }
 
-			.top_right {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-			}
-		}
+      .top_right {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
 
-		.pop_center {
-			.center_flex {
-				display: flex;
-				align-items: center;
-				margin-top: 20rpx;
+    .pop_center {
+      .center_flex {
+        display: flex;
+        align-items: center;
+        margin-top: 20rpx;
 
-				.c1 {
-					width: 20%;
+        .c1 {
+          width: 20%;
+        }
 
-				}
+        .c2 {
+          width: 80%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: #f3f3f3;
+          border: 2rpx solid #eeeeee;
+          border-radius: 8rpx;
+          padding: 10rpx 0;
+        }
+      }
+    }
 
-				.c2 {
-					width: 80%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					background: #F3F3F3;
-					border: 2rpx solid #EEEEEE;
-					border-radius: 8rpx;
-					padding: 10rpx 0;
-				}
-			}
-		}
+    .pop_bottom {
+      margin: 20rpx 0;
+      border-top: 2rpx solid #eeeeee;
+      border-top: 2rpx solid #eeeeee;
 
-		.pop_bottom {
-			margin: 20rpx 0;
-			border-top: 2rpx solid #eeeeee;
-			border-top: 2rpx solid #eeeeee;
+      .b_flex {
+        display: flex;
 
-			.b_flex {
-				display: flex;
+        .bt1 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 22rpx;
+          flex: 1;
+        }
 
-				.bt1 {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					margin-top: 22rpx;
-					flex: 1;
-				}
+        .bt2 {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 22rpx;
+          flex: 1;
+          background: #f3f3f3;
+          border: 2rpx solid #eeeeee;
+          border-radius: 8rpx;
+          padding: 12rpx 0;
+          margin: 11rpx 18rpx;
+        }
+      }
+    }
 
-				.bt2 {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					margin-top: 22rpx;
-					flex: 1;
-					background: #F3F3F3;
-					border: 2rpx solid #EEEEEE;
-					border-radius: 8rpx;
-					padding: 12rpx 0;
-					margin: 11rpx 18rpx;
-				}
-			}
-		}
+    .btn_box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
 
-		.btn_box {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
+      .small-btn {
+        width: 312rpx;
+        height: 72rpx;
+        background: #fb3024;
+        border-radius: 34rpx;
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
 
-			.small-btn {
-				width: 312rpx;
-				height: 72rpx;
-				background: #FB3024;
-				border-radius: 34rpx;
-				font-size: 28rpx;
-				font-weight: 400;
-				color: #FFFFFF;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
+      .small-text-btn {
+        width: 312rpx;
+        height: 72rpx;
+        border: 1px solid #fb3024;
+        border-radius: 34rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 28rpx;
+        color: #fb3024;
+      }
+    }
+  }
 
-			.small-text-btn {
-				width: 312rpx;
-				height: 72rpx;
-				border: 1px solid #FB3024;
-				border-radius: 34rpx;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-size: 28rpx;
-				color: #FB3024;
+  .operate-btnboxs {
+    padding: 29rpx 26rpx;
+    background-color: #ffffff;
 
-			}
-		}
+    .d-c-c {
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-	}
+      .operate-btn {
+        width: 64rpx;
+        height: 64rpx;
+        margin: 5rpx;
+        // background: #F2F2F2;
+        border-radius: 5rpx;
+        padding: 0;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
 
-	.operate-btnboxs {
-		padding: 29rpx 26rpx;
-		background-color: #ffffff;
+  .rightPopup {
+    width: 645rpx;
+    height: 100%;
+    overflow: auto;
 
-		.d-c-c {
-			display: flex;
-			align-items: center;
-			justify-content: center;
+    .popup_top {
+      padding: 25rpx;
+      background-color: rgba(255, 234, 233, 0.65);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 28rpx;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #333333;
 
-			.operate-btn {
-				width: 64rpx;
-				height: 64rpx;
-				margin: 5rpx;
-				// background: #F2F2F2;
-				border-radius: 5rpx;
-				padding: 0;
-				box-sizing: border-box;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
+      .top_red {
+        color: #fb3024;
+      }
+    }
 
+    .popup_bottom {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
 
+      .bottom_btn {
+        flex: 1;
+        padding: 20rpx 0;
+        text-align: center;
+        font-size: 28rpx;
+      }
 
+      .thebtn1 {
+        background-color: rgba(255, 234, 233, 0.65);
+        color: #333333;
+      }
 
+      .thebtn2 {
+        background-color: #fb3024;
+        color: #ffffff;
+      }
+    }
 
+    .typesBox {
+      margin-top: 40rpx;
 
+      .typeTitle {
+        padding: 0 24rpx;
+        font-size: 30rpx;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #333333;
+      }
 
-	.rightPopup {
-		width: 645rpx;
-		height: 100%;
-		overflow: auto;
+      .choiceBox {
+        padding: 0 12rpx;
+        display: flex;
+        margin-top: 17rpx;
+        align-items: center;
+        flex-wrap: wrap;
 
-		.popup_top {
-			padding: 25rpx;
-			background-color: rgba(255, 234, 233, 0.65);
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			font-size: 28rpx;
-			font-family: Source Han Sans CN;
-			font-weight: 400;
-			color: #333333;
+        .inputbox {
+          font-size: 26rpx;
+          width: 100%;
+          padding: 20rpx 32rpx;
+          border-radius: 20rpx;
+          background-color: rgba(255, 234, 233, 0.65);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
 
-			.top_red {
-				color: #FB3024;
-			}
-		}
+        .flex_btn {
+          background-color: rgba(255, 234, 233, 0.65);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 14rpx 48rpx;
+          border-radius: 26rpx;
+          font-size: 24rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #333333;
+          margin: 17rpx 5rpx;
+        }
 
-		.popup_bottom {
-			display: flex;
-			align-items: center;
-			position: absolute;
-			left: 0;
-			bottom: 0;
-			width: 100%;
+        .timesbtn {
+          flex: 1;
+        }
 
-			.bottom_btn {
-				flex: 1;
-				padding: 20rpx 0;
-				text-align: center;
-				font-size: 28rpx;
-			}
+        .selectbtn {
+          background-color: #c8161d;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 
-			.thebtn1 {
-				background-color: rgba(255, 234, 233, 0.65);
-				color: #333333;
-			}
+  .seach {
+    background: #fff;
+    overflow: hidden;
+    padding: 20rpx 23rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    border-bottom: 2rpx solid #eee;
 
-			.thebtn2 {
-				background-color: #FB3024;
-				color: #ffffff;
-			}
-		}
+    .these {
+      border: none;
+      padding: 10rpx 0 !important;
+    }
 
-		.typesBox {
-			margin-top: 40rpx;
+    .seach_i {
+      padding: 0 20rpx;
+      border-radius: 34rpx;
+      background: #fff;
+      flex: 1;
+      background: #f5f6f8;
+      margin: 0 20rpx;
+    }
 
-			.typeTitle {
-				padding: 0 24rpx;
-				font-size: 30rpx;
-				font-family: Source Han Sans CN;
-				font-weight: bold;
-				color: #333333;
-			}
+    .neibox {
+      display: flex;
+      align-items: center;
+      font-size: 26rpx;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #303133;
+    }
 
-			.choiceBox {
-				padding: 0 12rpx;
-				display: flex;
-				margin-top: 17rpx;
-				align-items: center;
-				flex-wrap: wrap;
+    .seatch_r {
+      background: #fb3024;
+      border-radius: 50%;
+      padding: 8rpx;
+    }
+  }
 
-				.inputbox {
-					font-size: 26rpx;
-					width: 100%;
-					padding: 20rpx 32rpx;
-					border-radius: 20rpx;
-					background-color: rgba(255, 234, 233, 0.65);
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-				}
+  .mainbox {
+    padding: 26rpx 22rpx;
 
-				.flex_btn {
-					background-color: rgba(255, 234, 233, 0.65);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					padding: 14rpx 48rpx;
-					border-radius: 26rpx;
-					font-size: 24rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #333333;
-					margin: 17rpx 5rpx;
-				}
+    .main_top {
+      background: #ffffff;
+      border-radius: 20rpx;
+      padding: 20rpx 4rpx;
+      display: flex;
+      flex-wrap: wrap;
 
-				.timesbtn {
-					flex: 1;
-				}
+      .top_flex {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 15rpx 20rpx;
+        // justify-content: center;
+        width: 98rpx;
 
-				.selectbtn {
-					background-color: #C8161D;
-					color: #ffffff;
-				}
+        .theimg {
+          width: 92rpx;
+          height: 92rpx;
+          border-radius: 50%;
+        }
 
-			}
-		}
-	}
+        .flex2 {
+          font-size: 26rpx;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #666666;
+        }
+      }
+    }
 
-	.seach {
-		background: #fff;
-		overflow: hidden;
-		padding: 20rpx 23rpx;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		position: relative;
-		border-bottom: 2rpx solid #eee;
+    .main_bottom {
+      width: 100%;
+      height: calc(100vh - 600rpx);
+      margin-top: 25rpx;
+      background-color: #ffffff;
+      padding: 38rpx 0;
 
-		.these {
-			border: none;
-			padding: 10rpx 0 !important;
-		}
+      border-radius: 20rpx;
+    }
 
-		.seach_i {
-			padding: 0 20rpx;
-			border-radius: 34rpx;
-			background: #fff;
-			flex: 1;
-			background: #f5f6f8;
-			margin: 0 20rpx;
-		}
+    .scoll_main {
+      width: 700rpx;
+      height: calc(100vh - 600rpx);
+      overflow: auto;
 
-		.neibox {
-			display: flex;
-			align-items: center;
-			font-size: 26rpx;
-			font-family: PingFang SC;
-			font-weight: 400;
-			color: #999999;
-		}
-
-		.seatch_r {
-			background: #fb3024;
-			border-radius: 50%;
-			padding: 8rpx;
-		}
-
-
-	}
-
-	.mainbox {
-		padding: 26rpx 22rpx;
-
-		.main_top {
-			background: #FFFFFF;
-			border-radius: 20rpx;
-			padding: 20rpx 4rpx;
-			display: flex;
-			flex-wrap: wrap;
-
-			.top_flex {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				margin: 15rpx 20rpx;
-				// justify-content: center;
-				width: 98rpx;
-
-				.theimg {
-					width: 92rpx;
-					height: 92rpx;
-					border-radius: 50%;
-				}
-
-				.flex2 {
-					font-size: 26rpx;
-					font-family: Source Han Sans CN;
-					font-weight: 400;
-					color: #666666;
-				}
-			}
-		}
-
-		.main_bottom {
-			width: 100%;
-			height: calc(100vh - 600rpx);
-			margin-top: 25rpx;
-			background-color: #ffffff;
-			padding: 38rpx 0;
-
-			border-radius: 20rpx;
-
-		}
-
-		.scoll_main {
-			width: 700rpx;
-			height: calc(100vh - 600rpx);
-			overflow: auto;
-
-			// overflow: scroll;
-			// overflow-x: auto;
-
-		}
-	}
-</style>
\ No newline at end of file
+      // overflow: scroll;
+      // overflow-x: auto;
+    }
+  }
+</style>