serviceForm.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <template>
  2. <view class="container">
  3. <form>
  4. <view class="form-item" v-if="chaxun.status == 'AUDIT_REJECT'">
  5. <view class="input-block flex box-pack-between">
  6. <label class="label">操作</label>
  7. <view class="content">
  8. <view class="shixiao-btn" @click="onShixiao">点此失效</view>
  9. </view>
  10. </view>
  11. <view class="tips">如果更新类目 请先失效后再重新提交审核</view>
  12. </view>
  13. <view class="form-item">
  14. <view class="input-block flex box-pack-between">
  15. <label class="label">状态</label>
  16. <view class="content">
  17. {{getStatusName(chaxun.status)}}
  18. </view>
  19. </view>
  20. </view>
  21. <view class="form-item" v-if="chaxun.status == 'AUDIT_REJECT'">
  22. <view class="input-block flex box-pack-between">
  23. <label class="label">驳回原因</label>
  24. <view class="content">
  25. <rich-text :nodes="chaxun.reject_reason"></rich-text>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="form-item">
  30. <view class="input-block flex box-pack-between">
  31. <label class="label">类目</label>
  32. <view class="content flex-grow-1 ">
  33. <view class="input-box text-align-right" @click="showCategoryList">
  34. {{info.category_name || '请选择'}}
  35. </view>
  36. <input type="text" :value="info.category_id"
  37. style="position: fixed;left: -1000px;top: -1000px;">
  38. </view>
  39. </view>
  40. </view>
  41. <view class="form-item">
  42. <view class="input-block flex box-pack-between">
  43. <label class="label">提报页面</label>
  44. <view class="content flex-grow-1 ">
  45. <picker :range="pagesList" range-key="name" @change="onPagesChange">
  46. <view class="input-box text-align-right">{{info.pages_name || '请选择'}}</view>
  47. </picker>
  48. <input type="text" :value="info.pages" style="position: fixed;left: -1000px;top: -1000px;">
  49. </view>
  50. </view>
  51. </view>
  52. <view class="form-item">
  53. <view class="input-block flex box-pack-between">
  54. <label class="label">服务名称</label>
  55. <view class="content flex-grow-1 ">
  56. <input type="text" v-model="info.serviceName" placeholder="请输入"
  57. class="input-box text-align-right" />
  58. </view>
  59. </view>
  60. <view class="tips">字数限制2~15个字填写格式:可以由中文、数字、英文、下划线、+、-组成,相同小程序下的服务名称不能重复。 审核提醒:
  61. 1.服务名称代表小程序内的某个功能或服务,服务名称不可重复且需代表不同的功能。 2.服务名称不可与小程序名称重复。
  62. 3.服务名称需要与小程序本身提供的服务相关,如租赁类小程序的服务名称需要与租赁服务有关,如以品牌名称/商家名称+服务类型、经营品类+服务类型、服务场所+服务类型来命名。不得表述宽泛,语义不清。正确示例:“XX酒店预定”、“XX手机租赁”、“杭州法喜寺购票”。
  63. </view>
  64. </view>
  65. <view class="form-item">
  66. <view class="input-block flex box-pack-between">
  67. <label class="label">服务描述</label>
  68. <view class="content flex-grow-1 ">
  69. <!-- <input type="text" value="" placeholder="请输入" class="input-box text-align-right" /> -->
  70. <textarea v-model="info.serviceDesc" placeholder="请输入" disable-default-padding
  71. style="padding-top:7rpx ;" class="input-box" />
  72. </view>
  73. </view>
  74. <view class="tips">请描述具体的服务内容,字数限制为5-100字审核提醒: 1.要清楚介绍服务功能,比如提供了什么功能,便于通过审核。
  75. 2.请不要填写无意义的内容3.请不要出现向外部应用引流的文案。
  76. </view>
  77. </view>
  78. <block v-if="['C000003266','C000003268'].includes(info.category_id)">
  79. <view class="form-item">
  80. <view class="input-block flex box-pack-between">
  81. <label class="label">商家配送范围</label>
  82. <view class="content flex-grow-1 ">
  83. <input type="text" v-model="info.fangwei" placeholder="请输入"
  84. class="input-box text-align-right" />
  85. </view>
  86. </view>
  87. <view class="tips">请输入可以支持配送的距离和范围,单位(公里),例如5公里内配送,请输入:5.00 </view>
  88. </view>
  89. <view class="form-item">
  90. <view class="input-block flex box-pack-between">
  91. <label class="label">联系电话</label>
  92. <view class="content flex-grow-1 ">
  93. <input type="text" v-model="info.tel" placeholder="请输入"
  94. class="input-box text-align-right" />
  95. </view>
  96. </view>
  97. <view class="tips">请输入合法的手机号码或者固定号码,其中固定号码的区号3到4位,电话7到8位,分机号选填(例:固定电话:0834-1133567 或者
  98. 0834-1133567-1234
  99. </view>
  100. </view>
  101. <view class="form-item">
  102. <view class="input-block flex box-pack-between">
  103. <label class="label">营业开始时间</label>
  104. <view class="content flex-grow-1 ">
  105. <picker mode="time" :value="info.start" @change="onChangeTime($event,'start')">
  106. <view class="input-box text-align-right">{{info.start || '请选择'}}</view>
  107. </picker>
  108. </view>
  109. </view>
  110. </view>
  111. <view class="form-item">
  112. <view class="input-block flex box-pack-between">
  113. <label class="label">营业结束时间</label>
  114. <view class="content flex-grow-1 ">
  115. <picker mode="time" :value="info.end" @change="onChangeTime($event,'end')">
  116. <view class="input-box text-align-right">{{info.end || '请选择'}}</view>
  117. </picker>
  118. </view>
  119. </view>
  120. </view>
  121. <view class="form-item">
  122. <view class="input-block flex box-pack-between">
  123. <label class="label">客单价/人均消费</label>
  124. <view class="content flex-grow-1 ">
  125. <input type="digit" v-model="info.price" placeholder="请输入"
  126. class="input-box text-align-right" />
  127. </view>
  128. </view>
  129. <view class="tips">请输入大致的人均消费,单位(元),例如:20元请输入:20</view>
  130. </view>
  131. <view class="form-item">
  132. <view class="input-block flex box-pack-between">
  133. <label class="label">品牌名称</label>
  134. <view class="content flex-grow-1 ">
  135. <input type="text" v-model="info.pinpai" placeholder="请输入"
  136. class="input-box text-align-right" />
  137. </view>
  138. </view>
  139. <view class="tips">请输入品牌名称</view>
  140. </view>
  141. </block>
  142. <view class="sub-btn" v-if="!chaxun || ['PROMOTION','INVALID','AUDIT_REJECT'].includes(chaxun.status)"
  143. @click="onSubmit">立即提交</view>
  144. </form>
  145. <view class="is-iphone-x"></view>
  146. <uni-popup ref="leimu-list" type="bottom" backgroundColor="#ffffff">
  147. <view class="leimu-list">
  148. <uni-search-bar placeholder="搜索类目" @confirm="searchLeimu" :value="leimuKeywords"
  149. @clear="clearLeimuKeywords" @cancel="clearLeimuKeywords">
  150. </uni-search-bar>
  151. <scroll-view scroll-y class="limu-list" @scrolltolower="getCategoryList(leimuPage+1)">
  152. <uni-table border stripe emptyText="暂无更多数据" :loading="getCategoryListLoading">
  153. <!-- 表头行 -->
  154. <uni-tr>
  155. <uni-th align="center" width="150rpx">选择</uni-th>
  156. <uni-th align="center" width="200rpx">一级类目</uni-th>
  157. <uni-th align="center" width="200rpx">二级类目</uni-th>
  158. <uni-th align="center" width="200rpx">三级类目</uni-th>
  159. </uni-tr>
  160. <!-- 表格数据行 -->
  161. <uni-tr v-for="(item,index) in leimuList" :key="item.id">
  162. <uni-td align="center"><button type="primary" size="mini"
  163. style="background: #1E9FFF;padding:0 16rpx;"
  164. @click="onLeimuChange(item)">选择</button></uni-td>
  165. <uni-td align="center">{{item.first_name}}</uni-td>
  166. <uni-td align="center">{{item.second_name}}</uni-td>
  167. <uni-td align="center">{{item.third_name}}</uni-td>
  168. </uni-tr>
  169. </uni-table>
  170. </scroll-view>
  171. </view>
  172. </uni-popup>
  173. </view>
  174. </template>
  175. <script>
  176. export default {
  177. data() {
  178. return {
  179. admin_id: '',
  180. info: {},
  181. chaxun: {},
  182. getCategoryListLoading: false,
  183. leimuList: [],
  184. leimuKeywords: '',
  185. leimuPage: 1,
  186. leimuLimit: 20,
  187. leimuHasMore: true,
  188. pagesList: [{
  189. name: "下单页",
  190. url: 'pages/index/index'
  191. }, {
  192. name: '首页',
  193. url: "pages/home/home"
  194. }]
  195. }
  196. },
  197. onLoad() {
  198. this.admin_id = uni.getStorageSync('admin_id')
  199. this.getInfo()
  200. this.getCategoryList()
  201. },
  202. methods: {
  203. showCategoryList() {
  204. this.$refs['leimu-list'].open('bottom')
  205. },
  206. clearLeimuKeywords() {
  207. console.log('cancel');
  208. this.leimuKeywords = ""
  209. this.getCategoryList()
  210. },
  211. searchLeimu(e) {
  212. console.log(e)
  213. this.leimuKeywords = e.value
  214. this.getCategoryList()
  215. },
  216. getCategoryList(page = 1) {
  217. if (page == 1) {
  218. this.leimuHasMore = true
  219. this.leimuList = []
  220. this.leimuPage = 1
  221. }
  222. if (this.getCategoryListLoading || !this.leimuHasMore) {
  223. return false
  224. }
  225. this.getCategoryListLoading = true
  226. this.request({
  227. url: 'alipaycoupon/service_category',
  228. data: {
  229. keyword: this.leimuKeywords,
  230. page,
  231. limit: this.leimuLimit
  232. }
  233. }).then(res => {
  234. if (res.code == 200) {
  235. if (res.data.length > 0) {
  236. this.leimuList.push(...res.data)
  237. this.leimuPage = page
  238. this.leimuHasMore = res.data.length == this.leimuLimit
  239. } else {
  240. this.leimuHasMore = false
  241. }
  242. }
  243. }).finally(() => {
  244. this.getCategoryListLoading = false
  245. })
  246. },
  247. getInfo() {
  248. this.request({
  249. url: 'alipaycoupon/fuwu_info',
  250. data: {
  251. admin_id: this.admin_id
  252. }
  253. }).then(res => {
  254. if (res.code == 200) {
  255. console.log(res)
  256. this.info = res.data.info
  257. this.chaxun = res.data.chaxun
  258. // if (res.data.info.category_id) {
  259. // this.getCategoryName(res.data.info.category_id)
  260. // }
  261. if (res.data.info.pages) {
  262. this.getPagesName(res.data.info.pages)
  263. }
  264. }
  265. })
  266. },
  267. getStatusName(status) {
  268. let name = ""
  269. switch (status) {
  270. case "EDITING":
  271. name = "编辑中"
  272. break;
  273. case "AUDITING":
  274. name = "审核中"
  275. break;
  276. case "PROMOTION":
  277. name = "可推广"
  278. break;
  279. case "STOP_PROMOTION":
  280. name = "停止推广"
  281. break;
  282. case "INVALID":
  283. name = "失效"
  284. break;
  285. case "PUNISHED":
  286. name = "处罚"
  287. break;
  288. case "AUDIT_REJECT":
  289. name = "审核驳回"
  290. break;
  291. }
  292. return name
  293. },
  294. onLeimuChange(item) {
  295. this.$set(this.info, 'category_id', item.category_id)
  296. this.$set(this.info, 'category_name', `${item.first_name}-${item.second_name}-${item.third_name}`)
  297. this.$refs['leimu-list'].close()
  298. },
  299. getCategoryName(category_id) {
  300. let active = this.leimuList.find(item => {
  301. return item.category_id == category_id
  302. })
  303. if (active) {
  304. this.$set(this.info, 'category_name',
  305. `${active.first_name}-${active.second_name}-${active.third_name}`)
  306. } else {
  307. this.$set(this.info, 'category_name', '')
  308. }
  309. },
  310. onPagesChange(e) {
  311. this.$set(this.info, 'pages', this.pagesList[e.detail.value].url)
  312. this.$set(this.info, 'pages_name', this.pagesList[e.detail.value].name)
  313. },
  314. getPagesName(url) {
  315. let active = this.pagesList.find(item => {
  316. return item.url == url
  317. })
  318. if (active) {
  319. this.$set(this.info, 'pages_name', active.name)
  320. } else {
  321. this.$set(this.info, 'pages_name', '')
  322. }
  323. },
  324. onChangeTime(e, name) {
  325. this.info[name] = e.detail.value
  326. },
  327. onSubmit(e) {
  328. let params = {
  329. admin_id: this.admin_id,
  330. category_id: this.info.category_id,
  331. serviceName: this.info.serviceName,
  332. serviceDesc: this.info.serviceDesc,
  333. fangwei: this.info.fangwei,
  334. tel: this.info.tel,
  335. start: this.info.start,
  336. end: this.info.end,
  337. price: this.info.price,
  338. pinpai: this.info.pinpai,
  339. pages: this.info.pages
  340. }
  341. this.request({
  342. url: 'alipaycoupon/edit',
  343. data: params
  344. }).then(res => {
  345. if (res.code == 200) {
  346. uni.showModal({
  347. content: "提交成功",
  348. showCancel: false,
  349. success: (r) => {
  350. this.getInfo()
  351. }
  352. })
  353. } else {
  354. uni.showToast({
  355. title: res.message,
  356. icon: 'none'
  357. })
  358. }
  359. }).catch(res => {
  360. uni.showToast({
  361. title: res.message,
  362. icon: 'none'
  363. })
  364. })
  365. },
  366. onShixiao() {
  367. uni.showModal({
  368. content: "确定要失效吗",
  369. success: (r) => {
  370. if (r.confirm) {
  371. this.request({
  372. url: "alipaycoupon/shixiao",
  373. data: {
  374. admin_id: uni
  375. .getStorageSync(
  376. "admin_id")
  377. }
  378. }).then(res => {
  379. if (res.code == 200) {
  380. uni.showModal({
  381. content: "操作成功",
  382. showCancel: false,
  383. success: (
  384. r) => {
  385. this.getInfo()
  386. }
  387. })
  388. } else {
  389. uni.showToast({
  390. title: res
  391. .message,
  392. icon: 'none'
  393. })
  394. }
  395. }).catch(res => {
  396. uni.showToast({
  397. title: res.message,
  398. icon: 'none'
  399. })
  400. })
  401. }
  402. }
  403. })
  404. },
  405. }
  406. }
  407. </script>
  408. <style>
  409. page {
  410. background-color: #f4f5f6;
  411. }
  412. </style>
  413. <style lang="scss" scoped>
  414. @import url("@/static/css/flex.css");
  415. .container {
  416. background-color: #f4f5f6
  417. }
  418. .text-align-right {
  419. text-align: right;
  420. }
  421. .form-item {
  422. padding: 20rpx 20rpx;
  423. font-size: 28rpx;
  424. line-height: 1.5;
  425. margin-bottom: 20rpx;
  426. background: #fff;
  427. word-break: break-all;
  428. .input-block {}
  429. .label {
  430. flex: none;
  431. display: block;
  432. padding-right: 30rpx;
  433. }
  434. .content {}
  435. .input-box {
  436. width: 100%;
  437. }
  438. .shixiao-btn {
  439. background: #1E9FFF;
  440. color: #fff;
  441. padding: 6rpx 16rpx;
  442. border-radius: 12rpx;
  443. }
  444. .tips {
  445. font-size: 24rpx;
  446. color: #f00;
  447. line-height: 1.5;
  448. border-top: 1rpx solid #f2f2f2;
  449. margin-top: 20rpx;
  450. padding-top: 15rpx;
  451. }
  452. }
  453. .sub-btn {
  454. width: 700rpx;
  455. height: 100rpx;
  456. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  457. border-radius: 8rpx;
  458. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  459. text-align: center;
  460. line-height: 100rpx;
  461. font-size: 36rpx;
  462. font-weight: 500;
  463. color: #fff;
  464. margin: 0 auto;
  465. }
  466. .limu-list {
  467. max-height: 70vh;
  468. }
  469. </style>
  470. <style>
  471. .uni-table-td {
  472. vertical-align: middle;
  473. }
  474. </style>