aliPlanDetail.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <view class="content">
  3. <view class="headerGetbg"></view>
  4. <view class="bgf mar-24 home-content">
  5. <view class="box-pack-between list flex-y-center br">
  6. <text class="ft32 list-title">基本信息</text>
  7. <view class="info-btns">
  8. <view @click="onReset" class="update-btn" v-if="info.delivery_status == 'INACTIVE'">重投 </view>
  9. <view @click="onStop" class="update-btn" style="background:#f00"
  10. v-if="info.delivery_status == 'ACTIVE'">停止投放</view>
  11. </view>
  12. </view>
  13. <view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
  14. <text class="home-left-name">投放计划名称:</text>
  15. <view style="word-break:break-all;">{{info.content.delivery_base_info.delivery_name}}</view>
  16. </view>
  17. <view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
  18. <text class="home-left-name">状态:</text>
  19. <view style="word-break:break-all;">{{info.content.delivery_status_name}}</view>
  20. </view>
  21. <view class="flex-y-center home-content-item">
  22. <text class="home-left-name">素材图片:</text>
  23. <image :src="baseURL + info.content.delivery_image" mode="aspectFit" class="logo"
  24. @click="showImg(baseURL + info.content.delivery_image)">
  25. </image>
  26. </view>
  27. <view class="flex-y-center home-content-item">
  28. <text class="home-left-name">投放计划开始时间:</text>
  29. <text>{{info.content.delivery_base_info.delivery_begin_time}}</text>
  30. </view>
  31. <view class="flex-y-center home-content-item">
  32. <text class="home-left-name">发放计划结束时间:</text>
  33. <text>{{info.content.delivery_base_info.delivery_end_time}}</text>
  34. </view>
  35. <view class="flex-y-center home-content-item">
  36. <text class="home-left-name">商家活动券名称:</text>
  37. <text>{{info.activity_name}}</text>
  38. </view>
  39. <view class="flex-y-center home-content-item">
  40. <text class="home-left-name">添加时间:</text>
  41. <text>{{info.create_time}}</text>
  42. </view>
  43. </view>
  44. </view>
  45. </template>
  46. <script>
  47. var siteinfo = require('@/siteinfo.js'); //require这个js模块
  48. export default {
  49. data() {
  50. return {
  51. info: {},
  52. id: '',
  53. baseURL: siteinfo.siteroot,
  54. updateNum: null,
  55. popType: ""
  56. }
  57. },
  58. onLoad(e) {
  59. this.id = e.id;
  60. this.http();
  61. },
  62. onShow(e) {
  63. },
  64. onUnload() {
  65. },
  66. onHide() {
  67. },
  68. methods: {
  69. getStatusName(status) {
  70. let name = ""
  71. switch (status) {
  72. case 'ACTIVE':
  73. name = "生效中"
  74. break;
  75. case 'INACTIVE':
  76. name = "失效状态"
  77. break;
  78. case 'AUDITING':
  79. name = "审核中"
  80. break;
  81. case 'AUDIT_NO_PASS':
  82. name = "审核不通过"
  83. break;
  84. }
  85. return name
  86. },
  87. http() {
  88. this.request({
  89. url: "alipaycoupon/plan_info",
  90. data: {
  91. id: this.id,
  92. },
  93. }).then(res => {
  94. console.log(res, "res")
  95. if (res.code === '200') {
  96. this.info = res.data;
  97. this.info.content.delivery_status_name = this.getStatusName(res.data.delivery_status)
  98. this.info.create_time = this.$utils.dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.info
  99. .create_time * 1000))
  100. }
  101. }).catch((res) => {
  102. uni.showToast({
  103. title: res.message,
  104. icon: 'none',
  105. duration: 2000,
  106. success: (res) => {},
  107. })
  108. });
  109. },
  110. showImg(src) {
  111. uni.previewImage({
  112. urls: [src]
  113. })
  114. },
  115. //重投
  116. onReset() {
  117. console.log('chongtou')
  118. uni.redirectTo({
  119. url: "./addAliPlan?id=" + this.id
  120. })
  121. },
  122. //停止投放
  123. onStop() {
  124. //
  125. uni.showModal({
  126. content: '确定停止投放',
  127. success: (r) => {
  128. if (r.confirm) {
  129. this.request({
  130. url: "alipaycoupon/delivery_stop",
  131. data: {
  132. admin_id: uni.getStorageSync('admin_id'),
  133. delivery_id: this.info.delivery_id,
  134. },
  135. }).then(res => {
  136. if (res.code == 200) {
  137. uni.showModal({
  138. content: res.message,
  139. showCancel: false,
  140. success: () => {
  141. this.http()
  142. }
  143. })
  144. } else {
  145. uni.showToast({
  146. title: res.message,
  147. icon: 'none',
  148. })
  149. }
  150. }).catch((res) => {
  151. uni.showToast({
  152. title: res.message,
  153. icon: 'none'
  154. })
  155. });
  156. }
  157. }
  158. })
  159. }
  160. },
  161. }
  162. </script>
  163. <style lang="scss">
  164. page {
  165. background: #F5F7FA;
  166. }
  167. .info-btns {
  168. display: flex;
  169. flex-flow: row nowrap;
  170. justify-content: space-between;
  171. }
  172. .home-content {
  173. width: 690rpx;
  174. opacity: 1;
  175. background: #ffffff;
  176. border-radius: 14rpx;
  177. box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
  178. margin: 0 auto;
  179. position: relative;
  180. font-size: 28rpx;
  181. padding: 0 24rpx;
  182. margin-top: 30rpx;
  183. .list {
  184. height: 100rpx;
  185. color: #999999;
  186. .list-title {
  187. color: #000000;
  188. font-size: 30rpx;
  189. }
  190. .update-btn {
  191. padding: 0 16rpx;
  192. border-radius: 12rpx;
  193. background: #1E9FFF;
  194. color: #fff;
  195. line-height: 56rpx;
  196. font-size: 24rpx;
  197. }
  198. }
  199. .home-content-item {
  200. padding-bottom: 24rpx;
  201. .home-left-name {
  202. opacity: 1;
  203. font-size: 28rpx;
  204. font-family: PingFang SC, PingFang SC-Regular;
  205. font-weight: 400;
  206. text-align: left;
  207. color: #99a0ad;
  208. min-width: 160rpx;
  209. }
  210. .home-left-input {
  211. border: 1rpx solid #ccc;
  212. padding: 10rpx;
  213. word-break: break-all;
  214. flex: 1;
  215. }
  216. }
  217. }
  218. .logo {
  219. display: block;
  220. width: 100rpx;
  221. height: 100rpx;
  222. margin-left: auto;
  223. }
  224. .update-content {
  225. width: 80vw;
  226. padding: 30rpx;
  227. border-radius: 20rpx;
  228. background-color: #fff;
  229. .title {
  230. font-size: 28rpx;
  231. color: #666;
  232. }
  233. .input-box {
  234. width: 100%;
  235. height: 80rpx;
  236. border: 1rpx solid #ddd;
  237. margin: 20rpx 0;
  238. box-sizing: border-box;
  239. padding: 0 20rpx;
  240. border-radius: 20rpx;
  241. font-size: 30rpx;
  242. font-weight: 500;
  243. color: #333;
  244. }
  245. .update-btns {
  246. display: flex;
  247. flex-flow: row nowrap;
  248. justify-content: space-around;
  249. align-items: center;
  250. .btn {
  251. display: block;
  252. width: 20vw;
  253. height: 60rpx;
  254. line-height: 60rpx;
  255. font-size: 30rpx;
  256. &::after {
  257. border: none;
  258. }
  259. }
  260. .cancel-btn {
  261. background: #f2f2f2;
  262. }
  263. .confirm-btn {
  264. background-color: #3C94FC;
  265. color: #fff;
  266. }
  267. }
  268. }
  269. </style>