rule.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <template>
  2. <view class="">
  3. <header-title title="规则设置"></header-title>
  4. <view class="main">
  5. <view class="main-home">
  6. <view class="box-pack-between ft32 main-item">
  7. <view>添加的时间 </view>
  8. </view>
  9. <view class="item-bg" v-for="(item,index) of arr" :key='index'>
  10. <view class="box-pack-between">
  11. <text>{{item}}</text>
  12. <image class="del" @click="del" :data-index="index" :data-title="item" src="../../static/images/del.png" mode=""></image>
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. <view style="height: 100rpx;">
  18. </view>
  19. <view class="bottom-bars flex-center">
  20. <!-- <view class="flex-center ft28 time"> -->
  21. <button @click="bindTimeChange">
  22. <view class="picker flex-center time">
  23. 添加时间
  24. </view>
  25. </button>
  26. <!-- </view> -->
  27. </view>
  28. <!-- 授权 -->
  29. <zx-uni-popup ref="popup" type="bottom">
  30. <view class="shoot">
  31. <view class="flex shoot-header box-pack-between">
  32. <text class="" @click="cancel">取消</text>
  33. <text class="confirm" @click="confirm">确认</text>
  34. </view>
  35. <view class="flex">
  36. <scroll-view scroll-y class="flex-grow-1 hg400">
  37. <view class="header-item flex-center" :class="act_index1==index?'act':''" @click="choise1" :data-title="item"
  38. :data-index="index" :key="index" v-for="(item,index) of time_list1">
  39. {{item}}
  40. </view>
  41. </scroll-view>
  42. <scroll-view scroll-y class="flex-grow-1 hg400">
  43. <view class="header-item flex-center" @click="choise2" :data-title="item" :data-index="index" :class="act_index2==index?'act':''"
  44. :key="index" v-for="(item,index) of time_list2">
  45. {{item}}
  46. </view>
  47. </scroll-view>
  48. </view>
  49. </view>
  50. </zx-uni-popup>
  51. </view>
  52. </template>
  53. <script>
  54. import headerTitle from '@/components/header/header-title.vue';
  55. import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue';
  56. export default {
  57. components: {
  58. headerTitle,
  59. zxUniPopup,
  60. },
  61. data() {
  62. return {
  63. time_list1: [
  64. "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
  65. "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
  66. "23:59",
  67. ],
  68. time_list2: [
  69. "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
  70. "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
  71. "23:59",
  72. ],
  73. act_index1: -1,
  74. act_index2: -1,
  75. time1: "",
  76. time2: "",
  77. arr:[],
  78. id:"",
  79. }
  80. },
  81. onLoad(e) {
  82. this.id=e.id;
  83. this.arr=JSON.parse(e.arr);
  84. },
  85. methods: {
  86. del(e){
  87. let title = e.currentTarget.dataset.title,index=e.currentTarget.dataset.index;
  88. uni.showModal({
  89. title: '提示',
  90. content: '确定要删除此时间吗?',
  91. showCancel: true,
  92. cancelText: '取消',
  93. confirmText: '删除',
  94. success: res => {
  95. if(res.confirm){
  96. this.request({
  97. url: "funeng/delExchangeOpenTime",
  98. data: {
  99. token: uni.getStorageSync("token"),
  100. open_time:title,
  101. id:this.id
  102. },
  103. }).then(res => {
  104. console.log(res, "res")
  105. if (res.code === '200') {
  106. this.arr.splice(index,1)
  107. uni.showToast({
  108. title: res.message,
  109. icon: 'none'
  110. })
  111. }
  112. }).catch((res) => {
  113. uni.showToast({
  114. title: res.message,
  115. icon: 'none'
  116. })
  117. });
  118. }
  119. },
  120. fail: () => {},
  121. complete: () => {}
  122. });
  123. },
  124. cancel(){
  125. this.$refs.popup.close();
  126. },
  127. bindTimeChange(e) {
  128. this.$refs.popup.open();
  129. },
  130. choise1(e) {
  131. let index = e.currentTarget.dataset.index,
  132. title = e.currentTarget.dataset.title;
  133. console.log(index, "index")
  134. this.time1 = title;
  135. this.act_index1 = index;
  136. },
  137. choise2(e) {
  138. let index = e.currentTarget.dataset.index,
  139. title = e.currentTarget.dataset.title;
  140. this.time2 = title;
  141. this.act_index2 = index;
  142. },
  143. confirm(e) {
  144. console.log(e, "e")
  145. this.request({
  146. url: "funeng/addExchangeOpenTime",
  147. data: {
  148. token: uni.getStorageSync("token"),
  149. open_time: this.time1 + "-" + this.time2, id:this.id
  150. },
  151. }).then(res => {
  152. console.log(res, "res")
  153. if (res.code === '200') {
  154. console.log(this.arr)
  155. var time=this.time1 + "-" + this.time2;
  156. this.arr.push(time);
  157. this.$refs.popup.close();
  158. }
  159. }).catch((res) => {
  160. uni.showToast({
  161. title: res.message,
  162. icon: 'none'
  163. })
  164. });
  165. },
  166. },
  167. }
  168. </script>
  169. <style>
  170. page {}
  171. .main-item {
  172. margin: 20rpx 0 32rpx 0;
  173. }
  174. .main-home {
  175. width: 670rpx;
  176. margin: 0 auto;
  177. }
  178. .item-bg {
  179. width: 670rpx;
  180. background: #f6f8fe;
  181. border-radius: 12rpx;
  182. margin: 0 auto;
  183. font-size: 28rpx;
  184. font-family: PingFang SC, PingFang SC-Regular;
  185. font-weight: 400;
  186. color: #333333;
  187. padding: 36rpx 32rpx;
  188. margin-bottom:20rpx ;
  189. }
  190. .del {
  191. width: 32rpx;
  192. height: 32rpx;
  193. }
  194. .bottom-bars {
  195. width: 100%;
  196. /* padding: 30rpx 0; */
  197. position: fixed;
  198. bottom: 10rpx;
  199. }
  200. .bottom-bars .time {
  201. text-align: center;
  202. width: 690rpx;
  203. height: 90rpx;
  204. background: linear-gradient(132deg, rgb(64, 158, 255) 0%, rgb(64, 158, 255) 100%);
  205. box-shadow: 0px 2rpx 12rpx rgb(64, 158, 255);
  206. opacity: 1;
  207. color: #fff;
  208. }
  209. .picker {
  210. height: 90rpx;
  211. }
  212. .shoot {
  213. height: 500rpx;
  214. background: #FFFFFF;
  215. }
  216. .header-item {
  217. height: 70rpx;
  218. }
  219. .hg400 {
  220. height: 400rpx;
  221. }
  222. .shoot-header {
  223. padding: 20rpx;
  224. border-bottom: 1rpx solid #f1f1f1;
  225. }
  226. .confirm {
  227. color: #007AFF;
  228. }
  229. .shoot .act {
  230. color: #007AFF;
  231. }
  232. </style>