add.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <view class="container">
  3. <form @submit="onSubmit">
  4. <view class="page-block">
  5. <view class="content">
  6. <view class="cell flex flex-y-center arr-r">
  7. <view class="title-block required">
  8. <text>等级</text>
  9. </view>
  10. <view class="desc">
  11. <picker mode="selector" :range="printerAddrList" @change="onPrinterAddrChange">
  12. <view :class="[printerAddr?'':'desc-placeholder','input-box']">{{printerAddr || '请选择'}}
  13. </view>
  14. </picker>
  15. </view>
  16. </view>
  17. <view class="cell flex flex-y-center">
  18. <view class="title-block required">
  19. <text>等级名称</text>
  20. </view>
  21. <view class="desc">
  22. <input type="text" :value="obj.name" name="name" class="input-box"
  23. placeholder="请输入等级名称" placeholder-class="desc-placeholder">
  24. </view>
  25. </view>
  26. <view class="cell flex flex-y-center">
  27. <view class="title-block required">
  28. <text>升级条件</text>
  29. </view>
  30. <view class="desc">
  31. <input type="number" :value="obj.money" name="money" class="input-box"
  32. placeholder="累计完成订单金额满(元)" placeholder-class="desc-placeholder">
  33. </view>
  34. </view>
  35. <view class="cell flex flex-y-center">
  36. <view class="title-block required">
  37. <text>折扣</text>
  38. </view>
  39. <view class="desc">
  40. <input type="digit" :value="obj.discount" name="discount" class="input-box"
  41. placeholder="请输入0.1~10之间的数字" placeholder-class="desc-placeholder">
  42. </view>
  43. </view>
  44. <view class="cell flex flex-y-center">
  45. <view class="title-block required">
  46. <text>会员等级状态</text>
  47. </view>
  48. <view class="desc">
  49. <view class="flex-center">
  50. <view class="checklist-box " @click="choicepay(item.status)"
  51. v-for="(item,index) of integral_arr" :key='index'
  52. :class="status==item.status?'actt':''">
  53. <view class="radio__inner" :class="status==item.status?'act_border':''">
  54. <view :class="status==item.status?'is-default-checked':''"
  55. class="radio__inner-icon radio__inner-icon ">
  56. </view>
  57. </view>
  58. <text class="checklist-text">{{item.name}}</text>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. <view class="footer-bar">
  66. <view class="content flex flex-center" style="background: none;">
  67. <button class="btn" hover-class="none" form-type="submit">
  68. {{obj.id?'修改':'添加'}}
  69. </button>
  70. </view>
  71. </view>
  72. </form>
  73. </view>
  74. </template>
  75. <script>
  76. export default {
  77. data() {
  78. return {
  79. printerAddrList: ['1', '2','3', '4','5', '6','7', '8','9','10'],
  80. printerAddr: '1',
  81. integral_arr:[
  82. { status:1,
  83. name:"开启",},
  84. { status:2,
  85. name:"关闭",}
  86. ],
  87. level:1,
  88. status: 1,
  89. tableType: "",
  90. admin_id: "",
  91. info: {},
  92. obj:{},
  93. }
  94. },
  95. onLoad(e) {
  96. if (e.id) {
  97. this.info = e;
  98. this.http();
  99. }
  100. this.admin_id = uni.getStorageSync("admin_id");
  101. },
  102. methods: {
  103. choicepay(index) {
  104. this.status = index;
  105. },
  106. onPrinterAddrChange(e) {
  107. this.printerAddr = this.printerAddrList[e.detail.value];
  108. this.level = Number(e.detail.value) + 1;
  109. },
  110. http(){
  111. this.request({
  112. url:"Smdcshop/level_info",
  113. data: {
  114. id:this.info.id,
  115. }
  116. }).then(res => {
  117. if (res.code == 200) {
  118. this.obj=res.data;
  119. this.level= res.data.level;
  120. this.status=res.data.status;
  121. this.printerAddr = this.printerAddrList[this.level-1];
  122. }
  123. }).catch((res) => {
  124. uni.showToast({
  125. title: res.message,
  126. icon: 'none'
  127. })
  128. });
  129. },
  130. onSubmit(e) {
  131. let data =e.detail.value,url;
  132. data.level=this.level;
  133. data.status=this.status;
  134. data.admin_id=this.admin_id;
  135. if (this.info.id) {
  136. data.id = this.info.id
  137. url = "Smdcshop/level_update"
  138. } else {
  139. url = 'Smdcshop/level_add'
  140. }
  141. if (data.name == "") {
  142. uni.showToast({
  143. title: "请输入名称",
  144. icon: 'none'
  145. })
  146. return false
  147. }
  148. this.request({
  149. url,
  150. data: data
  151. }).then(res => {
  152. if (res.code == 200) {
  153. uni.showToast({
  154. title: res.message,
  155. icon: 'none'
  156. })
  157. setTimeout(() => {
  158. uni.navigateBack()
  159. }, 2000)
  160. }
  161. }).catch((res) => {
  162. uni.showToast({
  163. title: res.message,
  164. icon: 'none'
  165. })
  166. });
  167. },
  168. }
  169. }
  170. </script>
  171. <style>
  172. @import url("../static/css/common.css");
  173. page {
  174. background-color: #F4F5F7;
  175. }
  176. .checklist-box {
  177. display: -webkit-box;
  178. display: -webkit-flex;
  179. display: flex;
  180. -webkit-box-orient: horizontal;
  181. -webkit-box-direction: normal;
  182. -webkit-flex-direction: row;
  183. flex-direction: row;
  184. -webkit-box-align: center;
  185. -webkit-align-items: center;
  186. align-items: center;
  187. margin: 5px 0;
  188. margin-right: 22px;
  189. }
  190. .radio__inner {
  191. -webkit-flex-shrink: 0;
  192. flex-shrink: 0;
  193. display: -webkit-box;
  194. display: -webkit-flex;
  195. display: flex;
  196. -webkit-box-pack: center;
  197. -webkit-justify-content: center;
  198. justify-content: center;
  199. -webkit-box-align: center;
  200. -webkit-align-items: center;
  201. align-items: center;
  202. position: relative;
  203. border: 1px solid #DCDFE6;
  204. border-radius: 2px;
  205. box-sizing: border-box;
  206. width: 16px;
  207. height: 16px;
  208. border-radius: 16px;
  209. background-color: #fff;
  210. z-index: 1;
  211. -webkit-transition: border-color .3s;
  212. transition: border-color .3s;
  213. }
  214. .radio__inner-icon {
  215. width: 8px;
  216. height: 8px;
  217. border-radius: 10px;
  218. opacity: 0;
  219. -webkit-transition: -webkit-transform .3s;
  220. transition: -webkit-transform .3s;
  221. transition: transform .3s;
  222. transition: transform .3s, -webkit-transform .3s;
  223. }
  224. .is-default-checked {
  225. opacity: 1;
  226. background-color: #007aff;
  227. -webkit-transform: rotate(45deg) scaleY(1);
  228. transform: rotate(45deg) scaleY(1);
  229. }
  230. .act_border{
  231. border: 1rpx solid #007aff;
  232. }
  233. .checklist-text {
  234. font-size: 28rpx;
  235. margin-left: 5px;
  236. -webkit-transition: color 0.2s;
  237. transition: color 0.2s;
  238. color: #000;
  239. }
  240. </style>