list.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <base-page>
  3. <view class="uni-flex uni-row height-all page-height">
  4. <view class="common-wrap" style="-webkit-flex: 1;flex: 1;">
  5. <view class="left-wrap">
  6. <view class="left-wrap-head">
  7. <view class="head-text">会员列表</view>
  8. <!-- <view class="head-icon" @click="memberAction('addmember')">+</view> -->
  9. </view>
  10. <view class="left-wrap-content">
  11. <view class="wrap-search-box">
  12. <view class="wrap-search">
  13. <input placeholder="请输入会员账号,昵称,手机号" v-model="searchMobile" @blur="searchMember()" placeholder-style="font-size:0.14rem" />
  14. <text class="iconfont icon31sousuo" @click="searchMember()"></text>
  15. </view>
  16. </view>
  17. <scroll-view @scrolltolower="getMemberList()" scroll-y="true" class="common-scrollbar content-list" v-show="!one_judge">
  18. <view
  19. class="content-item"
  20. :class="{ active: memberId == item.member_id }"
  21. v-for="(item, index) in memberList"
  22. :key="index"
  23. @click="selectMember(item.member_id)"
  24. >
  25. <view class="item-img">
  26. <image mode="aspectFill" v-if="item.headimg" :src="$util.img(item.headimg)" @error="headError(item)"></image>
  27. <image mode="aspectFill" v-else :src="$util.img(defaultImg.head)"></image>
  28. </view>
  29. <view class="item-content">
  30. <view class="item-title">
  31. <view class="item-title-text">{{ item.nickname }}</view>
  32. <view class="item-label">{{ item.member_level_name && item.member_level ? item.member_level_name : '非会员' }}</view>
  33. </view>
  34. <view class="item-desc">
  35. <view>{{ item.mobile ? item.mobile : '' }}</view>
  36. <view>
  37. 余额:
  38. <text>{{ parseFloat(parseFloat(item.balance) + parseFloat(item.balance_money)).toFixed(2) }}</text>
  39. </view>
  40. </view>
  41. </view>
  42. </view>
  43. <view v-if="memberList.length == 0" class="empty">
  44. <image :src="$util.img('public/uniapp/cashier/member-empty.png')" mode="widthFix"></image>
  45. <view class="tips">暂无会员</view>
  46. </view>
  47. </scroll-view>
  48. <view class="add-member"><button type="default" class="primary-btn" @click="memberAction('addmember')">添加会员</button></view>
  49. </view>
  50. </view>
  51. <view class="right-wrap">
  52. <view class="right-wrap-head"><view class="head-text">会员详情</view></view>
  53. <nc-member-detail v-if="!one_judge && memberId" ref="memberDetail" :member-id="memberId"></nc-member-detail>
  54. <view class="empty" v-else>
  55. <image :src="$util.img('public/uniapp/cashier/member-empty.png')" mode="widthFix"></image>
  56. <view class="tips">暂无会员</view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <!-- 添加会员 -->
  62. <uni-popup ref="addmemberPop">
  63. <view class="pop-box addmemberPop-box">
  64. <view class="pop-header">
  65. <view class="pop-header-text">添加会员</view>
  66. <view class="pop-header-close" @click="popClose('addmember')"><i class="iconguanbi1 iconfont"></i></view>
  67. </view>
  68. <view class="common-scrollbar pop-content">
  69. <view class="form-content">
  70. <view class="form-item">
  71. <view class="form-label">
  72. <text class="required">*</text>
  73. 手机号:
  74. </view>
  75. <view class="form-inline search-wrap"><input type="number" class="form-input" v-model="addMemberData.mobile" placeholder="请输入会员手机号" /></view>
  76. </view>
  77. <view class="form-item">
  78. <view class="form-label">
  79. <text class="required"></text>
  80. 会员昵称:
  81. </view>
  82. <view class="form-inline search-wrap"><input type="text" class="form-input" v-model="addMemberData.nickname" placeholder="请输入会员昵称" /></view>
  83. </view>
  84. <view class="form-item">
  85. <view class="form-label">
  86. <text class="required"></text>
  87. 性别:
  88. </view>
  89. <view class="form-inline search-wrap">
  90. <uni-data-checkbox v-model="addMemberData.sex" selectedColor="#8558FA" :localdata="sex"></uni-data-checkbox>
  91. </view>
  92. </view>
  93. <view class="form-item">
  94. <view class="form-label">
  95. <text class="required"></text>
  96. 生日:
  97. </view>
  98. <view class="form-inline"><uni-datetime-picker :end="endTime" v-model="addMemberData.birthday" type="date" :clearIcon="false" /></view>
  99. </view>
  100. </view>
  101. </view>
  102. <view class="pop-bottom"><button class="primary-btn" @click="addMember">确定</button></view>
  103. </view>
  104. </uni-popup>
  105. <uni-popup ref="refundBalance">
  106. <view class="pop-box refund-balance-box">
  107. <view class="pop-header">
  108. <view class="pop-header-text">退储值</view>
  109. <view class="pop-header-close" @click="$refs.refundBalance.close()"><i class="iconguanbi1 iconfont"></i></view>
  110. </view>
  111. <view class="pop-content" v-if="refundData">
  112. <view class="info-item">
  113. <view class="title">账户可用储值:</view>
  114. <view class="data">¥{{ $util.moneyFormat(parseFloat(refundData.member_account.balance) + parseFloat(refundData.member_account.balance_money)) }}</view>
  115. </view>
  116. <view class="info-item">
  117. <view class="title">实充储值:</view>
  118. <view class="data">¥{{ refundData.refund_total_balance | moneyFormat }}</view>
  119. </view>
  120. <view class="info-item">
  121. <view class="title">已使用储值:</view>
  122. <view class="data">¥{{ refundData.use_total_balance | moneyFormat }}</view>
  123. </view>
  124. <view class="info-item">
  125. <view class="title">可退储值金额:</view>
  126. <view class="data">¥{{ refundData.can_refund_balance | moneyFormat }}</view>
  127. </view>
  128. <view class="info-item">
  129. <view class="title">退还金额:</view>
  130. <view class="data"><input type="number" value="" v-model="refundData.refund_balance" /></view>
  131. </view>
  132. <view class="info-item">
  133. <view class="title">退款方式:</view>
  134. <view class="data refund-type">
  135. <view
  136. class="value-item"
  137. :class="{ active: index == refundTransferType }"
  138. @click="refundTransferType = index"
  139. v-for="(item, index) in refundTransferTypeList"
  140. :key="index"
  141. >
  142. {{ item.name }}
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. <view class="pop-bottom">
  148. <button class="primary-btn" @click="confirmRefundBalance">确定</button>
  149. <button class="default-btn" @click="$refs.refundBalance.close()">取消</button>
  150. </view>
  151. </view>
  152. </uni-popup>
  153. </base-page>
  154. </template>
  155. <script>
  156. import list from './public/js/list.js';
  157. import dataTable from '@/components/uni-data-table/uni-data-table.vue';
  158. import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
  159. export default {
  160. components: { dataTable, ncMemberDetail },
  161. mixins: [list]
  162. };
  163. </script>
  164. <style>
  165. .pop-box >>> .td {
  166. line-height: 1.7;
  167. }
  168. .right-wrap >>> .member-head {
  169. display: none;
  170. }
  171. </style>
  172. <style lang="scss" scoped>
  173. @import './public/css/member.scss';
  174. </style>