huodongCouponDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  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="showPop(1)" class="update-btn" v-if="info.info.status == 1 || info.info.status == 2 || info.info.status == 3">同步商家券券码 </view>
  9. <view @click="showPop(2)" class="update-btn" style="margin-left: 30rpx;" v-if="info.info.status == 2 || info.info.status == 3">提交预算</view>
  10. </view>
  11. </view>
  12. <view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
  13. <text class="home-left-name">活动名称:</text>
  14. <view style="word-break:break-all;">{{info.content.activity_name}}</view>
  15. </view>
  16. <view class="flex-y-center home-content-item">
  17. <text class="home-left-name">活动ID:</text>
  18. <text>{{info.info.activity_id}}</text>
  19. </view>
  20. <view class="flex-y-center home-content-item">
  21. <text class="home-left-name">卡券类型:</text>
  22. <text>{{info.content.voucher_type_name}}</text>
  23. </view>
  24. <view class="flex-y-center home-content-item">
  25. <text class="home-left-name">发放时间:</text>
  26. <text>{{info.content.publish_start_time}}至{{info.content.publish_end_time}}</text>
  27. </view>
  28. <view class="flex-y-center home-content-item">
  29. <text class="home-left-name">商户品牌名称:</text>
  30. <text>{{info.content.voucher_display_info.brand_name}}</text>
  31. </view>
  32. <view class="flex-y-center home-content-item">
  33. <text class="home-left-name">商户LOGO:</text>
  34. <image :src="baseURL + info.content.voucher_display_info.brand_logo_url" mode="aspectFit" class="logo"
  35. @click="showImg(baseURL + info.content.voucher_display_info.brand_logo_url)">
  36. </image>
  37. </view>
  38. <view class="flex-y-center home-content-item">
  39. <text class="home-left-name">券详细使用说明:</text>
  40. <text>{{info.content.voucher_display_info.voucher_description}}</text>
  41. </view>
  42. <view class="flex-y-center home-content-item">
  43. <text class="home-left-name">卡券面额:</text>
  44. <text>{{info.content.voucher_use_rule.fix_voucher.amount}}</text>
  45. </view>
  46. <view class="flex-y-center home-content-item">
  47. <text class="home-left-name">门槛金额:</text>
  48. <text>{{info.content.voucher_use_rule.fix_voucher.floor_amount}}</text>
  49. </view>
  50. <view class="flex-y-center home-content-item">
  51. <text class="home-left-name">有效期:</text>
  52. <text>{{info.content.voucher_use_rule.voucher_valid_period.valid_begin_time}}至{{info.content.voucher_use_rule.voucher_valid_period.valid_end_time}}</text>
  53. </view>
  54. </view>
  55. <uni-popup ref="popup">
  56. <view class="update-content">
  57. <view class="title">{{popType == 1?'同步商家券券码(最大上传1000个)':'提交预算(券总预算 = 券码 * 劵面额 )'}}</view>
  58. <form @submit="onSubUpdate" @reset="formReset">
  59. <input :type="popType == 1?'number':'digit'" v-model="updateNum" name="num" placeholder="请输入"
  60. class="input-box" />
  61. <view class="update-btns">
  62. <button @click="hideUpdate" ref="resetBtn" class="btn cancel-btn">取消</button>
  63. <button form-type="submit" class="btn confirm-btn">确定</button>
  64. </view>
  65. </form>
  66. </view>
  67. </uni-popup>
  68. </view>
  69. </template>
  70. <script>
  71. var siteinfo = require('@/siteinfo.js'); //require这个js模块
  72. export default {
  73. data() {
  74. return {
  75. info: {},
  76. id: '',
  77. baseURL: siteinfo.siteroot,
  78. updateNum: null,
  79. popType: ""
  80. }
  81. },
  82. onLoad(e) {
  83. this.id = e.id;
  84. this.http();
  85. },
  86. onShow(e) {
  87. },
  88. onUnload() {
  89. },
  90. onHide() {
  91. },
  92. methods: {
  93. showPop(type) {
  94. this.popType = type
  95. this.$refs.popup.open('center')
  96. },
  97. hideUpdate() {
  98. this.updateNum = null
  99. this.$refs.popup.close()
  100. },
  101. onSubUpdate(e) {
  102. console.log(e)
  103. let params = {
  104. admin_id: uni.getStorageSync('admin_id'),
  105. coupon_type: 2,
  106. id: this.id
  107. }
  108. if (this.popType == 1) {
  109. params.num = e.detail.value.num
  110. if (!params.num) {
  111. uni.showToast({
  112. title: "请输入商家券券码",
  113. icon: "none"
  114. })
  115. return false
  116. }
  117. } else {
  118. params.voucher_quantity = e.detail.value.num
  119. if (!params.voucher_quantity) {
  120. uni.showToast({
  121. title: "请输入提交预算",
  122. icon: "none"
  123. })
  124. return false
  125. }
  126. }
  127. let url = this.popType == 1 ? 'alipaycoupon/codedeposit' : 'alipaycoupon/ordervoucher'
  128. this.request({
  129. url,
  130. data: params,
  131. }).then(res => {
  132. this.hideUpdate()
  133. this.http()
  134. uni.showModal({
  135. content: res.message,
  136. showCancel: false
  137. })
  138. }).catch(res => {
  139. this.hideUpdate()
  140. uni.showToast({
  141. title: res.message,
  142. icon: 'none',
  143. duration: 2000,
  144. success: (res) => {},
  145. })
  146. })
  147. },
  148. getStatusName(status) {
  149. let name = ""
  150. switch (status) {
  151. case 'FIX_VOUCHER':
  152. name = "满减券"
  153. break;
  154. case 'DISCOUNT_VOUCHER':
  155. name = "折扣券"
  156. break;
  157. case 'SPECIAL_VOUCHER':
  158. name = "特价券"
  159. break;
  160. case 'EXCHANGE_VOUCHER':
  161. name = "兑换券"
  162. break;
  163. }
  164. return name
  165. },
  166. http() {
  167. this.request({
  168. url: "alipaycoupon/merchant_coupon_detail",
  169. data: {
  170. id: this.id,
  171. },
  172. }).then(res => {
  173. console.log(res, "res")
  174. if (res.code === '200') {
  175. this.info = res.data;
  176. this.info.content.voucher_type_name = this.getStatusName(res.data.content.voucher_type)
  177. }
  178. }).catch((res) => {
  179. uni.showToast({
  180. title: res.message,
  181. icon: 'none',
  182. duration: 2000,
  183. success: (res) => {},
  184. })
  185. });
  186. },
  187. showImg(src) {
  188. uni.previewImage({
  189. urls: [src]
  190. })
  191. }
  192. },
  193. }
  194. </script>
  195. <style lang="scss">
  196. page {
  197. background: #F5F7FA;
  198. }
  199. .info-btns {
  200. display: flex;
  201. flex-flow: row nowrap;
  202. justify-content: space-between;
  203. }
  204. .home-content {
  205. width: 690rpx;
  206. opacity: 1;
  207. background: #ffffff;
  208. border-radius: 14rpx;
  209. box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
  210. margin: 0 auto;
  211. position: relative;
  212. font-size: 28rpx;
  213. padding: 0 24rpx;
  214. margin-top: 30rpx;
  215. .list {
  216. height: 100rpx;
  217. color: #999999;
  218. .list-title {
  219. color: #000000;
  220. font-size: 30rpx;
  221. }
  222. .update-btn {
  223. padding: 0 16rpx;
  224. border-radius: 12rpx;
  225. background: #1E9FFF;
  226. color: #fff;
  227. line-height: 56rpx;
  228. font-size: 24rpx;
  229. }
  230. }
  231. .home-content-item {
  232. padding-bottom: 24rpx;
  233. .home-left-name {
  234. opacity: 1;
  235. font-size: 28rpx;
  236. font-family: PingFang SC, PingFang SC-Regular;
  237. font-weight: 400;
  238. text-align: left;
  239. color: #99a0ad;
  240. min-width: 160rpx;
  241. }
  242. .home-left-input {
  243. border: 1rpx solid #ccc;
  244. padding: 10rpx;
  245. word-break: break-all;
  246. flex: 1;
  247. }
  248. }
  249. }
  250. .logo {
  251. display: block;
  252. width: 100rpx;
  253. height: 100rpx;
  254. margin-left: auto;
  255. }
  256. .update-content {
  257. width: 80vw;
  258. padding: 30rpx;
  259. border-radius: 20rpx;
  260. background-color: #fff;
  261. .title {
  262. font-size: 28rpx;
  263. color: #666;
  264. }
  265. .input-box {
  266. width: 100%;
  267. height: 80rpx;
  268. border: 1rpx solid #ddd;
  269. margin: 20rpx 0;
  270. box-sizing: border-box;
  271. padding: 0 20rpx;
  272. border-radius: 20rpx;
  273. font-size: 30rpx;
  274. font-weight: 500;
  275. color: #333;
  276. }
  277. .update-btns {
  278. display: flex;
  279. flex-flow: row nowrap;
  280. justify-content: space-around;
  281. align-items: center;
  282. .btn {
  283. display: block;
  284. width: 20vw;
  285. height: 60rpx;
  286. line-height: 60rpx;
  287. font-size: 30rpx;
  288. &::after {
  289. border: none;
  290. }
  291. }
  292. .cancel-btn {
  293. background: #f2f2f2;
  294. }
  295. .confirm-btn {
  296. background-color: #3C94FC;
  297. color: #fff;
  298. }
  299. }
  300. }
  301. </style>