first

pages/memberCenter/member/conponents/ConfirmManual.vue

@@ -0,0 +1,108 @@
+<template>
+  <uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,.5)">
+    <view class="psw-wrapper">
+      <view class="psw-top">
+        <view class="close-wrapper">
+          <view class="psw-close" @tap="close">
+            <image src="/static/iconImg/icon-x.svg"></image>
+          </view>
+        </view>
+        <view class="psw-title">请输入支付密码</view>
+        <view class="sub-tips">会员调账</view>
+        <view class="amount">{{ vdata.amount }}</view>
+      </view>
+      <view class="psw-input">
+        <JPasswordInput ref="refPswInput" margin="0 20px" @inputChange="inputChange" />
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue"
+import infoBox from '@/commons/utils/infoBox.js';
+import { $memberManual } from "@/http/apiManager"
+import emit from '@/commons/utils/emit.js'
+import go from '@/commons/utils/go.js'
+import { Base64 } from "js-base64";
+const refPswInput = ref(null)
+const popup = ref(null)
+const vdata = reactive({})
+const open = (val) => {
+  val.addOrRedUce
+  vdata.amount = val.addOrRedUce == 'add' ? '+' + val.num : '-' + val.num
+  vdata.memberId = val.mbrId
+  popup.value.open()
+}
+const close = () => popup.value.close()
+
+const inputChange = (e) => {
+  if (e.length >= 6) return manual(e)
+}
+const manual = (pswd) => {
+  $memberManual({ memberId: vdata.memberId, changeAmount: vdata.amount, currentPassword: Base64.encode(pswd) }).then(res => {
+    infoBox.showToast('调账成功').then(r => {
+      close()
+	  emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
+      go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
+    })
+  }).catch(err => {
+    refPswInput.value.clearInput()
+  })
+}
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+.psw-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  justify-content: space-between;
+  width: 650rpx;
+  height: 496rpx;
+  border-radius: 32rpx;
+  background-color: #fff;
+
+  .psw-title {
+    text-align: center;
+    color: #000000ff;
+    font-size: 30rpx;
+    font-weight: 500;
+  }
+
+  .close-wrapper {
+    .psw-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 106rpx;
+      height: 106rpx;
+
+      image {
+        width: 80rpx;
+        height: 80rpx;
+      }
+    }
+  }
+
+  .psw-input {
+    margin-bottom: 50rpx;
+    width: 650rpx;
+  }
+
+  .sub-tips {
+    margin: 30rpx 0 20rpx 0;
+    color: #808080ff;
+    font-size: 30rpx;
+    text-align: center;
+  }
+
+  .amount {
+    text-align: center;
+    color: #000000ff;
+    font-size: 50rpx;
+    font-weight: 500;
+  }
+}
+</style>

pages/memberCenter/member/detail.vue

