activity-contact.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. <template>
  2. <view class="cm-contact" v-if="activityEntryVisiable || contactVisiable">
  3. <!-- 未展开状态 -->
  4. <view class="cm-close-box" v-show="!isActive">
  5. <view class="cm-icon cm-entry" @click="handleToggleEntry(true)" v-if="activityEntryVisiable"></view>
  6. <view class="cm-icon cm-bround cm-open-btn" @click="handleToggleAcitve(true)"></view>
  7. </view>
  8. <!-- 展开状态 -->
  9. <view class="cm-close-box" v-show="isActive">
  10. <view class="cm-icon cm-entry" @click="handleToggleEntry(true)" v-if="activityEntryVisiable"></view>
  11. <view class="cm-icon regexp" @click="handleToCouponExp">优惠券\n规则</view>
  12. <view class="cm-icon cm-bround cm-mobile" @click="handelShowMobile">
  13. <view class="cm-dialog" v-show="mobileVisiable">
  14. <view class="cm-dialog-content content1">
  15. <view class="cm-item" @click="phoneCall('15338897365')">
  16. <text>展会咨询电话:15338897365</text>
  17. </view>
  18. <view class="cm-line line1"></view>
  19. <view class="cm-item" @click="phoneCall('15338851365')">
  20. <text>客服咨询电话:15338851365</text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <view class="cm-icon cm-bround cm-ewm" @click="handelShowWechat">
  26. <view class="cm-dialog" v-show="wechatVisiable">
  27. <view class="cm-dialog-content content2">
  28. <view class="cm-item">
  29. <image
  30. show-menu-by-longpress
  31. src="https://static.caimei365.com/app/img/icon2/cm_wechat_02.png"
  32. mode="widthFix"
  33. ></image>
  34. <text>展会咨询微信</text>
  35. </view>
  36. <view class="cm-line line2"></view>
  37. <view class="cm-item">
  38. <image
  39. show-menu-by-longpress
  40. src="https://static.caimei365.com/app/img/icon2/cm_wechat_01.png"
  41. mode="widthFix"
  42. ></image>
  43. <text>客服咨询微信</text>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="cm-icon cm-bround cm-close-btn" @click="handleToggleAcitve(false)"></view>
  49. </view>
  50. <view class="mask cover" v-if="activityEntryVisiable && entryVisiable">
  51. <view class="content">
  52. <!-- <image
  53. src="https://static.caimei365.com/app/img/icon2/cm_entry_bg.png"
  54. mode="widthFix"
  55. @click="handleToggleCoupon(true)"
  56. ></image> -->
  57. <image
  58. src="https://static.caimei365.com/app/img/icon2/coupon-entry-app.png"
  59. @click="handleNaviagtorToCoupon"
  60. mode="widthFix"
  61. ></image>
  62. <view class="mask-close" @click="handleToggleEntry(false)"></view>
  63. </view>
  64. </view>
  65. <!-- <view class="mask cover" v-if="showCouponEntry">
  66. <view class="content">
  67. <view class="btn btn1" @click="navigatorToPro(1)"></view>
  68. <view class="btn btn2" @click="navigatorToPro(2)"></view>
  69. <image src="https://static.caimei365.com/app/img/icon2/coupon-entry-app.png" mode="widthFix"></image>
  70. <view class="mask-close" @click="handleToggleCoupon(false)"></view>
  71. </view>
  72. </view>
  73. <view class="mask cover" v-if="showCouponEntryNew">
  74. <view class="content">
  75. <image
  76. src="https://static.caimei365.com/app/img/icon2/coupon-entry-app.png"
  77. mode="widthFix"
  78. @click="handleNaviagtorToCoupon"
  79. ></image>
  80. <view class="mask-close" @click="showCouponEntryNew = false"></view>
  81. </view>
  82. </view> -->
  83. <view class="mask" v-if="mobileVisiable || wechatVisiable" @click="handleClose"></view>
  84. </view>
  85. </template>
  86. <script>
  87. export default {
  88. props: {
  89. pageInfo: {
  90. type: Object
  91. }
  92. },
  93. data() {
  94. return {
  95. isActive: true,
  96. mobileVisiable: false,
  97. wechatVisiable: false,
  98. entryVisiable: true,
  99. activityEntryVisiable: false,
  100. contactVisiable: false,
  101. showCouponEntry: false,
  102. showCouponEntryNew: false
  103. }
  104. },
  105. created() {
  106. this.contactVisiable = this.pageInfo.infoBarStatus === 1
  107. this.activityEntryVisiable = this.initActivityEntry(
  108. this.pageInfo.redPacketBeginTime,
  109. this.pageInfo.redPacketEndTime
  110. )
  111. this.showCouponEntryNew = true
  112. console.log(this.pageInfo)
  113. },
  114. methods: {
  115. // 拨打电话
  116. phoneCall(number) {
  117. console.log(number)
  118. uni.makePhoneCall({
  119. phoneNumber: number //仅为示例
  120. })
  121. },
  122. // 是否展开
  123. handleToggleAcitve(active) {
  124. this.isActive = active
  125. this.mobileVisiable = false
  126. this.wechatVisiable = false
  127. },
  128. // 显示微信二维码
  129. handelShowWechat() {
  130. this.wechatVisiable = !this.wechatVisiable
  131. this.mobileVisiable = false
  132. },
  133. // 显示联系电话
  134. handelShowMobile() {
  135. this.mobileVisiable = !this.mobileVisiable
  136. this.wechatVisiable = false
  137. },
  138. // 隐藏微信二维码和联系电话
  139. handleClose() {
  140. this.mobileVisiable = false
  141. this.wechatVisiable = false
  142. },
  143. // 显示活动入口
  144. handleToggleEntry(visiable) {
  145. this.entryVisiable = visiable
  146. },
  147. // 跳转到领取优惠券
  148. handleNaviagtorToCoupon() {
  149. // this.$api.navigateTo('/pages/user/coupon/coupon-collection')
  150. this.$api.navigateTo('/pages/h5/article/path?link=https://www.caimei365.com/product-7963.html')
  151. },
  152. handleToCouponExp() {
  153. // this.$api.navigateTo('/pages/h5/activity/couponExp')
  154. this.$api.navigateTo('/pages/h5/article/path?link=https://www.caimei365.com/help/1038.html')
  155. },
  156. navigatorToPro(flag) {
  157. // 友盟自定义事件
  158. if (process.env.NODE_ENV != 'development') {
  159. if (flag === 2) {
  160. this.$uma.trackEvent('meibohui_Coupon_detail_click', {
  161. Um_Key_PageName: '云上美博会优惠券介绍',
  162. Um_Key_PageCategory: '活动专题页面',
  163. Um_Key_SourcePage: '活动专题页面'
  164. })
  165. }
  166. if (flag === 1) {
  167. this.$uma.trackEvent('meibohui_Coupon_buy_click', {
  168. Um_Key_PageName: '云上美博会优惠券购买跳转',
  169. Um_Key_PageCategory: '活动专题页面',
  170. Um_Key_SourcePage: '活动专题页面'
  171. })
  172. }
  173. }
  174. if (flag === 2) this.$api.navigateTo('/pages/h5/activity/couponExp')
  175. else this.$api.navigateTo('/pages/goods/product?id=6898')
  176. this.entryVisiable = false
  177. this.showCouponEntry = false
  178. },
  179. // 优惠券入口
  180. handleToggleCoupon(flag) {
  181. // 友盟自定义事件
  182. if (flag && process.env.NODE_ENV != 'development') {
  183. this.$uma.trackEvent('meibohui_Coupon_click', {
  184. Um_Key_PageName: '云上美博会获取弹窗点击',
  185. Um_Key_PageCategory: '活动专题页面',
  186. Um_Key_SourcePage: '活动专题页面'
  187. })
  188. }
  189. this.showCouponEntry = flag
  190. this.entryVisiable = false
  191. },
  192. // 初始化红包入口状态
  193. initActivityEntry(begin, end) {
  194. const nowTime = new Date().getTime()
  195. // 兼容 iso android 的时间处理
  196. const beginTime = new Date(begin.replace(/-/g, '/')).getTime()
  197. const endTime = new Date(end.replace(/-/g, '/')).getTime()
  198. console.log('活动是否开始: ')
  199. console.log(nowTime >= beginTime && nowTime <= endTime)
  200. return nowTime >= beginTime && nowTime <= endTime
  201. }
  202. }
  203. }
  204. </script>
  205. <style lang="scss" scoped>
  206. .cm-contact {
  207. position: fixed;
  208. right: 20rpx;
  209. bottom: 240rpx;
  210. z-index: 9999;
  211. }
  212. .cm-close-box {
  213. position: relative;
  214. z-index: 9;
  215. .cm-icon {
  216. position: relative;
  217. width: 80rpx;
  218. height: 80rpx;
  219. margin: 10rpx 0;
  220. &.regexp {
  221. border-radius: 50%;
  222. font-size: 20rpx;
  223. background: rgba(0, 0, 0, 0.4);
  224. justify-content: center;
  225. align-items: center;
  226. display: flex;
  227. color: #fff;
  228. text-align: center;
  229. }
  230. &.cm-bround {
  231. border-radius: 50%;
  232. }
  233. &.cm-entry {
  234. height: 88rpx;
  235. background: url(https://static.caimei365.com/app/img/icon2/cm_entry_icon.png) no-repeat center;
  236. background-size: 80rpx;
  237. }
  238. &.cm-open-btn {
  239. background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_open.png) no-repeat center;
  240. background-size: 39rpx;
  241. }
  242. &.cm-mobile {
  243. background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_mobile.png) no-repeat
  244. center;
  245. background-size: 39rpx;
  246. }
  247. &.cm-ewm {
  248. background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_ewm.png) no-repeat center;
  249. background-size: 39rpx;
  250. }
  251. &.cm-close-btn {
  252. background: rgba(0, 0, 0, 0.4) url(https://static.caimei365.com/app/img/icon2/cm_close.png) no-repeat center;
  253. background-size: 39rpx;
  254. }
  255. }
  256. }
  257. .cm-dialog {
  258. top: 0;
  259. right: 110rpx;
  260. position: absolute;
  261. padding: 20rpx;
  262. background: rgb(255, 92, 0);
  263. border-radius: 16rpx;
  264. z-index: 99999;
  265. &::after {
  266. position: absolute;
  267. top: 20rpx;
  268. right: -20rpx;
  269. content: '';
  270. display: block;
  271. width: 0;
  272. height: 0;
  273. border-top: 16rpx solid transparent;
  274. border-bottom: 16rpx solid transparent;
  275. border-left: 20rpx solid rgb(255, 92, 0);
  276. }
  277. .cm-line {
  278. &.line1 {
  279. width: 100%;
  280. height: 1px;
  281. background: #fff;
  282. margin: 10rpx 0;
  283. }
  284. &.line2 {
  285. width: 1px;
  286. height: 200rpx;
  287. background: #eee;
  288. margin: 0 16rpx;
  289. margin-top: -50rpx;
  290. }
  291. }
  292. .content1 {
  293. .cm-item {
  294. color: #fff;
  295. text {
  296. display: block;
  297. width: 400rpx;
  298. font-size: 28rpx;
  299. text-align: center;
  300. }
  301. }
  302. }
  303. .content2 {
  304. display: flex;
  305. justify-content: space-between;
  306. align-items: center;
  307. .cm-item {
  308. color: #fff;
  309. text {
  310. display: block;
  311. font-size: 28rpx;
  312. text-align: center;
  313. margin-top: 10rpx;
  314. }
  315. image {
  316. width: 240rpx;
  317. height: 240rpx;
  318. }
  319. }
  320. }
  321. }
  322. .mask {
  323. display: flex;
  324. justify-content: center;
  325. align-items: center;
  326. position: fixed;
  327. // z-index: 999;
  328. top: 0;
  329. left: 0;
  330. width: 100vw;
  331. height: 100vh;
  332. .content {
  333. position: relative;
  334. .mask-close {
  335. z-index: 9;
  336. position: absolute;
  337. top: -80rpx;
  338. right: 40rpx;
  339. width: 64rpx;
  340. height: 64rpx;
  341. background: url(https://static.caimei365.com/app/img/icon2/cm_float_close.png) no-repeat center;
  342. background-size: 60rpx 60rpx;
  343. }
  344. .btn {
  345. width: 80rpx;
  346. height: 80rpx;
  347. background: #666;
  348. z-index: 9999;
  349. position: absolute;
  350. right: 60rpx;
  351. opacity: 0;
  352. &.btn1 {
  353. top: 175rpx;
  354. }
  355. &.btn2 {
  356. top: 350rpx;
  357. }
  358. }
  359. image {
  360. width: 560rpx;
  361. }
  362. }
  363. &.cover {
  364. z-index: 999999;
  365. background: rgba(0, 0, 0, 0.4);
  366. }
  367. }
  368. </style>