modalDialog.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. <template>
  2. <view>
  3. <u-modal v-model="show" :content-style="{ fontSize: '32rpx' }" @confirm="contentBtn" :show-title="false" confirm-text="知道了" :confirm-style="{ fontWeight: '700' }">
  4. <view class="slot-content">
  5. <rich-text :nodes="content"></rich-text>
  6. </view>
  7. </u-modal>
  8. <!-- 关注公众号 -->
  9. <u-modal
  10. v-model="goFollowShow"
  11. :content-style="{ fontSize: '32rpx' }"
  12. @confirm="goFollowShowBtn"
  13. :show-cancel-button="true"
  14. confirm-text="去关注"
  15. @cancel="cancel"
  16. :show-title="false"
  17. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  18. :confirm-style="{ fontWeight: '700' }"
  19. >
  20. <view class="slot-content">
  21. <rich-text :nodes="accounts"></rich-text>
  22. </view>
  23. </u-modal>
  24. <u-modal
  25. v-model="cancelShow"
  26. :content="canceltext"
  27. :content-style="{ fontSize: '32rpx', lineHeight: '80rpx' }"
  28. :confirm-style="{ fontWeight: '700' }"
  29. @confirm="cancelShowBtn"
  30. @cancel="cancelBtn"
  31. :show-title="false"
  32. :show-cancel-button="true"
  33. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  34. ></u-modal>
  35. <!-- 立即申请 -->
  36. <u-modal
  37. v-model="applyIsShow"
  38. :content-style="{ fontSize: '32rpx' }"
  39. @confirm="applyIsShowBtn"
  40. :show-cancel-button="true"
  41. :confirm-text="isShowAlert ? '立即上传' : '立即申请'"
  42. @cancel="applyIsShowCancel"
  43. :show-title="false"
  44. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  45. :confirm-style="{ fontWeight: '700' }"
  46. >
  47. <view class="slot-content">
  48. <rich-text :nodes="jurisdictionText"></rich-text>
  49. </view>
  50. </u-modal>
  51. <!-- 拨打电话 -->
  52. <u-modal
  53. v-model="showhasPermission"
  54. :content-style="{ fontSize: '32rpx' }"
  55. @confirm="showhasPermissionBtn"
  56. :show-cancel-button="true"
  57. confirm-text="提交申请"
  58. @cancel="showhasPermissionCancel"
  59. :show-title="false"
  60. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  61. :confirm-style="{ fontWeight: '700' }"
  62. >
  63. <view class="slot-content">
  64. <block v-if="jurisdictionList.isAudioVideo == 2">
  65. <text>您暂无权限查看此视频</text>
  66. <text>若想查看可以联系对口销售</text>
  67. </block>
  68. <block v-else>
  69. <text>您暂无权限参加此活动</text>
  70. <text>若想参加可以联系对口销售</text>
  71. </block>
  72. <view
  73. >{{ jurisdictionList.SellerName }} : <text @click="mobileDial" class="seller-mobile"> {{ jurisdictionList.SellerMobile }}</text></view
  74. >
  75. <text>申请开通对应的试用权限</text>
  76. </view>
  77. </u-modal>
  78. <u-modal v-model="showRelation" confirm-text="知道了" :confirm-style="{ fontWeight: '700' }" :content="contentRelation"></u-modal>
  79. <!-- 修改手机号 -->
  80. <u-modal
  81. width="650"
  82. v-model="editIsShowDlg"
  83. :content-style="{ fontSize: '32rpx' }"
  84. @confirm="GoOutboundMobileBtn"
  85. :show-cancel-button="true"
  86. confirm-text="无需修改"
  87. cancel-text="前去修改"
  88. cancel-color="#3385FF"
  89. @cancel="GoOutboundMobileIsGo"
  90. :show-title="false"
  91. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  92. >
  93. <view class="slot-content">
  94. <rich-text :nodes="editIsShowAccounts"></rich-text>
  95. </view>
  96. </u-modal>
  97. <u-modal
  98. v-model="mailboxBindingDlg"
  99. :content-style="{ fontSize: '32rpx' }"
  100. @confirm="gmailboxBindingDlgBtn"
  101. :show-cancel-button="true"
  102. confirm-text="设置"
  103. @cancel="cancelMailboxBindingDlg"
  104. :show-title="false"
  105. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  106. :confirm-style="{ fontWeight: '700' }"
  107. >
  108. <view class="slot-content">
  109. <rich-text :nodes="mailboxText"></rich-text>
  110. </view>
  111. </u-modal>
  112. </view>
  113. </template>
  114. <script>
  115. import { User, activity, FreeButton } from "@/config/api.js";
  116. export default {
  117. data() {
  118. return {
  119. goFollowShow: false,
  120. show: false,
  121. cancelShow: false,
  122. applyIsShow: false,
  123. showRelation: false,
  124. showhasPermission: false,
  125. contentRelation: "申请已提交,请等待销售人员与您联系",
  126. content: "",
  127. accounts: "",
  128. canceltext: "",
  129. jurisdictionText: "",
  130. hasPermissionText: "",
  131. editIsShowAccounts: "",
  132. editIsShowDlg: false,
  133. mailboxBindingDlg: false,
  134. mailboxText: "您当前绑定的联系方式为邮箱,请先设置您的外呼号码",
  135. isShowAlert: false, //获取权限弹窗是否展示免费月卡接口
  136. };
  137. },
  138. props: {
  139. isShow: {
  140. type: Boolean,
  141. default: false,
  142. },
  143. signupType: {
  144. // type: Number,
  145. },
  146. signupStatus: {
  147. type: String,
  148. default: "Success",
  149. },
  150. goFollow: {
  151. type: Boolean,
  152. },
  153. isCancelShow: {
  154. type: Boolean,
  155. default: false,
  156. },
  157. idTypeCancel: {
  158. type: Object,
  159. },
  160. jurisdictionList: {
  161. type: Object,
  162. },
  163. applyForIsShow: {
  164. //潜在用户
  165. type: Boolean,
  166. },
  167. isShowhasPermission: {
  168. //联系销售
  169. type: Boolean,
  170. },
  171. hasPermission: {
  172. //权限字段
  173. type: String,
  174. },
  175. editIsShow: {
  176. type: Boolean,
  177. },
  178. countryCode: {
  179. type: String,
  180. },
  181. mobileEdit: {
  182. type: String,
  183. },
  184. goOnNextStep: {
  185. type: Boolean,
  186. default: false,
  187. },
  188. mailboxBinding: {
  189. type: Boolean,
  190. default: false,
  191. },
  192. },
  193. watch: {
  194. mailboxBinding() {
  195. this.mailboxBindingDlg = this.mailboxBinding;
  196. },
  197. editIsShow() {
  198. this.editIsShowDlg = this.editIsShow;
  199. if (this.editIsShow) {
  200. this.editIsShowAccounts = `
  201. 默认外呼号码是您当前绑定的手机号:<br />
  202. ${this.countryCode}-${this.mobileEdit}<br/><br/>
  203. 是否需要修改您的外呼号码?
  204. `;
  205. }
  206. },
  207. goFollow() {
  208. this.goFollowShow = this.goFollow;
  209. },
  210. isShow() {
  211. this.show = this.isShow;
  212. },
  213. signupType() {
  214. if (this.signupStatus !== "Success") return;
  215. if (this.signupType == 1) {
  216. this.content = `${this.countryCode}-${this.mobileEdit}<br/>预约成功,已加入您的活动日程 <br/><br/> 请关注【查研观向小助手】公众号,及时获取活动信息变更提醒
  217. `;
  218. this.accounts = `
  219. ${this.countryCode}-${this.mobileEdit}<br/>
  220. 预约成功,已加入您的活动日程<br/><br/>
  221. 想要及时获取活动时间变更通知,请关注【查研观向小助手】公众号
  222. `;
  223. } else if (this.signupType == 999) {
  224. this.content = "设置成功<br /> <br/>请关注【查研观向小助手】公众号,会前15分钟为您推送微信提醒";
  225. this.accounts = `设置成功,会前15分钟会为您推送微信消息提醒<br/><br/>
  226. 请关注【查研观向小助手】公众号,以获取微信消息提醒`;
  227. } else if (this.signupType == "summaryIsHandel") {
  228. this.content = "会议纪要预约成功 <br/><br/> 请关注【查研观向小助手】公众号,若有调研纪要发布/更新,将及时为您推送微信消息";
  229. this.accounts = `
  230. 会议纪要预约成功<br/><br/>
  231. 请关注【查研观向小助手】公众号,若有调研纪要发布/更新,将及时为您推送微信消息 `;
  232. } else {
  233. this.content = `报名成功,已加入您的活动日程 <br/><br/> 请关注【查研观向小助手】公众号,${this.signupType == "CClass" ? "及时获取活动信息变更提醒" : "会前1小时为您推送微信提醒"}`;
  234. this.accounts = `
  235. 报名成功,已加入您的活动日程<br/><br/>
  236. 想要及时获取活动时间变更通知,请关注【查研观向小助手】公众号 `;
  237. }
  238. },
  239. signupStatus() {
  240. if (this.signupStatus == "Success") return;
  241. if (this.signupStatus == "FullStarffed") {
  242. this.content = "此活动报名人数已满,请留意下期活动";
  243. } else if (this.signupStatus == "TwoPeople") {
  244. this.content = "单机构最多2人报名同一活动,您所在机构报名人数已满";
  245. } else if (this.signupStatus == "BreakPromise") {
  246. this.content = "由于爽约次数过多,您暂时被限制报名资格";
  247. } else if (this.signupStatus == "Overtime") {
  248. this.content = "活动开始前1小时内无法预约,请联系对口销售处理";
  249. }
  250. },
  251. "idTypeCancel.type": {
  252. handler: function () {
  253. if (this.idTypeCancel.type == 1) {
  254. this.canceltext = "您要取消此次活动预约外呼吗?";
  255. } else {
  256. this.canceltext = "您要取消此次活动的报名吗?";
  257. }
  258. },
  259. deep: true,
  260. },
  261. isCancelShow() {
  262. this.cancelShow = this.isCancelShow;
  263. },
  264. applyForIsShow() {
  265. this.jurisdictionText = this.isShowAlert ? "上传名片并填写简单信息,24小时内我们会为您开通一个月的免费月卡" : this.jurisdictionList.PopupMsg;
  266. this.applyIsShow = this.applyForIsShow;
  267. },
  268. isShowhasPermission() {
  269. this.hasPermissionText = this.jurisdictionList.PopupMsg;
  270. this.showhasPermission = this.isShowhasPermission;
  271. },
  272. },
  273. methods: {
  274. contentBtn() {
  275. this.$parent.isShow = false;
  276. this.show = false;
  277. this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
  278. },
  279. //去关注
  280. goFollowShowBtn() {
  281. this.$parent.goFollow = false;
  282. this.goFollowShow = false;
  283. this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
  284. uni.navigateTo({
  285. url: "/activityPages/accountsOfficial/accountsOfficial",
  286. });
  287. },
  288. cancel() {
  289. this.$parent.goFollow = false;
  290. this.goFollowShow = false;
  291. this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
  292. },
  293. cancelBtn() {
  294. this.$parent.isCancelShow = false;
  295. this.cancelShow = false;
  296. },
  297. cancelShowBtn() {
  298. activity
  299. .signupCancel({
  300. ActivityId: this.idTypeCancel.id,
  301. SignupType: this.idTypeCancel.type,
  302. })
  303. .then((res) => {
  304. if (res.Ret == 200) {
  305. this.idTypeCancel.cutId = res.Data.ActivityId;
  306. if (this.signupType == 1) {
  307. uni.showToast({
  308. title: "预约外呼已取消",
  309. duration: 2000,
  310. });
  311. } else {
  312. uni.showToast({
  313. title: "已取消报名",
  314. duration: 2000,
  315. });
  316. }
  317. this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
  318. }
  319. this.$parent.isCancelShow = false;
  320. this.cancelShow = false;
  321. });
  322. },
  323. //立即申请
  324. applyIsShowBtn() {
  325. this.applyIsShow = false;
  326. this.$parent.applyForIsShow = false;
  327. if (this.hasPermission == 3) {
  328. uni.navigateTo({
  329. url: "/pageMy/applyTrial/applyTrial?tryType=Activity&detailId=" + this.jurisdictionList.ActivityId,
  330. });
  331. } else if (this.hasPermission == 4) {
  332. this.showRelation = true;
  333. } else if (this.hasPermission == 5) {
  334. this.showhasPermissionBtn();
  335. }
  336. },
  337. applyIsShowCancel() {
  338. this.applyIsShow = false;
  339. this.$parent.applyForIsShow = false;
  340. },
  341. showhasPermissionBtn() {
  342. User.applyTry({
  343. TryType: this.jurisdictionList.isAudioVideo == 1 ? "MicroAudio" : this.jurisdictionList.isAudioVideo == 2 ? "MicroVideo" : "Activity",
  344. DetailId: this.jurisdictionList.ActivityId,
  345. }).then((res) => {
  346. this.showhasPermission = false;
  347. this.$parent.isShowhasPermission = false;
  348. });
  349. },
  350. mobileDial() {
  351. uni.makePhoneCall({
  352. phoneNumber: this.jurisdictionList.SellerMobile, //仅为示例
  353. });
  354. this.showhasPermission = false;
  355. this.$parent.isShowhasPermission = false;
  356. },
  357. showhasPermissionCancel() {
  358. this.showhasPermission = false;
  359. this.$parent.isShowhasPermission = false;
  360. },
  361. GoOutboundMobileBtn() {
  362. this.$parent.editIsShow = false;
  363. this.editIsShowDlg = false;
  364. if (this.goOnNextStep) {
  365. this.goFollowShow = true;
  366. } else {
  367. this.show = true;
  368. }
  369. },
  370. GoOutboundMobileIsGo() {
  371. this.$parent.editIsShow = false;
  372. this.editIsShowDlg = false;
  373. this.$emit("cancelShowBtn", this.idTypeCancel, this.signupType, this.idTypeCancel.isNum);
  374. uni.navigateTo({
  375. url:
  376. "/activityPages/editOutbound/editOutbound?title=修改外呼号码&identification=修改&goOnNextStep=" +
  377. this.goOnNextStep +
  378. "&id=" +
  379. this.idTypeCancel.cutId +
  380. "&cellphone=" +
  381. this.countryCode +
  382. "-" +
  383. this.mobileEdit,
  384. });
  385. },
  386. gmailboxBindingDlgBtn() {
  387. this.$parent.mailboxBinding = false;
  388. this.mailboxBindingDlg = false;
  389. this.$parent.signupType = "";
  390. uni.navigateTo({
  391. url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=邮箱&goOnNextStep=" + this.goOnNextStep + "&id=" + this.idTypeCancel.cutId,
  392. });
  393. },
  394. cancelMailboxBindingDlg() {
  395. this.$parent.mailboxBinding = false;
  396. this.mailboxBindingDlg = false;
  397. },
  398. //获取权限弹窗是否展示免费月卡接口
  399. async userIsShowAlert() {
  400. const res = await FreeButton.userIsShowAlert();
  401. if (res.Ret === 200) {
  402. this.isShowAlert = res.Data.IsShow;
  403. }
  404. },
  405. },
  406. mounted() {
  407. this.userIsShowAlert();
  408. },
  409. };
  410. </script>
  411. <style scoped lang="scss">
  412. .slot-content {
  413. width: 100%;
  414. padding: 50rpx;
  415. text-align: center;
  416. font-size: 32rpx;
  417. color: #0f1826;
  418. line-height: 48rpx;
  419. }
  420. .seller-mobile {
  421. display: inline-block;
  422. color: #2979ff;
  423. }
  424. .u-model__footer__button.data-v-3626fcec {
  425. border-right: 1rpx solid #333;
  426. }
  427. </style>