imgForm.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. <template>
  2. <view class="container">
  3. <view class="desc-info" v-if="promo.img || promo.promo_booth_desc">
  4. <image :src="promo.img" mode="widthFix" class="desc-info-img" @click="showImg(promo.img)"></image>
  5. <rich-text :nodes="promo.promo_booth_desc"></rich-text>
  6. </view>
  7. <form>
  8. <view class="form-item">
  9. <view class="input-block flex box-pack-between">
  10. <label class="label">状态</label>
  11. <view class="content">
  12. {{getStatusName(chaxun.biz_status)}}
  13. </view>
  14. </view>
  15. </view>
  16. <view class="form-item" v-if="chaxun.biz_status == 'CREATE_AUDIT_REJECT'">
  17. <view class="input-block flex box-pack-between">
  18. <label class="label">驳回原因</label>
  19. <view class="content">
  20. <rich-text :nodes="chaxun.reject_reason"></rich-text>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="form-item">
  25. <view class="input-block flex box-pack-between">
  26. <label class="label">服务名称</label>
  27. <view class="content flex-grow-1 ">
  28. <input type="text" v-model="info.servicename" placeholder="请输入"
  29. class="input-box text-align-right" />
  30. </view>
  31. </view>
  32. <view class="tips">≤5个字;名称超字数的需要缩减,例如:高德打车、好师傅维修等;</view>
  33. </view>
  34. <view class="form-item">
  35. <view class="input-block flex box-pack-between">
  36. <label class="label">副标题</label>
  37. <view class="content flex-grow-1 ">
  38. <input type="text" v-model="info.subhead" placeholder="请输入"
  39. class="input-box text-align-right" />
  40. </view>
  41. </view>
  42. <view class="tips">5-6个字;简要描述或介绍服务功能或者优惠权益,例如:全网极速接驾、上门家具装</view>
  43. </view>
  44. <view class="form-item">
  45. <view class="input-block flex box-pack-between">
  46. <label class="label">卖点标签</label>
  47. <view class="content flex-grow-1 ">
  48. <input type="text" v-model="info.selling_tag" placeholder="请输入"
  49. class="input-box text-align-right" />
  50. </view>
  51. </view>
  52. <view class="tips">4-5个字;对营销利益点的提炼,例如:极速到家、送货上门、全场5折等;</view>
  53. </view>
  54. <view class="form-item">
  55. <view class="input-block flex box-pack-between">
  56. <label class="label">行动点</label>
  57. <view class="content flex-grow-1 ">
  58. <input type="text" v-model="info.action_point" placeholder="请输入"
  59. class="input-box text-align-right" />
  60. </view>
  61. </view>
  62. <view class="tips">≤4个字;引导用户点击的文案,例如:去看看、去点餐、去预订等。</view>
  63. </view>
  64. <view class="form-item">
  65. <view class="input-block flex box-pack-between">
  66. <label class="label">logo图</label>
  67. <view class="content ">
  68. <view class="image-block" :class="{'image-bg':!info.logo}" style="width:180rpx;height:180rpx"
  69. @click="uploadFile('logo')">
  70. <image :src="baseUrl+info.logo" mode="aspectFit" class="form-img" v-if="info.logo"></image>
  71. <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
  72. </image>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="tips">【提报的logo图需要满足以下要求。<br />
  77. ● 图片尺寸:180*180(px);<br />
  78. ● 图片格式:png、jpg静态图片;<br />
  79. ● 图片大小:小于等于120kb;<br />
  80. ● 图片背景:不可透明;<br />
  81. ● 建议使用彩色背景反白logo,在实际展示尺寸中显示更清晰。】</view>
  82. </view>
  83. <view class="form-item">
  84. <view class="input-block flex box-pack-between">
  85. <label class="label">商家素材图(大图)</label>
  86. <view class="content ">
  87. <view class="image-block" :class="{'image-bg':!info.large_pic}"
  88. style="width:257rpx;height:171rpx" @click="uploadFile('large_pic')">
  89. <image :src="baseUrl+info.large_pic" mode="aspectFit" class="form-img"
  90. v-if="info.large_pic"></image>
  91. <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
  92. </image>
  93. </view>
  94. </view>
  95. </view>
  96. <view class="tips">【大卡图
  97. <br />提报的大卡图需要满足以下要求:
  98. <br />● 图片尺寸:大卡图514*342 (px);
  99. <br />● 图片格式:场景化图片要求PNG格式,独立元素图片要求JPG格式;
  100. <br />● 需要为商品实物/人物/实景图,不允许插画图;
  101. <br />● 图片需要体现小程序/服务本身特点,例如:茶饮点餐,图片建议为奶茶商品图。】
  102. </view>
  103. </view>
  104. <view class="form-item">
  105. <view class="input-block flex box-pack-between">
  106. <label class="label">商家素材图(小图)</label>
  107. <view class="content ">
  108. <view class="image-block" :class="{'image-bg':!info.small_pic}"
  109. style="width:258rpx;height:310rpx;" @click="uploadFile('small_pic')">
  110. <image :src="baseUrl+info.small_pic" mode="aspectFit" class="form-img"
  111. v-if="info.small_pic"></image>
  112. <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
  113. </image>
  114. </view>
  115. </view>
  116. </view>
  117. <view class="tips">【小卡图
  118. <br />提报的小卡图需要满足以下要求:
  119. <br />● 图片尺寸:小卡图258*310 (px);
  120. <br />● 图片格式:场景化图片要求PNG格式,独立元素图片要求JPG格式;
  121. <br />● 需要为商品实物/人物/实景图,不允许插画图;
  122. <br />● 图片需要体现小程序/服务本身特点,例如:茶饮点餐,图片建议为奶茶商品图。】
  123. </view>
  124. </view>
  125. <!-- v-if="['AUDITED','CREATE_AUDIT_REJECT','EDIT_AUDIT_REJECT',''].includes(chaxun.biz_status)" -->
  126. <view class="sub-btn"
  127. @click="onSubmit">立即提交</view>
  128. </form>
  129. <view class="is-iphone-x"></view>
  130. </view>
  131. </template>
  132. <script>
  133. export default {
  134. data() {
  135. return {
  136. admin_id: '',
  137. info: {},
  138. chaxun: {},
  139. promo: {},
  140. baseUrl: getApp().globalData.URL
  141. }
  142. },
  143. onLoad() {
  144. this.admin_id = uni.getStorageSync('admin_id')
  145. this.getInfo()
  146. },
  147. methods: {
  148. getInfo() {
  149. this.request({
  150. url: 'alipaycoupon/sucai_info',
  151. data: {
  152. admin_id: this.admin_id
  153. }
  154. }).then(res => {
  155. if (res.code == 200) {
  156. console.log(res)
  157. this.info = res.data.info
  158. this.chaxun = res.data.chaxun
  159. this.promo = res.data.promo
  160. }
  161. })
  162. },
  163. uploadFile(type) {
  164. uni.chooseMedia({
  165. count: 1,
  166. mediaType: ['image'],
  167. success: (res) => {
  168. console.log(res)
  169. let tempFilePath = res.tempFiles[0].tempFilePath
  170. uni.uploadFile({
  171. url: getApp().globalData.URL + '/api/alipaycoupon/upload',
  172. filePath: tempFilePath,
  173. name: 'file',
  174. formData: {
  175. type,
  176. admin_id: uni.getStorageSync('admin_id')
  177. },
  178. success: (r) => {
  179. console.log(r);
  180. if (r.statusCode == 200) {
  181. let data = JSON.parse(r.data)
  182. console.log(data)
  183. if (data.code == 200) {
  184. this.info[type] = data.data.src
  185. } else {
  186. uni.showToast({
  187. title: data.message,
  188. icon: "none"
  189. })
  190. }
  191. } else {
  192. uni.showToast({
  193. title: "上传失败,请重试",
  194. icon: "none"
  195. })
  196. }
  197. }
  198. });
  199. }
  200. })
  201. },
  202. showImg(src) {
  203. uni.previewImage({
  204. urls: [src]
  205. })
  206. },
  207. getStatusName(status) {
  208. let name = ""
  209. switch (status) {
  210. case "CREATE_AUDITING":
  211. name = "新增审核中"
  212. break;
  213. case "EDIT_AUDITING":
  214. name = "修改审核中"
  215. break;
  216. case "AUDITED":
  217. name = "审核通过"
  218. break;
  219. case "CREATE_AUDIT_REJECT":
  220. name = "新增驳回"
  221. break;
  222. case "EDIT_AUDIT_REJECT":
  223. name = "修改驳回"
  224. break;
  225. }
  226. return name
  227. },
  228. onLeimuChange(e) {
  229. this.info.category_id = this.leimuList[e.detail.value].code
  230. this.getCategoryName(this.leimuList[e.detail.value].code)
  231. },
  232. onChangeTime(e, name) {
  233. this.info[name] = e.detail.value
  234. },
  235. onSubmit(e) {
  236. let params = {
  237. admin_id: this.admin_id,
  238. id: this.info.id,
  239. servicename: this.info.servicename,
  240. subhead: this.info.subhead,
  241. selling_tag: this.info.selling_tag,
  242. action_point: this.info.action_point,
  243. logo: this.info.logo,
  244. large_pic: this.info.large_pic,
  245. small_pic: this.info.small_pic,
  246. }
  247. this.request({
  248. url: 'alipaycoupon/sucai',
  249. data: params
  250. }).then(res => {
  251. if (res.code == 200) {
  252. uni.showModal({
  253. content: "提交成功",
  254. showCancel: false,
  255. success: (r) => {
  256. this.getInfo()
  257. }
  258. })
  259. } else {
  260. uni.showToast({
  261. title: res.message,
  262. icon: 'none'
  263. })
  264. }
  265. }).catch(res => {
  266. uni.showToast({
  267. title: res.message,
  268. icon: 'none'
  269. })
  270. })
  271. }
  272. }
  273. }
  274. </script>
  275. <style>
  276. page {
  277. background-color: #f4f5f6;
  278. }
  279. </style>
  280. <style lang="scss" scoped>
  281. @import url("@/static/css/flex.css");
  282. .container {
  283. background-color: #f4f5f6
  284. }
  285. .desc-info {
  286. padding: 20rpx;
  287. font-size: 26rpx;
  288. line-height: 1.5;
  289. }
  290. .desc-info-img {
  291. display: block;
  292. width: 100%;
  293. }
  294. .text-align-right {
  295. text-align: right;
  296. }
  297. .form-item {
  298. padding: 20rpx 20rpx;
  299. font-size: 28rpx;
  300. line-height: 1.5;
  301. margin-bottom: 20rpx;
  302. background: #fff;
  303. word-break: break-all;
  304. .input-block {}
  305. .label {
  306. flex: none;
  307. display: block;
  308. padding-right: 30rpx;
  309. }
  310. .content {}
  311. .input-box {
  312. width: 100%;
  313. }
  314. .tips {
  315. font-size: 24rpx;
  316. color: #f00;
  317. line-height: 1.5;
  318. border-top: 1rpx solid #f2f2f2;
  319. margin-top: 20rpx;
  320. padding-top: 15rpx;
  321. }
  322. .image-bg {
  323. background-color: #f4f5f6;
  324. }
  325. .image-block {
  326. overflow: hidden;
  327. border-radius: 12rpx;
  328. position: relative;
  329. .form-img {
  330. display: block;
  331. width: 100%;
  332. height: 100%;
  333. }
  334. .form-img-add-btn {
  335. display: block;
  336. width: 100rpx;
  337. height: 100rpx;
  338. position: absolute;
  339. left: 50%;
  340. top: 50%;
  341. transform: translate(-50%, -50%);
  342. }
  343. }
  344. }
  345. .sub-btn {
  346. width: 700rpx;
  347. height: 100rpx;
  348. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  349. border-radius: 8rpx;
  350. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  351. text-align: center;
  352. line-height: 100rpx;
  353. font-size: 36rpx;
  354. font-weight: 500;
  355. color: #fff;
  356. margin: 0 auto;
  357. }
  358. </style>