@@ -0,0 +1,180 @@
+<template>
+  <JeepayBackground :bgColorStyle="{}">
+
+    <JeepayCustomNavbar textColor="#fff"
+      bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="会员详情"
+      backCtrl="back" />
+    <JeepayTableListItem viewClass="list-item-by-detail" :logo="vdata.record.avatarUrl" :title="vdata.record.mbrName"
+      :subtitle="vdata.record.mbrTel" :moreBtnList="list" :logoStyle="{ borderRadius: '50%' }" />
+
+    <!-- 账户金额 -->
+    <JeepayCard :viewStyle="{ marginTop: '50rpx' }">
+      <view class="pay-wrapper">
+        <view>
+          <JeepayDescviewItem title="账户余额 (元)" />
+          <view class="pay-amount">{{ (vdata.record.balance / 100).toFixed(2) }}</view>
+        </view>
+        <view class="pay-shift" @tap="toManual">调账
+          <image src="/static/member/member-arrow.svg"></image>
+        </view>
+      </view>
+    </JeepayCard>
+    <JeepayCard viewStyle="margin-top: 50rpx" editText="编辑信息"
+      @editTap="go.to('PAGES_MEMBER_EDIT', { mbrId: vdata.record.mbrId })">
+      <JeepayDescview>
+        <JeepayDescviewItem title="会员编号" :desc="vdata.record.mbrId" />
+        <JeepayDescviewItem title="会员备注" :desc="vdata.record.remark ? vdata.record.remark : '-'" />
+        <JeepayDescviewItem title="创建时间" :desc="vdata.record.createdAt" />
+      </JeepayDescview>
+    </JeepayCard>
+
+    <JeepayCard viewStyle="margin-top: 40rpx">
+      <JeepayTableListItem v-if="ent.has('ENT_MEMBER_EDIT')" title="会员状态" subtitle="状态禁用后，该会员将无法使用">
+        <template #titleRight>
+          <JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true"
+            :updateStateFunc="updateStateFunc" />
+        </template>
+      </JeepayTableListItem>
+
+    </JeepayCard>
+
+    <JSinglePopup ref="single" :list="list" activeColor="#FF5B4C" />
+    <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
+  </JeepayBackground>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import { reqLoad, API_URL_MEMBERS } from '@/http/apiManager.js'
+import infoBox from '@/commons/utils/infoBox.js';
+import go from '@/commons/utils/go.js'
+import emit from '@/commons/utils/emit.js'
+import ent from '@/commons/utils/ent.js'
+
+const single = ref()
+const jeepayPopupConfirmRef = ref()
+
+const list = reactive([
+  { label: '调账', value: 'delete', fun: toManual },
+])
+
+onLoad((options) => {
+  refData(options.mbrId)
+})
+
+const vdata = reactive({
+  record: {}
+})
+
+// 监听 更新事件 
+onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_DETAIL))
+uni.$on(emit.ENAME_REF_MEMBER_DETAIL, function (data) {
+  refData(vdata.record.mbrId)
+})
+
+function refData (mbrId) {
+  reqLoad.getById(API_URL_MEMBERS, mbrId).then(({ bizData }) => {
+    vdata.record = bizData
+  })
+}
+
+function updateStateFunc (state) {
+  return reqLoad.updateById(API_URL_MEMBERS, vdata.record.mbrId, { state: state }).then(() => {
+    emit.pageEmit(emit.ENAME_REF_MEMBER_LIST)
+    infoBox.showSuccessToast("修改成功");
+  })
+}
+
+function toManual () {
+  go.to('PAGES_MEMBER_RECHARGE_MEMBERMANUAL', { mbrId: vdata.record.mbrId })
+}
+
+function deleteFunc () {
+  return reqLoad.delById(API_URL_MEMBERS, vdata.record.mbrId).then(() => {
+    infoBox.showSuccessToast("删除成功");
+    go.back(1, emit.ENAME_REF_MEMBER_LIST) // 返回页面 && 更新 
+  })
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+.sex-info-text {
+  image {
+    width: 30rpx;
+    height: 30rpx;
+    margin-right: 10rpx;
+  }
+}
+
+.sta-info {
+  display: flex;
+  margin-top: 50rpx;
+  padding: 0 50rpx;
+
+  .sta-photo {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .info-main {
+    flex: 1;
+    margin-left: 30rpx;
+    color: #fff;
+
+    .info-name {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 33rpx;
+      font-weight: 400;
+
+      image {
+        width: 70rpx;
+        height: 70rpx;
+      }
+    }
+
+    .info-phone {
+      margin-top: 16rpx;
+      color: rgba(251, 252, 253, 0.7);
+      font-size: 25rpx;
+      font-weight: 400;
+    }
+  }
+}
+
+.pay-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .pay-amount {
+    margin: 40rpx;
+    color: #000000ff;
+    font-size: 50rpx;
+    font-weight: 500;
+  }
+
+  .pay-shift {
+    display: flex;
+    align-items: center;
+    color: #2980fdff;
+    font-size: 33rpx;
+
+    image {
+      margin-right: 40rpx;
+      width: 44rpx;
+      height: 44rpx;
+    }
+  }
+}
+</style>

pages/memberCenter/member/edit.vue

@@ -0,0 +1,129 @@
+<template>
+	<JeepayBackground>
+	  <view class="page-wrapper jeepay-edit-form">
+		<JeepayCustomNavbar :title="vdata.mbrId ? '修改会员信息' : '创建会员' " backCtrl="back" />
+		<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
+			
+		  <uni-forms-item required label="会员名称" name="mbrName">
+			  <uni-easyinput v-model="vdata.formData.mbrName" placeholder="请输入会员名称" :inputBorder="false"></uni-easyinput>
+		  </uni-forms-item>
+		  
+		  <uni-forms-item required label="手机号" name="mbrTel">
+			  <text v-if="vdata.mbrId">{{ vdata.formData.mbrTel }}</text>
+			  <uni-easyinput v-else v-model="vdata.formData.mbrTel" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
+		  </uni-forms-item>
+		  
+		<JeepayTableListItem v-if="vdata.mbrId" title="状态" subtitle="状态禁用后，会员将无法支付">
+			<template #titleRight>
+				<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false'  />
+			</template>
+		</JeepayTableListItem>
+		
+		  <uni-forms-item required label="备注" name="remark">
+				<uni-easyinput v-model="vdata.formData.remark" placeholder="请输入备注" :inputBorder="false"></uni-easyinput>
+		  </uni-forms-item>
+	   
+	   </uni-forms>
+		
+		<view class="confirm-wrapper">
+		  <view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc"> {{ vdata.mbrId ? '确认修改' : '确认创建' }}</view>
+		</view>
+		
+	  </view>
+	</JeepayBackground>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { reqLoad, API_URL_MEMBERS } from '@/http/apiManager.js'
+import infoBox from '@/commons/utils/infoBox.js';
+import go from '@/commons/utils/go.js'
+import formUtil from '@/commons/utils/formUtil.js'
+import emit from '@/commons/utils/emit.js'
+
+const formRef = ref()
+
+onLoad((options) => {
+	
+	// 修改页面 
+	if(options.mbrId){
+		vdata.mbrId = options.mbrId
+		reqLoad.getById(API_URL_MEMBERS, vdata.mbrId).then(({bizData}) => {
+			vdata.formData = bizData
+		})
+	}
+	
+})
+
+	
+const rules = {
+	mbrName: {
+		rules:[ formUtil.rules.requiredInput() ],
+	},
+	mbrTel: {
+		rules:[ formUtil.rules.requiredInput(), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile) ],
+	},
+}
+
+
+const vdata = reactive({
+	
+	mbrId: null, // 新建 or 修改 
+	
+	 // 表单数据 
+	formData: {
+		state: 1
+	}
+})
+
+
+function confirmFunc(){
+	
+	formUtil.validate(formRef.value).then(() => {
+		return reqLoad.addOrUpdate(vdata.mbrId, API_URL_MEMBERS, vdata.formData)
+	})
+	.then(( {bizData} ) => {
+		emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
+		go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
+	})
+	
+}
+
+</script>
+
+
+<style lang="scss" scoped>
+input {
+  font-size: 32rpx;
+}
+.f-label {
+	width: 240rpx;
+}
+.selected-sex {
+  display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-top: 45rpx;
+	margin-bottom: 10rpx;
+  font-size: 32rpx;
+  color: #b3b3b3;
+  image {
+    width: 120rpx;
+    height: 120rpx;
+		margin-top: -40rpx;
+  }
+	.selected-box {
+		color: #000;
+	}
+}
+.confirm-wrapper {
+  padding: 50rpx 30rpx;
+  .confirm-button {
+    height: 110rpx;
+    color: #fff;
+    border-radius: 20rpx;
+    background: $jeepay-bg-primary;
+  }
+}
+</style>

