BusinessHours.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <view class="">
  3. <view class="cell flex flex-y-center border-b">
  4. <view class="title-block required">
  5. <text>是否营业</text>
  6. </view>
  7. <view class="desc">
  8. <view class="flex-center">
  9. <view class="checklist-box " @click="choicepayType(item.num)" v-for="(item,index) of BusinessHours"
  10. :key='index' :class="Businesstype==item.num?'actt':''">
  11. <view class="radio__inner" :class="Businesstype==item.num?'act_border':''">
  12. <view :class="Businesstype==item.num?'is-default-checked':''"
  13. class="radio__inner-icon radio__inner-icon ">
  14. </view>
  15. </view>
  16. <text class="checklist-text">{{item.name}}</text>
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. <block v-if="Businesstype==2">
  22. <view class="cell flex-center" @click="add">
  23. <view class="Addtime flex-center">
  24. +添加时间
  25. </view>
  26. </view>
  27. <view class="cell flex-y-center box-pack-between" v-for="(item,index) of arr" :key='index'>
  28. <view class="title-block required">
  29. <text>时间:</text>
  30. </view>
  31. <view class="flex-y-center">
  32. <view class="cellPicker">
  33. <picker mode="time" @change="bindTimeStar" :data-index='index'>
  34. <view v-if="item.start">{{item.start}}</view>
  35. <view v-else>开始时间</view>
  36. </picker>
  37. </view>
  38. <view class="amd">
  39. </view>
  40. <view class="cellPicker">
  41. <picker mode="time" @change="bindTimeEnd" :data-index='index'>
  42. <view v-if="item.end">{{item.end}}</view>
  43. <view v-else>结束时间</view>
  44. </picker>
  45. </view>
  46. </view>
  47. <view class="delelt" @click="del(index)">
  48. <text class="iconfont iconshanchu1"></text>
  49. 删除
  50. </view>
  51. </view>
  52. </block>
  53. <view class="" style=" height: 160rpx;">
  54. </view>
  55. <view class="footer-bar">
  56. <view class="content flex flex-center" @click="save">
  57. <view class="btn">立即提交</view>
  58. </view>
  59. </view>
  60. </view>
  61. </template>
  62. <script>
  63. export default {
  64. data() {
  65. return {
  66. start: '开始时间',
  67. end: '结束时间',
  68. date_time1: [],
  69. Businesstype: 2,
  70. BusinessHours: [{
  71. num: 2,
  72. name: "营业"
  73. },
  74. {
  75. num: 1,
  76. name: "休息"
  77. }
  78. ],
  79. arr: [],obj:{},
  80. }
  81. },
  82. onLoad() {
  83. this.http();
  84. },
  85. methods: {
  86. del(index){
  87. this.arr.splice(index,1)
  88. },
  89. choicepayType(e){
  90. this.Businesstype=e;
  91. },
  92. http(){
  93. this.request({
  94. url:"Smdcshop/yingyetime",
  95. data: {
  96. admin_id:uni.getStorageSync("admin_id"),
  97. }
  98. }).then(res => {
  99. if (res.code == 200) {
  100. this.obj=res.data;
  101. this.Businesstype=res.data.is_rest;
  102. this.arr=res.data.time_content;
  103. }
  104. }).catch((res) => {
  105. uni.showToast({
  106. title: res.message,
  107. icon: 'none'
  108. })
  109. });
  110. },
  111. add(e) {
  112. this.arr.push({
  113. start: '',
  114. end: ''
  115. })
  116. },
  117. save(e){
  118. let params={
  119. time_content:JSON.stringify(this.arr),
  120. id:this.obj.id,
  121. is_rest:this.Businesstype,
  122. }
  123. this.request({
  124. url:"Smdcshop/saveyingyetime",
  125. data: params
  126. }).then(res => {
  127. if (res.code == 200) {
  128. uni.showToast({
  129. title: res.message,
  130. icon: 'none'
  131. })
  132. setTimeout(() => {
  133. uni.navigateBack()
  134. }, 2000)
  135. }
  136. }).catch((res) => {
  137. uni.showToast({
  138. title: res.message,
  139. icon: 'none'
  140. })
  141. });
  142. },
  143. bindTimeStar(e) {
  144. let index = e.currentTarget.dataset.index;
  145. console.log(e)
  146. this.arr[index].start = e.detail.value;
  147. },
  148. bindTimeEnd(e) {
  149. let index = e.currentTarget.dataset.index;
  150. this.arr[index].end = e.detail.value;
  151. }
  152. }
  153. }
  154. </script>
  155. <style>
  156. .checklist-box {
  157. display: -webkit-box;
  158. display: -webkit-flex;
  159. display: flex;
  160. -webkit-box-orient: horizontal;
  161. -webkit-box-direction: normal;
  162. -webkit-flex-direction: row;
  163. flex-direction: row;
  164. -webkit-box-align: center;
  165. -webkit-align-items: center;
  166. align-items: center;
  167. margin: 5px 0;
  168. margin-right: 22px;
  169. }
  170. .radio__inner {
  171. -webkit-flex-shrink: 0;
  172. flex-shrink: 0;
  173. display: -webkit-box;
  174. display: -webkit-flex;
  175. display: flex;
  176. -webkit-box-pack: center;
  177. -webkit-justify-content: center;
  178. justify-content: center;
  179. -webkit-box-align: center;
  180. -webkit-align-items: center;
  181. align-items: center;
  182. position: relative;
  183. border: 1px solid #DCDFE6;
  184. border-radius: 2px;
  185. box-sizing: border-box;
  186. width: 16px;
  187. height: 16px;
  188. border-radius: 16px;
  189. background-color: #fff;
  190. z-index: 1;
  191. -webkit-transition: border-color .3s;
  192. transition: border-color .3s;
  193. }
  194. .radio__inner-icon {
  195. width: 8px;
  196. height: 8px;
  197. border-radius: 10px;
  198. opacity: 0;
  199. -webkit-transition: -webkit-transform .3s;
  200. transition: -webkit-transform .3s;
  201. transition: transform .3s;
  202. transition: transform .3s, -webkit-transform .3s;
  203. }
  204. .is-default-checked {
  205. opacity: 1;
  206. background-color: #007aff;
  207. -webkit-transform: rotate(45deg) scaleY(1);
  208. transform: rotate(45deg) scaleY(1);
  209. }
  210. .checklist-text {
  211. font-size: 28rpx;
  212. margin-left: 5px;
  213. -webkit-transition: color 0.2s;
  214. transition: color 0.2s;
  215. color: #000;
  216. }
  217. .act_border {
  218. border: 1rpx solid #007aff;
  219. }
  220. .cell {
  221. padding: 20rpx;
  222. }
  223. .title-block {
  224. font-size: 28rpx;
  225. margin-right: 20rpx;
  226. }
  227. .amd {
  228. padding: 0rpx 20rpx;
  229. }
  230. .Addtime {
  231. width: 250rpx;
  232. height: 70rpx;
  233. border: 1px solid transparent;
  234. padding: 0 36rpx;
  235. background-color: #1E9FFF;
  236. color: #fff;
  237. white-space: nowrap;
  238. text-align: center;
  239. font-size: 28rpx;
  240. border-radius: 4rpx;
  241. cursor: pointer;
  242. }
  243. .cellPicker {
  244. font-size: 26rpx;
  245. border: 1rpx solid #F1F1F1;
  246. padding: 15rpx 0rpx;
  247. width: 180rpx;
  248. text-align: center;
  249. }
  250. .delelt {
  251. color: red;
  252. font-size: 26rpx;
  253. }
  254. .iconshanchu1 {
  255. font-size: 26rpx;
  256. margin-right: 10rpx;
  257. }
  258. /* */
  259. .footer-bar {
  260. height: 160rpx;
  261. /*兼容 IOS<11.2*/
  262. padding-bottom: constant(safe-area-inset-bottom);
  263. /*兼容 IOS>11.2*/
  264. padding-bottom: env(safe-area-inset-bottom);
  265. box-sizing: content-box;
  266. }
  267. .footer-bar .content {
  268. width: 100%;
  269. height: 160rpx;
  270. background-color: #fff;
  271. position: fixed;
  272. left: 0;
  273. bottom: 0;
  274. z-index: 100;
  275. /*兼容 IOS<11.2*/
  276. padding-bottom: constant(safe-area-inset-bottom);
  277. /*兼容 IOS>11.2*/
  278. padding-bottom: env(safe-area-inset-bottom);
  279. box-sizing: content-box;
  280. box-shadow: 0 -5rpx 10rpx #eee;
  281. }
  282. .footer-bar .content .btn {
  283. width: 700rpx;
  284. height: 100rpx;
  285. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  286. border-radius: 8rpx;
  287. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  288. text-align: center;
  289. line-height: 100rpx;
  290. font-size: 36rpx;
  291. font-weight: 500;
  292. color: #fff;
  293. }
  294. .footer-bar .content .detail-btn {
  295. width: 50%;
  296. height: 40rpx;
  297. }
  298. .footer-bar .content .detail-btn .btn-icon {
  299. flex: none;
  300. display: block;
  301. width: 32rpx;
  302. height: 32rpx;
  303. margin-right: 8rpx;
  304. }
  305. </style>