addCoupons.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. <template>
  2. <view>
  3. <form @submit="addCoupons">
  4. <view class="couponsTitle flex-y-center flex-between">
  5. <view class="couponsTitleL">优惠券名称</view>
  6. <input type="text" name="couponsName" class="couponsTitleLInput" placeholder-class="couponsTitleLPleahold"
  7. placeholder="请输入优惠券名称" :value="info.title" maxlength="32" />
  8. </view>
  9. <view class="couponsTitle flex-y-center flex-between">
  10. <view class="couponsTitleL">满额</view>
  11. <input type="digit" class="couponsTitleLInput" name="couponsFull" placeholder-class="couponsTitleLPleahold"
  12. placeholder="请输入满额" :value="info.full_price" maxlength="6" />
  13. </view>
  14. <view class="couponsTitle flex-y-center flex-between">
  15. <view class="couponsTitleL">优惠金额</view>
  16. <input type="digit" class="couponsTitleLInput" name="couponsDiscounts" placeholder-class="couponsTitleLPleahold"
  17. placeholder="请输入优惠金额" :value="info.cut_price" maxlength="5" />
  18. </view>
  19. <view class="couponsTitle flex-y-center flex-between">
  20. <view class="couponsTitleL">开始时间</view>
  21. <view class="timeSelete">
  22. <picker mode="date" :value="info.start_time" :start="startDate" :end="endDate" @change="bindDateChangeStart">
  23. <view class="uni-input">{{startDates}}</view>
  24. </picker>
  25. </view>
  26. </view>
  27. <view class="couponsTitle flex-y-center flex-between">
  28. <view class="couponsTitleL">结束时间</view>
  29. <view class="timeSelete">
  30. <picker mode="date" :value="info.end_time" :start="startDate" :end="endDate" @change="bindDateChangeEnd">
  31. <view class="uni-input">{{endDates}}</view>
  32. </picker>
  33. </view>
  34. </view>
  35. <view class="couponsTitle flex-y-center flex-between">
  36. <view class="couponsTitleL">优惠券数量</view>
  37. <input type="number" name="couponsNum" class="couponsTitleLInput" placeholder-class="couponsTitleLPleahold"
  38. placeholder="请输入优惠券数量" :value="info.num" maxlength="4" />
  39. </view>
  40. <!-- 底部按钮 -->
  41. <button class="bottomButton" form-type="submit">添加优惠券</button>
  42. </form>
  43. </view>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. token: '',
  50. info: "",
  51. startDates:"请选择优惠券开始时间",
  52. endDates:"请选择优惠券结束时间",
  53. id:""
  54. }
  55. },
  56. computed: {
  57. startDate() {
  58. return this.getDate('start');
  59. },
  60. endDate() {
  61. return this.getDate('end');
  62. }
  63. },
  64. onLoad(e) {
  65. this.token = uni.getStorageSync('token'); //读取缓存手机号码
  66. if (e.id) {
  67. this.id = e.id;
  68. this.Coupons();
  69. }
  70. },
  71. onShow() {
  72. },
  73. methods: {
  74. //请求详情
  75. Coupons() {
  76. this.request({
  77. url: "coupon/detail",
  78. data: {
  79. token: this.token,
  80. coupon_id: this.id,
  81. },
  82. }).then(res => {
  83. if (res.code == "200") {
  84. this.info = res.data.detail;
  85. this.startDates=res.data.detail.start_time;
  86. this.endDates=res.data.detail.end_time;
  87. }
  88. }).catch((res) => {
  89. uni.showToast({
  90. title: res.message,
  91. icon: 'none'
  92. })
  93. });
  94. },
  95. getDate(type) {
  96. const date = new Date();
  97. let year = date.getFullYear();
  98. let month = date.getMonth() + 1;
  99. let day = date.getDate();
  100. if (type === 'start') {
  101. year = year - 60;
  102. } else if (type === 'end') {
  103. year = year + 2;
  104. }
  105. month = month > 9 ? month : '0' + month;;
  106. day = day > 9 ? day : '0' + day;
  107. return `${year}-${month}-${day}`;
  108. },
  109. // 开始时间
  110. bindDateChangeStart(e) {
  111. this.startDates = e.target.value;
  112. },
  113. //结束时间
  114. bindDateChangeEnd(e) {
  115. this.endDates = e.target.value;
  116. },
  117. //添加优惠券
  118. addCoupons(e) {
  119. console.log(e)
  120. let {couponsName,couponsFull,couponsDiscounts,couponsNum}= e.detail.value;
  121. let token = this.token;
  122. let startDates = this.startDates;
  123. let endDates = this.endDates;
  124. let a = ((Date.parse(new Date(startDates))) / 1000); //开始的时间戳
  125. let b = ((Date.parse(new Date(endDates))) / 1000); //结束的时间戳
  126. if (couponsName == "") {
  127. uni.showToast({
  128. title: '请输入优惠券名称',
  129. icon: 'none',
  130. duration: 2000
  131. });
  132. return false
  133. } else if (couponsFull == "") {
  134. uni.showToast({
  135. title: '请输入优惠券满额',
  136. icon: 'none',
  137. duration: 2000
  138. });
  139. return false
  140. } else if (couponsDiscounts == "") {
  141. uni.showToast({
  142. title: '请输入优惠券金额',
  143. icon: 'none',
  144. duration: 2000
  145. });
  146. return false
  147. } else if (Number(couponsDiscounts)>Number(couponsFull) ) {
  148. uni.showToast({
  149. title: '优惠金额不可以大于满额哦!',
  150. icon: 'none',
  151. duration: 2000
  152. });
  153. return false
  154. } else if (!startDates||startDates=="请选择优惠券开始时间") {
  155. uni.showToast({
  156. title: '请选择开始时间',
  157. icon: 'none',
  158. duration: 2000
  159. });
  160. return false
  161. } else if (!endDates||endDates=="请选择优惠券结束时间") {
  162. uni.showToast({
  163. title: '请选择结束时间',
  164. icon: 'none',
  165. duration: 2000
  166. });
  167. return false
  168. } else if (a > b) {
  169. uni.showToast({
  170. title: '开始时间不能大于结束时间哦',
  171. icon: 'none',
  172. duration: 2000
  173. });
  174. return false
  175. } else if (couponsNum == "") {
  176. uni.showToast({
  177. title: '请输入优惠券数量 ',
  178. icon: 'none',
  179. duration: 2000
  180. });
  181. return false
  182. }
  183. // coupon/edit
  184. let url=this.id?"coupon/edit":"coupon/create";
  185. this.request({
  186. url:url,
  187. data: {
  188. token: token,
  189. title: couponsName,
  190. cut_price: Number(couponsDiscounts),
  191. full_price: Number(couponsFull),
  192. start_time: startDates,
  193. end_time: endDates,
  194. num: Number(couponsNum),
  195. url:"https://",
  196. coupon_id:this.id,
  197. },
  198. }).then(res => {
  199. console.log(res, "res")
  200. if (res.code == "200") {
  201. uni.showModal({
  202. title: '提示',
  203. showCancel: false,
  204. content: '添加成功',
  205. success: function(res) {
  206. if (res.confirm) {
  207. uni.navigateBack({
  208. delta:1
  209. })
  210. // uni.reLaunch({
  211. // url: "../index/index"
  212. // })
  213. }
  214. }
  215. });
  216. }
  217. }).catch((res) => {
  218. uni.showToast({
  219. title: res.message,
  220. icon: 'none'
  221. })
  222. });
  223. },
  224. },
  225. }
  226. </script>
  227. <style>
  228. page {
  229. background: #f4f4f4;
  230. }
  231. .couponsTitle {
  232. height: 100rpx;
  233. width: 750rpx;
  234. background: #Fff;
  235. }
  236. .couponsTitleL {
  237. font-size: 28rpx;
  238. font-family: PingFang SC, PingFang SC-Regular;
  239. font-weight: 400;
  240. color: #333333;
  241. padding-left: 30rpx;
  242. }
  243. .couponsTitleLInput {
  244. font-size: 28rpx;
  245. font-family: PingFang SC, PingFang SC-Regular;
  246. font-weight: 400;
  247. color: #333;
  248. text-align: right;
  249. padding: 0 30rpx 0 200rpx;
  250. flex: 1;
  251. }
  252. .couponsTitleLPleahold {
  253. font-size: 28rpx;
  254. font-family: PingFang SC, PingFang SC-Regular;
  255. font-weight: 400;
  256. color: #cbcbcb;
  257. }
  258. /* 选择时间 */
  259. .timeSelete {
  260. text-align: right;
  261. flex: 1;
  262. font-size: 24rpx;
  263. padding-right: 30rpx;
  264. font-family: PingFang SC, PingFang SC-Regular;
  265. font-weight: 400;
  266. color: #7d7d7d;
  267. }
  268. /* 添加优惠券 */
  269. .bottomButton {
  270. position: absolute;
  271. left: 60rpx;
  272. bottom: 100rpx;
  273. width: 630rpx;
  274. height: 98rpx;
  275. line-height: 98rpx;
  276. background: linear-gradient(180deg, #6fa5ff, #438aff);
  277. border-radius: 8rpx;
  278. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  279. font-size: 32rpx;
  280. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  281. font-weight: 500;
  282. text-align: center;
  283. color: #ffffff;
  284. }
  285. </style>