pages/memberCenter/member/member.vue

@@ -0,0 +1,116 @@
+<template>
+  <view class="page-wrapper">
+		<JeepayCustomNavbar title="会员管理" backCtrl="back" />
+    <view class="sta-input" @tap="go.toSearchPage('member')">
+      <view class="input-main">
+        <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
+        搜索会员名称、手机号
+      </view>
+      <!-- <image class="icon-more" src="/static/iconImg/icon-more.svg" mode="scaleToFill" /> -->
+    </view>
+	
+	
+	<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
+		<template #tableBody="{ record }">
+			<MemberRender :record="record" />
+		</template>
+	</JeepayTableList>
+	
+    <view class="footer-wrapper">
+      <view class="footer-button footer-button-style">
+        <button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="createMember">创建会员</button>
+      </view>
+    </view>
+  </view>
+  
+  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
+  
+  
+</template>
+
+
+<script setup>
+import { nextTick, reactive, ref } from "vue"
+import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
+import go from '@/commons/utils/go.js'
+import emit from '@/commons/utils/emit.js'
+import { reqLoad, API_URL_MEMBERS } from "@/http/apiManager.js"
+import MemberRender from '@/pages/list/render/MemberRender.vue'
+
+const jeepayTableListRef = ref()
+const jeepayPopupConfirmRef = ref()
+
+onReachBottom(() => { })
+
+// // 监听 更新事件 
+onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_LIST))
+uni.$on(emit.ENAME_REF_MEMBER_LIST, function(data){
+	jeepayTableListRef.value.refTable(true)
+})
+
+// 请求
+function reqTableDataFunc (params) {
+    return reqLoad.list(API_URL_MEMBERS, params)
+}
+
+
+// 创建会员
+const createMember = () => {
+  go.to("PAGES_MEMBER_EDIT")
+}
+
+	
+</script>
+
+<style lang="scss" scoped>
+.sta-input {
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+  height: 110rpx;
+  background-color: $J-bg-ff;
+  .input-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 70rpx;
+    background-color: $J-bg-f5;
+    border-radius: $J-b-r12;
+    color: rgba(0, 0, 0, 0.35);
+    font-size: 27rpx;
+    font-weight: 400;
+    image {
+      padding: 22rpx;
+      width: 26rpx;
+      height: 26rpx;
+    }
+  }
+  .icon-more {
+    margin-left: 30rpx;
+    width: 70rpx;
+    height: 70rpx;
+  }
+}
+.footer-wrapper {
+  height: 170rpx;
+  background-color: transparent;
+  .footer-button {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 30rpx;
+    button {
+      height: 110rpx;
+      font-size: 33rpx;
+      font-weight: 500;
+      color: $J-color-tff;
+      border-radius: 20rpx;
+      background: $jeepay-bg-primary;
+    }
+    .hover-button {
+      opacity: 0.5;
+    }
+  }
+}
+</style>

