templateMessage.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. <template>
  2. <view class="content">
  3. <no-none v-if='list.length<=0'></no-none>
  4. <block v-else>
  5. <view style="margin-top: 30rpx;" class="item" v-for="(item,index) of list" :key='index'>
  6. <view class="border-b item-title flex-y-center">
  7. <image :src="item.avatar" mode="aspectFill" class="avatar" @click="previewImg(item.avatar)"></image>
  8. <text>{{item.nickname || '未知用户'}} {{item.tel || ''}}</text>
  9. <switch :checked="item.checked" type="checkbox" @change="onChooseUser($event,index)"
  10. style="margin-left: auto;" />
  11. </view>
  12. <view class="item-bottom flex-y-center">
  13. <view class="flex-grow-1">
  14. <view class="box-pack-between item-bottom-right">
  15. <text><text class="item-bottom-number">会员等级</text>:{{item.level}}</text>
  16. </view>
  17. <view class="box-pack-between item-bottom-right flex-y-center">
  18. <text><text class="item-bottom-number">门店昵称</text>:{{item.store_id}} </text>
  19. </view>
  20. <view class="box-pack-between item-bottom-right flex-y-center">
  21. <text><text class="item-bottom-number">已推送</text>:{{item.yitui}} </text>
  22. </view>
  23. <view class="box-pack-between item-bottom-right flex-y-center">
  24. <text><text class="item-bottom-number">剩余</text>:{{item.shengyu}} </text>
  25. </view>
  26. <view class="box-pack-between item-bottom-right flex-y-center">
  27. <text><text class="item-bottom-number">类型</text>:{{item.type == 1?'微信':'支付宝'}} </text>
  28. </view>
  29. <view class="box-pack-between item-bottom-right flex-y-center">
  30. <text><text class="item-bottom-number">时间</text>:{{item.createtime}} </text>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </block>
  36. <view style="height: 90px;"></view>
  37. <navigator style="margin-bottom:0" url='./addCoupon' hover-class="none" class="bottom-bar">
  38. <view class="btn" style="background: #fff;border:1px solid #ddd;color:#888" @click="showScreen">筛选</view>
  39. <view class="btn" @click="showAddPop">+新增推送</view>
  40. </navigator>
  41. <uni-popup ref="popup" type="bottom" background-color="#fff" style="z-index:100" :is-mask-click="false"
  42. :mask-click="false">
  43. <view class="screen-pop">
  44. <view class="cell">
  45. <view class="label">会员昵称</view>
  46. <view class="desc"><input type="text" v-model="screen.name" class="input-box" placeholder="请输入" />
  47. </view>
  48. </view>
  49. <view class="cell">
  50. <view class="label">手机号码</view>
  51. <view class="desc"><input type="text" v-model="screen.tel" class="input-box" placeholder="请输入" />
  52. </view>
  53. </view>
  54. <view class="cell">
  55. <view class="label">身份</view>
  56. <view class="desc">
  57. <picker :range="levels" range-key="name" @change="onChangeLevel">
  58. <input type="text" :value="screen.level_name" class="input-box" placeholder="请输入" />
  59. </picker>
  60. </view>
  61. </view>
  62. <view class="cell">
  63. <view class="label">时间</view>
  64. <view class="desc flex flex-between flex-y-center">
  65. <picker mode="date" @change="onChangeTime($event,'start_time')">
  66. <input type="text" :value="screen.start_time" placeholder="开始时间" class="input-box"
  67. style="text-align: center;" disabled>
  68. </picker>
  69. <view>—</view>
  70. <picker mode="date" @change="onChangeTime($event,'end_time')">
  71. <input type="text" :value="screen.end_time" placeholder="结束时间" class="input-box"
  72. style="text-align: center;" disabled>
  73. </picker>
  74. </view>
  75. </view>
  76. <view class="btns">
  77. <view class="btn reset-btn" @click="onResetScreen">重置</view>
  78. <view class="btn submit-btn" @click="onSubmitScreen">确定</view>
  79. </view>
  80. <view class="is-iphone-x"></view>
  81. </view>
  82. </uni-popup>
  83. <uni-popup ref="addPopup" type="bottom" background-color="#fff" style="z-index:100" :is-mask-click="false"
  84. :mask-click="false">
  85. <view class="screen-pop">
  86. <view class="cell">
  87. <view class="label">推送文案</view>
  88. <view class="desc"><input type="text" v-model="sendInfo.textarea" class="input-box"
  89. placeholder="请输入" />
  90. </view>
  91. <view class="tips">注意:文案加起来不能超过19个字符。如果有赠送积分,推送文案内要写推送积分数。举例:您好,本次积分活动赠送34积分</view>
  92. </view>
  93. <view class="cell">
  94. <view class="label">赠送积分</view>
  95. <view class="desc"><input type="text" v-model="sendInfo.integral" class="input-box"
  96. placeholder="请输入" />
  97. </view>
  98. <view class="tips">注意注意:假设不赠送积分,则填0</view>
  99. </view>
  100. <view class="btns">
  101. <view class="btn reset-btn" @click="onResetAdd">取消</view>
  102. <view class="btn submit-btn" @click="onSubmitAdd">推送</view>
  103. </view>
  104. <view class="is-iphone-x"></view>
  105. </view>
  106. </uni-popup>
  107. </view>
  108. </template>
  109. <script>
  110. export default {
  111. data() {
  112. return {
  113. list: [],
  114. page: 1,
  115. is_load: false,
  116. levels: [{
  117. id: 55,
  118. name: "普通会员"
  119. }],
  120. screen: {
  121. name: "",
  122. level: "",
  123. tel: "",
  124. start_time: "",
  125. end_time: ""
  126. },
  127. sendUserIds: "",
  128. sendInfo: {
  129. textarea: "",
  130. integral: ""
  131. }
  132. }
  133. },
  134. onLoad() {
  135. this.getLevels()
  136. },
  137. onShow() {
  138. this.page = 1;
  139. this.list = [];
  140. this.http();
  141. },
  142. onReachBottom(e) {
  143. if (!this.is_load) {
  144. this.page = this.page + 1;
  145. this.http();
  146. }
  147. },
  148. methods: {
  149. onChooseUser(e, index) {
  150. console.log(e, index)
  151. this.list[index].checked = e.detail.value
  152. },
  153. showScreen() {
  154. this.$refs.popup.open('bottom')
  155. },
  156. getLevels() {
  157. this.request({
  158. url: "alipaycoupon/level_index",
  159. data: {
  160. admin_id: uni.getStorageSync("admin_id"),
  161. },
  162. showLoading: true,
  163. }).then(res => {
  164. console.log(res, "res")
  165. if (res.code === "200") {
  166. this.levels = this.levels.concat(res.data)
  167. }
  168. });
  169. },
  170. onChangeLevel(e) {
  171. this.screen.level_name = this.levels[e.detail.value].name
  172. this.screen.level = this.levels[e.detail.value].id
  173. },
  174. onChangeTime(e, name) {
  175. // console.log(e)
  176. this.screen[name] = e.detail.value
  177. },
  178. onResetScreen() {
  179. this.screen = {
  180. name: "",
  181. level: "",
  182. tel: "",
  183. start_time: "",
  184. end_time: ""
  185. }
  186. this.$refs.popup.close()
  187. this.http()
  188. },
  189. onSubmitScreen() {
  190. this.page = 1
  191. this.list = []
  192. if (this.screen.start_time && this.screen.end_time) {
  193. let start = this.screen.start_time
  194. let end = this.screen.end_time
  195. if (Date.parse(start.replace(/-/g, '/')) > Date.parse(end.replace(/-/g, '/'))) {
  196. this.screen.start_time = end
  197. this.screen.end_time = start
  198. }
  199. }
  200. this.$refs.popup.close()
  201. this.http()
  202. },
  203. showAddPop() {
  204. let arr = this.list.filter(item => {
  205. return item.checked
  206. })
  207. console.log(arr)
  208. if (arr.length > 0) {
  209. this.sendUserIds = arr.map(item => {
  210. return item.id
  211. })
  212. this.$refs.addPopup.open("bottom")
  213. } else {
  214. uni.showToast({
  215. title: "请选择推送对象",
  216. icon: "none"
  217. })
  218. }
  219. },
  220. onResetAdd() {
  221. this.list.map(item => {
  222. item.checked = false
  223. })
  224. this.sendInfo = {
  225. textarea: "",
  226. integral: ""
  227. }
  228. this.$refs.addPopup.close()
  229. },
  230. onSubmitAdd() {
  231. if (this.sendInfo.textarea == '' || this.sendInfo.integral == '') {
  232. uni.showToast({
  233. title: "请完善表单后提交",
  234. icon: "none"
  235. })
  236. return false
  237. }
  238. this.request({
  239. url: 'alipaycoupon/weintegral_get',
  240. data: {
  241. admin_id: uni.getStorageSync("admin_id"),
  242. textarea: this.sendInfo.textarea,
  243. integral: this.sendInfo.integral,
  244. data_id: this.sendUserIds.join(',')
  245. },
  246. }).then(res => {
  247. if (res.code == 200) {
  248. uni.showModal({
  249. content: res.message,
  250. showCancel: false,
  251. success: (r) => {
  252. this.sendInfo = {
  253. textarea: "",
  254. integral: ""
  255. }
  256. this.$refs.addPopup.close()
  257. this.list = []
  258. this.page = 1
  259. this.http()
  260. }
  261. })
  262. } else {
  263. uni.showToast({
  264. title: res.message,
  265. icon: 'none'
  266. })
  267. }
  268. }).catch(res => {
  269. uni.showToast({
  270. title: res.message,
  271. icon: 'none'
  272. })
  273. })
  274. },
  275. previewImg(src) {
  276. if (src) {
  277. uni.previewImage({
  278. urls: [src]
  279. });
  280. }
  281. },
  282. http() {
  283. let url = "alipaycoupon/integral_data";
  284. this.request({
  285. url,
  286. data: {
  287. admin_id: uni.getStorageSync("admin_id"),
  288. page: this.page,
  289. limit: 10,
  290. name: this.screen.name,
  291. level: this.screen.level,
  292. tel: this.screen.tel,
  293. start_time: this.screen.start_time,
  294. end_time: this.screen.end_time,
  295. },
  296. showLoading: true,
  297. }).then(res => {
  298. console.log(res, "res")
  299. if (res.code === "200") {
  300. let arr = res.data
  301. if (arr.length > 0) {
  302. arr.map(item => {
  303. item.checked = false
  304. })
  305. this.list = this.list.concat(arr);
  306. this.is_load = false
  307. } else {
  308. this.is_load = true
  309. }
  310. }
  311. });
  312. },
  313. },
  314. }
  315. </script>
  316. <style lang="scss">
  317. page {
  318. background: #F5F7FA;
  319. }
  320. .page-top {
  321. background: #fff;
  322. position: sticky;
  323. top: 0;
  324. z-index: 99;
  325. padding: 10rpx 0;
  326. box-shadow: 0 5rpx 10rpx #f0f0f0;
  327. }
  328. .item {
  329. width: 690rpx;
  330. background: #ffffff;
  331. margin: 0 auto;
  332. padding: 0rpx 24rpx;
  333. opacity: 1;
  334. border-radius: 8rpx;
  335. box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
  336. .item-title {
  337. opacity: 1;
  338. font-size: 28rpx;
  339. font-family: PingFang SC, PingFang SC-Medium;
  340. font-weight: 500;
  341. color: #333333;
  342. padding: 24rpx 0;
  343. .avatar {
  344. display: block;
  345. width: 48rpx;
  346. height: 48rpx;
  347. border-radius: 50%;
  348. margin-right: 16rpx;
  349. }
  350. }
  351. .item-bottom {
  352. font-size: 26rpx;
  353. padding: 20rpx 0 24rpx 0;
  354. color: #666666;
  355. .item-bottom-left {
  356. width: 90rpx;
  357. height: 90rpx;
  358. margin-right: 24rpx;
  359. min-width: 90rpx;
  360. margin-bottom: 16rpx;
  361. }
  362. .item-bottom-right {
  363. margin-bottom: 16rpx;
  364. .item-bottom-number {
  365. color: #99A0AD;
  366. }
  367. }
  368. }
  369. }
  370. .color-ffa {
  371. color: #3387FF;
  372. }
  373. .icongengduo {
  374. color: #999;
  375. font-size: 24rpx;
  376. }
  377. .bottom-bar {
  378. position: fixed;
  379. bottom: 0px;
  380. width: 100%;
  381. z-index: 50;
  382. background: #FFFFFF;
  383. padding: 30rpx 0;
  384. display: flex;
  385. flex-flow: row nowrap;
  386. justify-content: space-around;
  387. align-items: center;
  388. }
  389. .bottom-bar .btn {
  390. width: 300rpx;
  391. height: 98rpx;
  392. opacity: 1;
  393. background: #04BE02;
  394. border-radius: 49rpx;
  395. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  396. opacity: 1;
  397. font-size: 36rpx;
  398. text-align: center;
  399. line-height: 98rpx;
  400. font-family: PingFang SC, PingFang SC-Medium;
  401. font-weight: 500;
  402. color: #ffffff;
  403. }
  404. .screen-pop {
  405. background: #fff;
  406. padding: 40rpx 0 0;
  407. border-radius: 20rpx 20rpx 0 0;
  408. .cell {
  409. padding: 0 24rpx;
  410. margin-bottom: 40rpx;
  411. .label {
  412. font-size: 30rpx;
  413. color: #555;
  414. width: 160rpx;
  415. }
  416. .desc {
  417. margin-top: 30rpx;
  418. background: #f4f5f6;
  419. border-radius: 8rpx;
  420. height: 88rpx;
  421. .input-box {
  422. padding: 0 16rpx;
  423. height: 88rpx;
  424. font-size: 28rpx;
  425. color: #555;
  426. }
  427. }
  428. }
  429. .btns {
  430. display: flex;
  431. flex-flow: row nowrap;
  432. .btn {
  433. width: 50%;
  434. height: 88rpx;
  435. text-align: center;
  436. line-height: 88rpx;
  437. font-size: 32rpx;
  438. font-weight: 500;
  439. }
  440. .reset-btn {
  441. background-color: #F4F5F7;
  442. color: #04BE02;
  443. }
  444. .submit-btn {
  445. background-color: #04BE02;
  446. color: #fff;
  447. }
  448. }
  449. .tips {
  450. margin-top: 16rpx;
  451. font-size: 24rpx;
  452. color: #f00;
  453. }
  454. }
  455. </style>