model.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796
  1. <template>
  2. <view class="content mone" v-if="baseURL">
  3. <model :modelId='mtype' :templateData='templateData' :isShare='isShare' :isLook='isLook'></model>
  4. <view class="bottom_padding" v-if="type!=1">
  5. </view>
  6. <view class="fxmp flex bottom" v-if="type==2">
  7. <button class="share" type="default" open-type="share">
  8. 分享名片
  9. </button>
  10. </view>
  11. <view class="fxmp flex bottom" v-if="type==3">
  12. <button class="share" type="default" open-type="share">
  13. 分享名片
  14. </button>
  15. <view class="nav-model " @click="navto('/pages/user/model/modelrz?type=1&modelid=' + mtype)">
  16. 修改名片
  17. </view>
  18. </view>
  19. <block v-if="type==0">
  20. <view class="ljrz bottom" v-if="userInfo.work_type_id <=0"
  21. @click="navto('/pages/user/model/modelrz?modelid=' + mtype + '&type=2')">
  22. 生成我的名片
  23. </view>
  24. <view v-else class="create-model flex bottom">
  25. <view class="price-show">
  26. 模板费用:<text>{{modelInfo.price*1}}</text>
  27. </view>
  28. <view class="to-show" @click="preview">
  29. 模板预览
  30. </view>
  31. <view class="by-now" @click="gobuy">
  32. 购买使用
  33. </view>
  34. </view>
  35. </block>
  36. <view class="yl bottom" v-if="previewShow" @click="outPreview">
  37. 结束预览
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. import {
  43. mapState,
  44. mapMutations
  45. } from 'vuex';
  46. import {
  47. getUserCardInfo,
  48. getCommonUserCardInfo,
  49. getShowTemplateItem,
  50. subShowTemplateOrder
  51. } from '@/api/model.js'
  52. import {
  53. getUser
  54. } from '@/api/user.js';
  55. import model from '@/pages/modelData/index.vue';
  56. export default {
  57. components: {
  58. model
  59. },
  60. data() {
  61. return {
  62. mtype: 1, //modelid
  63. shareId: '', //保存分享uid
  64. // 默认显示数据
  65. cardInfo: {
  66. name: '佚名',
  67. avatar: 'https://api.myjie.cn/resource/icon/base/f.png',
  68. age: '41',
  69. twelve: '鼠',
  70. work_year: '10',
  71. constellation: '处女座',
  72. ancestral_place: '浙江',
  73. minority: '汉族',
  74. education: '本科',
  75. service_area_all: ['浙江省台州市路桥区'],
  76. service_min_price: 100,
  77. service_max_price: 200,
  78. service_time_type_title: '每小时',
  79. service_intro_content: '高级育婴师证|高级催乳师证|早产儿护理师母婴护理证|金牌月嫂证|产后恢复师证|公共营养师证|月子药膳调理师证|国际宝宝睡眠咨询师证|普通话二级甲等|中央广播电视大学学历|学前教育专业,深耕幼教十年,技能全面,性格活泼,有亲和力,做事干净利落,有很强的责任心。对宝宝有爱心,体贴新手妈妈。专业技能熟练。应急能力强。让家人放心、产妇舒心的坐好月子。',
  80. service_intro_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
  81. 'https://api.myjie.cn/resource/icon/base/pj2.png',
  82. 'https://api.myjie.cn/resource/icon/base/pj3.png',
  83. 'https://api.myjie.cn/resource/icon/base/pj4.png'
  84. ],
  85. service_audit_imgs: ['https://api.myjie.cn/resource/icon/base/zs1.png',
  86. 'https://api.myjie.cn/resource/icon/base/zs2.png',
  87. 'https://api.myjie.cn/resource/icon/base/zs3.png',
  88. 'https://api.myjie.cn/resource/icon/base/zs4.png'
  89. ],
  90. service_project_ar: [{
  91. title: '婴幼儿睡眠管理',
  92. content: '如:日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题,帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰,培养良好的生活、学习习惯。'
  93. }, {
  94. title: '特色月子餐',
  95. content: '套用客户的一句话“养眼、养心更养胃”!家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
  96. },
  97. {
  98. title: '早产儿特殊护理',
  99. content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能,根据宝宝具体情况给予早产儿家长的科学入户指导。'
  100. },
  101. {
  102. title: '0-6岁早期教育',
  103. content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育,针对不同年龄段的孩子,开发婴幼儿潜能的教育,为孩子多元化和健康人格打下良好基础。'
  104. }
  105. ],
  106. is_type_audit: 1
  107. },
  108. userTemplate: {}, //用户展示数据
  109. templateData: {}, //模板查看数据
  110. modelInfo: {}, //当前模板信息
  111. payType: 'wxpay',
  112. type: 0, //0为商品页面进入1为个人中心进入修改预览2为分享查看预览,3为已购模板进入查看分享
  113. isShare: false, //是否显示分享按钮
  114. isLook: 0, //1为平台浏览量2为用户浏览量0为不显示
  115. previewShow: false, //是否显示预览
  116. }
  117. },
  118. onLoad(opt) {
  119. // #ifndef MP
  120. if (opt.spread) {
  121. // 存储其他邀请人
  122. uni.setStorageSync('spread', opt.spread);
  123. }
  124. // #endif
  125. // #ifdef MP
  126. if (opt.scene) {
  127. // 存储小程序邀请人
  128. uni.setStorage({
  129. key: 'spread_code',
  130. data: opt.scene
  131. });
  132. }
  133. uni.hideShareMenu();
  134. // #endif
  135. // 获取模板id
  136. this.mtype = opt.mtype
  137. // 获取查看类型
  138. this.type = +opt.type
  139. // 是否首页进入
  140. if (this.type === 0) {
  141. this.templateData = this.cardInfo;
  142. this.isLook = 1;
  143. this.getShowTemplateItem();
  144. this.getCommonUserCardInfo(this.userInfo.uid);
  145. return
  146. }
  147. //个人中心提交数据预览
  148. if (this.type === 1) {
  149. this.templateData = uni.getStorageSync('modeldata');
  150. return
  151. }
  152. //分享预览
  153. if (this.type === 2) {
  154. console.log(opt.type,'opt.type');
  155. this.isLook = 2;
  156. this.getCommonUserCardInfo(opt.uid);
  157. return
  158. }
  159. //我的模板页进入预览
  160. if (this.type === 3) {
  161. console.log(opt.type,'opt.type');
  162. this.isShare = true;
  163. this.isLook = 2;
  164. this.shareId = this.userInfo.uid;
  165. this.getCommonUserCardInfo(this.userInfo.uid);
  166. return
  167. }
  168. // if(opt.look && opt.look == 2) {
  169. // this.islook = opt.look
  170. // this.cardInfo = uni.getStorageSync('modeldata')
  171. // this.is_yl = true
  172. // }else {
  173. // if (opt.look && opt.look == 1) {
  174. // uni.showShareMenu();
  175. // this.look = false
  176. // }
  177. // if (opt.uid) {
  178. // this.shareId = opt.uid
  179. // this.getCommonUserCardInfo(opt.uid)
  180. // } else {
  181. // this.getShowTemplateItem()
  182. // }
  183. // }
  184. },
  185. computed: {
  186. ...mapState(['baseURL']),
  187. ...mapState('user', ['userInfo']),
  188. },
  189. onShow() {
  190. // this.getUser()
  191. },
  192. // #ifdef MP
  193. onShareAppMessage(options) {
  194. // 设置菜单中的转发按钮触发转发事件时的转发内容
  195. let pages = getCurrentPages(); //获取加载的页面
  196. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  197. let url = currentPage.route; //当前页面url
  198. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  199. let shareObj = {}
  200. shareObj = {
  201. title: this.templateData.name + '母婴界数字名片', // 默认是小程序的名称(可以写slogan等)
  202. path: url + '?uid=' + this.shareId + '&mtype=' + this.mtype + '&type=2', // 默认是当前页面,必须是以‘/’开头的完整路径
  203. imageUrl: '',
  204. success: function(res) {
  205. // 转发成功之后的回调
  206. if (res.errMsg == 'shareAppMessage:ok') {}
  207. },
  208. fail: function() {
  209. // 转发失败之后的回调
  210. if (res.errMsg == 'shareAppMessage:fail cancel') {
  211. // 用户取消转发
  212. } else if (res.errMsg == 'shareAppMessage:fail') {
  213. // 转发失败,其中 detail message 为详细失败信息
  214. }
  215. }
  216. };
  217. console.log(shareObj)
  218. return shareObj;
  219. },
  220. // #endif
  221. onUnload() {
  222. let pages = getCurrentPages(); //获取加载的页面
  223. let currentPage = pages[pages.length - 2]; //获取当前页面的对象
  224. // console.log(currentPage.route)
  225. if (currentPage.route == 'pages/public/wxLogin') {
  226. uni.switchTab({
  227. url: '/pages/index/index'
  228. })
  229. }
  230. },
  231. methods: {
  232. ...mapMutations('user', ['setUserInfo']),
  233. // 模板预览
  234. preview() {
  235. this.templateData = this.userTemplate;
  236. this.previewShow = true;
  237. // 隐藏浏览数量
  238. this.isLook = 0;
  239. },
  240. // 结束预览
  241. outPreview() {
  242. this.templateData = this.cardInfo;
  243. this.previewShow = false;
  244. if (this.type == 0) {
  245. this.isLook = 1;
  246. return
  247. }
  248. if (this.type == 3) {
  249. this.isLook = 2;
  250. return
  251. }
  252. },
  253. // 监听web视图反馈
  254. changeDate(base) {
  255. console.log(base, 'mss');
  256. },
  257. navto(url) {
  258. uni.navigateTo({
  259. url
  260. })
  261. },
  262. getUser() {
  263. const that = this;
  264. getUser({}).then((e) => {
  265. that.setUserInfo(e.data)
  266. if (e.data.work_type_id > 0 && that.shareId == '') {
  267. that.getUserCardInfo()
  268. } else {
  269. that.cardInfo = {}
  270. }
  271. }).catch((e) => {})
  272. },
  273. gobuy() {
  274. let that = this
  275. subShowTemplateOrder({
  276. id: that.mtype,
  277. pay_type: that.payType
  278. }).then(res => {
  279. if (res.data.status == 1) {
  280. uni.showModal({
  281. title: '提示',
  282. content: '支付成功!',
  283. cancelText: '关闭',
  284. confirmText: '查看模板',
  285. success: res => {
  286. if (res.confirm) {
  287. uni.reLaunch({
  288. url: '/pages/user/model/model?mtype=' +
  289. that.mtype,
  290. });
  291. }
  292. },
  293. fail: () => {},
  294. complete: () => {}
  295. });
  296. } else {
  297. let da = res.data.jsApiParameters;
  298. let data = {
  299. appId: da.appId,
  300. // #ifdef H5
  301. timestamp: da.timeStamp,
  302. // #endif
  303. // #ifdef MP
  304. timeStamp: da.timeStamp + '',
  305. // #endif
  306. nonceStr: da.nonceStr,
  307. package: da.package,
  308. signType: da.signType,
  309. paySign: da.paySign,
  310. success: function(res) {
  311. // obj.paySuccessTo();
  312. // alert('支付成功')
  313. uni.showModal({
  314. title: '提示',
  315. content: '支付成功!',
  316. cancelText: '关闭',
  317. confirmText: '查看模板',
  318. success: res => {
  319. if (res.confirm) {
  320. uni.reLaunch({
  321. url: '/pages/user/model/model?mtype=' +
  322. that.mtype,
  323. });
  324. }
  325. },
  326. fail: () => {},
  327. complete: () => {}
  328. });
  329. console.log('支付成功')
  330. },
  331. fail: (err) => {
  332. console.log(err)
  333. // alert('支付失败')
  334. // uni.navigateTo({
  335. // url: '/pages/order/order?state=0'
  336. // });
  337. }
  338. };
  339. console.log(data, 'timeStamp')
  340. if (that.payType == 'wxpay') {
  341. console.log('到这里')
  342. wx.requestPayment(data)
  343. }
  344. }
  345. })
  346. },
  347. // 获取模板详情
  348. getShowTemplateItem() {
  349. let that = this
  350. getShowTemplateItem({
  351. id: that.mtype
  352. }).then(res => {
  353. that.modelInfo = res.data;
  354. if (that.type == 0) {
  355. that.cardInfo.look_count = res.data.look_count
  356. }
  357. })
  358. },
  359. // 加载用户模板数据
  360. getCommonUserCardInfo(uid) {
  361. let that = this
  362. getCommonUserCardInfo({
  363. uid: uid
  364. }).then(res => {
  365. let arr = []
  366. let basearr = res.data.service_area_all
  367. basearr.forEach(item => {
  368. arr.push(item[0].name + item[1].name + item[2].name)
  369. })
  370. res.data.service_area_all = arr
  371. // 保存用户模板数据
  372. that.userTemplate = res.data
  373. if (that.type == 3||that.type == 2) {
  374. that.templateData = res.data
  375. }
  376. })
  377. },
  378. getUserCardInfo() {
  379. let that = this
  380. getUserCardInfo().then(res => {
  381. console.log(res)
  382. let arr = []
  383. let basearr = res.data.service_area_all
  384. basearr.forEach(item => {
  385. arr.push(item[0].name + item[1].name + item[2].name)
  386. })
  387. res.data.service_area_all = arr
  388. that.cardInfo = res.data
  389. })
  390. }
  391. }
  392. }
  393. </script>
  394. <style lang="scss" scoped>
  395. .bottom_padding {
  396. height: 45px;
  397. width: 100%;
  398. }
  399. .m-card {
  400. width: 640rpx;
  401. background: #fcf4f1;
  402. border-radius: 20rpx;
  403. position: relative;
  404. // min-height: 270rpx;
  405. margin: 0 auto 46rpx;
  406. .card-tit {
  407. width: 219rpx;
  408. height: 57rpx;
  409. background: #F46C85;
  410. border-radius: 20rpx 28rpx 29rpx 0rpx;
  411. justify-content: flex-start;
  412. align-items: center;
  413. padding: 0 20rpx;
  414. font-size: 32rpx;
  415. font-weight: bold;
  416. color: #FFFFFF;
  417. .tit-logo {
  418. width: 32rpx;
  419. height: 32rpx;
  420. margin-right: 18rpx;
  421. }
  422. }
  423. .card-bg {
  424. width: 100%;
  425. height: 270rpx;
  426. position: absolute;
  427. bottom: 0rpx;
  428. }
  429. .card-content {
  430. padding: 25rpx 35rpx;
  431. font-size: 26rpx;
  432. font-weight: 500;
  433. color: #2C2E35;
  434. position: relative;
  435. }
  436. .img-list {
  437. justify-content: space-between;
  438. flex-wrap: wrap;
  439. margin: auto;
  440. padding: 30rpx 30rpx 0;
  441. position: relative;
  442. image {
  443. width: 270rpx;
  444. height: 270rpx;
  445. background-color: #fff;
  446. margin-bottom: 30rpx;
  447. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.6);
  448. }
  449. }
  450. .fw {
  451. font-size: 26rpx;
  452. font-weight: 500;
  453. color: #2C2E35;
  454. padding: 10rpx 0;
  455. .fw-tit {
  456. color: #F46C85;
  457. display: flex;
  458. align-items: center;
  459. .yg {
  460. background-color: #F46C85;
  461. display: inline-block;
  462. width: 10rpx;
  463. height: 10rpx;
  464. border-radius: 50%;
  465. margin-right: 10rpx;
  466. }
  467. }
  468. .fw-content {
  469. padding-top: 10rpx;
  470. padding-left: 18rpx;
  471. text-align: justify;
  472. }
  473. }
  474. .user-info {
  475. flex-wrap: wrap;
  476. font-size: 26rpx;
  477. font-weight: 500;
  478. color: #000000;
  479. position: relative;
  480. .info-item-b,
  481. .info-item-q {
  482. padding: 10rpx 0;
  483. color: #000000;
  484. position: relative;
  485. padding-left: 20rpx;
  486. &::before {
  487. display: inline-block;
  488. content: '';
  489. width: 10rpx;
  490. height: 10rpx;
  491. border-radius: 50%;
  492. background-color: #F46C85;
  493. position: absolute;
  494. top: 22rpx;
  495. left: 0;
  496. }
  497. .qianger {
  498. width: 2em;
  499. display: inline-block;
  500. }
  501. .laner {
  502. width: 0.5em;
  503. display: inline-block;
  504. }
  505. }
  506. .info-item-b {
  507. width: 50%;
  508. }
  509. .info-item-q {
  510. width: 100%;
  511. display: flex;
  512. align-items: flex-start;
  513. justify-content: start;
  514. .fwdz {
  515. flex-direction: column;
  516. align-items: flex-start;
  517. }
  518. .gzt {
  519. width: 312rpx;
  520. height: 24rpx;
  521. padding-top: 10rpx;
  522. position: relative;
  523. image {
  524. width: 312rpx;
  525. height: 24rpx;
  526. position: relative;
  527. }
  528. .gzt-price,
  529. .gzt-price-b {
  530. width: 200rpx;
  531. text-align: center;
  532. position: absolute;
  533. padding-top: 20rpx;
  534. &::after {
  535. content: '';
  536. width: 0px;
  537. height: 0rpx;
  538. // background: #FEB8C6;
  539. border: 14rpx solid;
  540. border-color: transparent transparent #FEB8C6;
  541. // border-top:transparent;
  542. // border-left: transparent;
  543. // border-right: transparent;
  544. position: absolute;
  545. top: -14rpx;
  546. left: 0;
  547. right: 0;
  548. margin: auto;
  549. }
  550. text {
  551. color: #F46C85;
  552. }
  553. }
  554. .gzt-price {
  555. left: -100rpx;
  556. }
  557. .gzt-price-b {
  558. right: -100rpx;
  559. }
  560. }
  561. .rz {
  562. margin-top: 10rpx;
  563. margin-left: 10rpx;
  564. width: 87rpx;
  565. height: 26rpx;
  566. }
  567. }
  568. }
  569. }
  570. .m-btm {
  571. width: 660rpx;
  572. height: 384rpx;
  573. }
  574. .hua2 {
  575. position: relative;
  576. &::before {
  577. content: '';
  578. width: 199rpx;
  579. height: 298rpx;
  580. background: url($base-url + '/resource/icon/model1/hua2.png') no-repeat;
  581. position: absolute;
  582. bottom: -100rpx;
  583. right: 0;
  584. background-size: 100% 100%;
  585. }
  586. }
  587. .hua3 {
  588. position: relative;
  589. &::before {
  590. content: '';
  591. width: 192rpx;
  592. height: 223rpx;
  593. background: url($base-url + '/resource/icon/model1/hua3.png') no-repeat;
  594. position: absolute;
  595. top: 0;
  596. bottom: 0;
  597. left: 0;
  598. margin: auto;
  599. background-size: 100% 100%;
  600. }
  601. }
  602. .hua4 {
  603. position: relative;
  604. &::before {
  605. content: '';
  606. width: 128rpx;
  607. height: 145rpx;
  608. background: url($base-url + '/resource/icon/model1/hua4.png') no-repeat;
  609. position: absolute;
  610. bottom: -70rpx;
  611. right: 0;
  612. background-size: 100% 100%;
  613. }
  614. }
  615. .hua5 {
  616. position: relative;
  617. &::before {
  618. content: '';
  619. width: 199rpx;
  620. height: 298rpx;
  621. background: url($base-url + '/resource/icon/model1/hua2.png') no-repeat;
  622. position: absolute;
  623. bottom: -100rpx;
  624. left: 0;
  625. background-size: 100% 100%;
  626. transform: rotateY(180deg);
  627. }
  628. }
  629. .hua6 {
  630. position: relative;
  631. &::before {
  632. content: '';
  633. width: 192rpx;
  634. height: 223rpx;
  635. background: url($base-url + '/resource/icon/model1/hua3.png') no-repeat;
  636. position: absolute;
  637. bottom: -110rpx;
  638. right: 0;
  639. background-size: 100% 100%;
  640. transform: rotateY(180deg);
  641. }
  642. }
  643. .fxmp {
  644. width: 750rpx;
  645. .share {
  646. width: 50%;
  647. padding: 0;
  648. border-radius: 0;
  649. flex-grow: 1;
  650. &::after {
  651. border: none;
  652. }
  653. }
  654. .nav-model {
  655. background-color: #FFF;
  656. color: $base-color;
  657. width: 50%;
  658. }
  659. }
  660. .fxmp {
  661. position: fixed;
  662. width: 750rpx;
  663. bottom: 0;
  664. padding: 0;
  665. background: #f65486;
  666. // border-radius: 5rpx;
  667. font-size: 30rpx;
  668. font-weight: 500;
  669. color: #FFFFFF;
  670. text-align: center;
  671. }
  672. .create-model {
  673. position: fixed;
  674. width: 750rpx;
  675. bottom: 0;
  676. // border-radius: 5rpx;
  677. font-size: 32rpx;
  678. font-weight: 500;
  679. text-align: center;
  680. .price-show {
  681. font-size: 32rpx;
  682. font-weight: 500;
  683. color: #333333;
  684. background-color: #fff;
  685. flex-grow: 1;
  686. text {
  687. font-size: 48rpx;
  688. font-weight: 500;
  689. color: #FC6F6D;
  690. }
  691. }
  692. .to-show,
  693. .by-now {
  694. width: 223rpx;
  695. background: #fa98b6;
  696. flex-shrink: 0;
  697. font-size: 34rpx;
  698. color: #fff;
  699. }
  700. .by-now {
  701. background: #f65486;
  702. }
  703. }
  704. .yl {
  705. position: fixed;
  706. bottom: 0;
  707. width: 750rpx;
  708. font-size: 32rpx;
  709. font-weight: 500;
  710. text-align: center;
  711. color: #fff;
  712. text-align: center;
  713. font-size: 34rpx;
  714. background-color: #f65486;
  715. }
  716. .ljrz {
  717. position: fixed;
  718. width: 750rpx;
  719. bottom: 0;
  720. font-size: 32rpx;
  721. font-weight: 500;
  722. text-align: center;
  723. background-color: #f65486;
  724. color: #fff;
  725. }
  726. .bottom {
  727. line-height: 45px;
  728. height: 45px;
  729. }
  730. </style>