pages/memberCenter/member/memberManual.vue

@@ -0,0 +1,195 @@
+<template>
+  <view class="page-wrapper">
+    <view class="member-header">
+      <view class="left">
+        <view class="top-title">会员当前余额 (元)</view>
+        <view class="member-amount">{{ (vdata.balance / 100).toFixed(2) }}</view>
+      </view>
+      <image :src="vdata.avatarUrl" class="member-photo"></image>
+    </view>
+    <view class="m-wrapper" @tap="openAddOrRed">
+      <view class="left">
+        <view class="sub-title">调账方式</view>
+        <view class="m-type">{{ vdata.addOrRedUce == 'add' ? '加款' : '减款' }} </view>
+      </view>
+      <view class="right">
+        <image src="/static/iconImg/icon-arrow-right.svg" class="member-photo"></image>
+      </view>
+    </view>
+    <view class="m-wrapper m-amout">
+      <view class="left">
+        <view class="sub-title">调账金额</view>
+        <input class="m-input" type="digit" v-model="vdata.num" placeholder="请输入调账金额" @input="inputChange">
+      </view>
+      <view class="right">
+        元
+      </view>
+    </view>
+    <view class="ba-wrapper">
+      <view class="sub-title">调账后金额</view>
+      <view class="m-balance">￥{{ (vdata.manualAmount / 100).toFixed(2) }}</view>
+    </view>
+    <view class="but-wrapper">
+      <Button @tap="openManual">确认调账</Button>
+    </view>
+  </view>
+  <ConfirmManual ref="refManual" />
+  <JSinglePopup :list="list" ref="refSingle" />
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+import { onLoad } from '@dcloudio/uni-app'
+import ConfirmManual from "./conponents/ConfirmManual.vue"
+import { $memberManual, reqLoad, API_URL_MEMBERS } from "@/http/apiManager"
+import infoBox from '@/commons/utils/infoBox.js';
+onLoad((options) => {
+  getMemberInfos(options.mbrId)
+})
+const vdata = reactive({})
+const refSingle = ref(null)
+const refManual = ref(null)
+const list = [
+  {
+    label: '加款', value: 'add', fun: () => {
+      vdata.addOrRedUce = 'add'
+      if (vdata.num) return vdata.manualAmount = (vdata.balance * 1 + vdata.num * 100)// 隐式转换后 在进行加法运算 
+    }
+  },
+  {
+    label: '减款', value: 'reduce', fun: () => {
+      vdata.addOrRedUce = 'reduce'
+      if (vdata.num) return vdata.manualAmount = (vdata.balance - vdata.num * 100)
+    }
+  },
+]
+const styles = {
+  backgroundColor: 'transparent',
+  color: '#000',
+  fontSize: '32rpx',
+}
+function getMemberInfos (mbrId) {
+  reqLoad.getById(API_URL_MEMBERS, mbrId).then(({ bizData }) => {
+    Object.assign(vdata, bizData)
+    vdata.manualAmount = bizData.balance
+    vdata.addOrRedUce = 'add' //赋值初始值 加款
+  })
+}
+const openAddOrRed = () => {
+  refSingle.value.open()
+}
+const inputChange = (e) => {
+  if (vdata.addOrRedUce == 'add') {
+    vdata.manualAmount = (vdata.balance * 1 + vdata.num * 100)// 隐式转换后 在进行加法运算 
+    return
+  }
+  return vdata.manualAmount = (vdata.balance - vdata.num * 100)
+}
+const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
+const openManual = () => {
+  if (vdata.num <= 0) return infoBox.showToast('调账金额 不能为零')
+  if (!REG_AMOUNT.test(vdata.num)) return infoBox.showToast('请输入正数金额 保留两位小数')
+  refManual.value.open(vdata)
+}
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+  background-color: #fff !important;
+  min-height: 100vh;
+
+  .sub-title {
+    color: #4c4c4cff;
+    font-size: 30rpx;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .member-header {
+    display: flex;
+    justify-content: space-between;
+    margin: 35rpx;
+    padding-bottom: 50rpx;
+    border-bottom: 1rpx solid #0000000f;
+
+    .top-title {
+      color: #808080ff;
+      font-size: 26rpx;
+    }
+
+    .member-amount {
+      margin-top: 20rpx;
+      color: #000000ff;
+      font-size: 50rpx;
+      font-weight: 500;
+    }
+
+    image {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 50%;
+    }
+  }
+}
+
+
+.m-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  width: 680rpx;
+  height: 120rpx;
+  border-radius: 32rpx;
+  opacity: 1;
+  background: #f7f7f7ff;
+
+  .left {
+    display: flex;
+    margin-left: 40rpx;
+
+    .m-type {
+      margin-left: 78rpx;
+    }
+  }
+
+  .right {
+    image {
+      width: 108rpx;
+      height: 120rpx;
+    }
+  }
+}
+
+.m-amout {
+  margin-top: 30rpx;
+
+  .m-input {
+    margin-left: 78rpx;
+  }
+
+  .right {
+    margin-right: 40rpx;
+    color: #00000080;
+    font-size: 32rpx;
+  }
+}
+
+.ba-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin: 50rpx auto;
+  width: 600rpx;
+
+  .m-balance {
+    color: #000000ff;
+    font-size: 30rpx;
+    font-weight: 500;
+  }
+}
+
+.but-wrapper {
+  margin: 105rpx auto;
+  width: 400rpx;
+}
+</style>