addAliPlan.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <template>
  2. <view class="container">
  3. <form @submit="onSubmit">
  4. <view class="page-block">
  5. <view class="content">
  6. <view class="cell flex box-pack-between">
  7. <view class="title-block required">
  8. <text>投放计划名称</text>
  9. </view>
  10. <view class="desc">
  11. <input type="text" name="delivery_name"
  12. :value="info.content.delivery_base_info.delivery_name" class="input-box"
  13. placeholder="请输入投放计划名称" placeholder-class="desc-placeholder">
  14. <view class="tips">请输入4~20个字符</view>
  15. </view>
  16. </view>
  17. <view class="cell flex box-pack-between">
  18. <view class="title-block required">
  19. <text>投放计划时间</text>
  20. </view>
  21. <view class="desc">
  22. <uni-datetime-picker v-model="time" type="datetimerange" rangeSeparator="至" />
  23. </view>
  24. </view>
  25. <view class="cell flex box-pack-between">
  26. <view class="title-block required">
  27. <text>素材图片</text>
  28. </view>
  29. <view class="desc">
  30. <image :src="baseURL+delivery_image" mode="aspectFit" class="logo-img" v-if="delivery_image"
  31. @click="uploadLogo"></image>
  32. <image src="@/static/images/upimg.png" mode="aspectFit" class="logo-img" v-else
  33. @click="uploadLogo"></image>
  34. <view class="tips">上传图片尺寸600*600,支持格式:png、jpg、jpeg、bmp,大小不超过200kb;</view>
  35. </view>
  36. </view>
  37. <view class="cell flex box-pack-between">
  38. <view class="title-block required">
  39. <text>商家活动券</text>
  40. </view>
  41. <view class="desc">
  42. <picker :value="activeCouponIndex" :range="couponList" range-key="activity_name"
  43. @change="onChooseCoupon">
  44. <input type="text" :value="activeCoupon.activity_name" class="input-box"
  45. placeholder="请选择商家活动券" placeholder-class="desc-placeholder" disabled>
  46. </picker>
  47. <input type="text" :value="activeCoupon.activity_id" name="type"
  48. style="position: fixed;left:10000px;top:-10000px;" />
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="footer-bar">
  54. <view class="content flex flex-center" style="background: #fff;">
  55. <!-- <view class="btn">立即添加</view> -->
  56. <button class="btn" hover-class="none" form-type="submit">
  57. 提交
  58. </button>
  59. </view>
  60. </view>
  61. </form>
  62. </view>
  63. </template>
  64. <script>
  65. var siteinfo = require('@/siteinfo.js'); //require这个js模块
  66. export default {
  67. data() {
  68. return {
  69. id: "",
  70. store_id: "",
  71. admin_id: "",
  72. info: {},
  73. couponList: [],
  74. activeCoupon: {},
  75. baseURL: siteinfo.siteroot,
  76. delivery_image: "",
  77. delivery_image_code:"",
  78. time: [],
  79. }
  80. },
  81. onLoad(e) {
  82. this.store_id = uni.getStorageSync("store_id");
  83. this.admin_id = uni.getStorageSync("admin_id")
  84. if (e.id) {
  85. this.id = e.id
  86. this.getInfo()
  87. }
  88. this.getCouponList()
  89. },
  90. methods: {
  91. getStatusName(status) {
  92. let name = ""
  93. switch (status) {
  94. case 'ACTIVE':
  95. name = "生效中"
  96. break;
  97. case 'INACTIVE':
  98. name = "失效状态"
  99. break;
  100. case 'AUDITING':
  101. name = "审核中"
  102. break;
  103. case 'AUDIT_NO_PASS':
  104. name = "审核不通过"
  105. break;
  106. }
  107. return name
  108. },
  109. getInfo() {
  110. this.request({
  111. url: "alipaycoupon/plan_info",
  112. data: {
  113. id: this.id,
  114. },
  115. }).then(res => {
  116. console.log(res, "res")
  117. if (res.code === '200') {
  118. this.info = res.data;
  119. this.delivery_image = res.data.content.delivery_image
  120. this.delivery_image_code = res.data.content.delivery_base_info.delivery_material
  121. .delivery_single_material.delivery_image
  122. this.time = [res.data.content.delivery_base_info.delivery_begin_time, res.data.content
  123. .delivery_base_info.delivery_end_time
  124. ]
  125. this.activeCoupon = {
  126. activity_id: res.data.content.activity_id,
  127. activity_name: res.data.activity_name
  128. }
  129. } else {
  130. uni.showToast({
  131. title: res.message,
  132. icon: 'none',
  133. })
  134. }
  135. }).catch((res) => {
  136. uni.showToast({
  137. title: res.message,
  138. icon: 'none',
  139. })
  140. });
  141. },
  142. getCouponList() {
  143. this.request({
  144. url: "alipaycoupon/plan_coupon",
  145. data: {
  146. admin_id: this.admin_id,
  147. },
  148. }).then(res => {
  149. console.log(res, "res")
  150. if (res.code == 200) {
  151. this.couponList = res.data
  152. } else {
  153. uni.showToast({
  154. title: res.message,
  155. icon: 'none',
  156. })
  157. }
  158. }).catch((res) => {
  159. uni.showToast({
  160. title: res.message,
  161. icon: 'none',
  162. })
  163. });
  164. },
  165. onChooseCoupon(e) {
  166. this.activeCoupon = this.couponList[e.detail.value]
  167. },
  168. //上传素材
  169. uploadLogo() {
  170. uni.chooseMedia({
  171. count: 1,
  172. mediaType: ["image"],
  173. success: r => {
  174. console.log(r)
  175. let tempFilePath = r.tempFiles[0].tempFilePath
  176. wx.showLoading({
  177. title: "上传中..."
  178. })
  179. uni.uploadFile({
  180. url: siteinfo.siteroot +
  181. '/index.php?s=/api/alipaycoupon/uplmarketingad',
  182. filePath: tempFilePath,
  183. name: 'file',
  184. formData: {
  185. admin_id: this.admin_id,
  186. type: "DELIVERY_CHANNEL_PIC"
  187. },
  188. success: (res) => {
  189. console.log(res);
  190. wx.hideLoading()
  191. if (res.statusCode == 200) {
  192. let data = JSON.parse(res.data)
  193. console.log(data,123)
  194. if (data.code == 200) {
  195. this.delivery_image = data.data.src
  196. this.delivery_image_code = data.data.resource_id
  197. } else {
  198. uni.showToast({
  199. title: data.message,
  200. icon: "none"
  201. })
  202. }
  203. } else {
  204. uni.showToast({
  205. title: "上传失败请重试",
  206. icon: "none"
  207. })
  208. }
  209. },
  210. fail: res => {
  211. wx.hideLoading()
  212. }
  213. });
  214. }
  215. })
  216. },
  217. onSubmit(e) {
  218. console.log(e)
  219. let params = {
  220. "admin_id": this.admin_id,
  221. "delivery_name": e.detail.value.delivery_name,
  222. "delivery_begin_time": this.time[0],
  223. "delivery_end_time": this.time[1],
  224. "delivery_image": this.delivery_image,
  225. "delivery_image_log": this.delivery_image_code,
  226. "activity_id": this.activeCoupon.activity_id
  227. }
  228. if (this.id) {
  229. params.id = this.id
  230. }
  231. let errMsg = ""
  232. if (!params.delivery_name) {
  233. errMsg = "请输入投放计划名称"
  234. } else if (!params.delivery_begin_time || !params.delivery_end_time) {
  235. errMsg = "请选择投放计划时间"
  236. } else if (!params.delivery_image) {
  237. errMsg = "请上传素材图片"
  238. } else if (!params.activity_id) {
  239. errMsg = "请选择商家活动券"
  240. }
  241. if (errMsg) {
  242. uni.showToast({
  243. title: errMsg,
  244. icon: 'none'
  245. })
  246. return false
  247. }
  248. let url = ['alipaycoupon/plan_add', 'alipaycoupon/plan_edit']
  249. this.request({
  250. url: this.id ? url[1] : url[0],
  251. data: params,
  252. }).then(res => {
  253. if (res.code == 200) {
  254. uni.showToast({
  255. title: res.message,
  256. icon: 'none'
  257. })
  258. setTimeout(() => {
  259. uni.navigateBack()
  260. }, 2000)
  261. }
  262. }).catch((res) => {
  263. uni.showToast({
  264. title: res.message,
  265. icon: 'none'
  266. })
  267. });
  268. },
  269. }
  270. }
  271. </script>
  272. <style>
  273. @import url("../static/css/common.css");
  274. page {
  275. background-color: #F4F5F7;
  276. }
  277. .timeSelete-left {
  278. margin: 0 20rpx;
  279. }
  280. .timeSelete {
  281. font-size: 28rpx;
  282. }
  283. .desc {
  284. text-align: right;
  285. }
  286. .footer-bar {
  287. height: 200rpx;
  288. }
  289. .footer-bar .content {
  290. z-index: 1
  291. }
  292. .page-block .cell {
  293. min-height: 60rpx;
  294. padding: 20rpx 0;
  295. }
  296. .page-block .cell .title-block {
  297. line-height: 60rpx;
  298. }
  299. .page-block .cell .input-box {
  300. height: 60rpx;
  301. line-height: 60rpx;
  302. }
  303. .tips {
  304. font-size: 24rpx;
  305. color: #f00;
  306. text-align: left;
  307. margin-top: 10rpx;
  308. }
  309. .logo-img {
  310. display: inline-block;
  311. width: 160rpx;
  312. height: 160rpx;
  313. }
  314. </style>