mySet.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  1. <template>
  2. <view class="content">
  3. <view class="content1 flex-between relative flex">
  4. <view class="user flex">
  5. <image :src="userInfo.head" mode="widthFix" class="img"></image>
  6. <view class="name">
  7. {{userInfo.nickname}}
  8. </view>
  9. </view>
  10. <view class="position">
  11. <image @click='selectCard' src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img"></image>
  12. <image @click='selectCard1' src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="right-img"></image>
  13. </view>
  14. </view>
  15. <view class="content2">
  16. <view class="row flex flex-between" v-for="(item,index) in menuList" :key='index' @click="menuClick(item.type)">
  17. <view class="flex">
  18. <image :src="item.src" mode="widthFix" class="nav-img"></image>
  19. <button class="left-btn" v-if='item.type=="contactCustomer"' open-type='contact'>{{item.name}}</button>
  20. <span class="left" v-else>{{item.name}}</span>
  21. </view>
  22. <span class="right"><image src="../../static/imgs/mySet/yjt.png" mode="widthFix" class="row-right-img"></image></span>
  23. </view>
  24. </view>
  25. <u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
  26. <image :src="selectCode" mode="widthFix"></image>
  27. </u-popup>
  28. <u-picker keyName="cardBusiness" :confirmType='"share"' :confirmText='"分享"' title="选择名片"
  29. @cancel="show=false" closeOnClickOverlay @change="cardChange" :show="show" :columns="cardList"></u-picker>
  30. <u-picker keyName="cardBusiness" confirmText='确定' title="选择名片"
  31. @cancel="show1=false" closeOnClickOverlay @confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
  32. <poster :data="canvasData" background-color="#FFF"
  33. :width='750' :height='420'
  34. @on-success="posterSuccess" ref="poster" @on-error="posterError"></poster>
  35. </view>
  36. </template>
  37. <script>
  38. import Poster from '../../components/zhangyuhao-poster/Poster.vue'
  39. export default {
  40. components: {
  41. Poster
  42. },
  43. data() {
  44. return {
  45. userInfo: {},
  46. cardList:[],
  47. canvasData:{},
  48. currectData:{},
  49. selectCode:'',
  50. show:false,
  51. clicknum:0,
  52. popupshow:false,
  53. show1:false,
  54. isShowCode:false,
  55. menuList: [{
  56. name: "我的名片",
  57. type: 'myInfo',
  58. src:'../../static/imgs/mySet/card.png'
  59. },
  60. {
  61. name: "我的主页",
  62. type: 'myHome',
  63. src:'../../static/imgs/mySet/home.png'
  64. },
  65. {
  66. name: "名片分类",
  67. type: "cardType",
  68. src:'../../static/imgs/mySet/type.png'
  69. },
  70. {
  71. name: "我的证件",
  72. type: "myCard",
  73. src:'../../static/imgs/mySet/card1.png'
  74. },
  75. {
  76. name: "帮助说明",
  77. type: "help",
  78. src:'../../static/imgs/mySet/help.png'
  79. },
  80. {
  81. name: "联系客服",
  82. type: "contactCustomer",
  83. src:'../../static/imgs/mySet/kf.png'
  84. },
  85. {
  86. name: "设置",
  87. type: 'set',
  88. src:'../../static/imgs/mySet/set.png'
  89. },
  90. ]
  91. };
  92. },
  93. onShow() {
  94. this.userInfo = uni.getStorageSync("userInfo")
  95. console.log(this.userInfo)
  96. this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
  97. commonId: uni.getStorageSync("userInfo").id
  98. }, failres => {
  99. this.$refs.uToast.show({
  100. type: 'error',
  101. message: failres.errmsg,
  102. })
  103. uni.hideLoading()
  104. }).then(res => {
  105. this.cardList = [res.data.items]
  106. this.cardChange({value:this.cardList[[0]]})
  107. })
  108. },
  109. onShareAppMessage(res) {
  110. this.popupshow=false
  111. console.log(res,this.popupshow)
  112. let that = this;
  113. //生成名片图片
  114. let imageUrl = this.poster
  115. console.log("imageUrl", imageUrl)
  116. if (res.from === 'button') {
  117. let path = `/pages/mySet/lookCard?id=${that.currectData.id}`
  118. return {
  119. title: `${that.currectData.name}分享的名片~`,
  120. path: path,
  121. imageUrl: imageUrl,
  122. };
  123. }
  124. if (res.from === 'menu') {
  125. return {
  126. title: '商通线上商城',
  127. path: '/pages/tabBarPro/index/index',
  128. imageUrl: this.popupshow?imageUrl:''
  129. };
  130. }
  131. },
  132. // 分享到朋友圈
  133. onShareTimeline() {
  134. return {
  135. title: '商通线上商城',
  136. path: '/pages/index/index',
  137. imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
  138. };
  139. },
  140. methods: {
  141. handleHiddenShare(){
  142. this.popupshow=false
  143. },
  144. selectCard(){
  145. this.show=true
  146. },
  147. selectCard1(){
  148. this.show1=true
  149. },
  150. cardConfirm(e){
  151. console.log(e)
  152. this.currectData=e.value[0]
  153. this.selectCode=e.value[0].qrCodeMyself
  154. this.show1=false
  155. this.isShowCode=true
  156. },
  157. cardChange(e){
  158. this.currectData=e.value[0]
  159. uni.showLoading({
  160. title: '加载中',
  161. mask: true
  162. })
  163. var data = [{
  164. type: 'image',
  165. path: this.currectData.currentBackground,
  166. use:'bg',
  167. x: -10,
  168. y: 0,
  169. width: 530,
  170. height: 325
  171. },
  172. {
  173. type: 'image',
  174. path: this.currectData.headSculpture,
  175. shape: 'circle',
  176. use:'head',
  177. x: 30,
  178. y: 30,
  179. width: 100,
  180. height: 100
  181. },
  182. {
  183. type: 'text',
  184. text:this.currectData.name,
  185. use:'name',
  186. x: 150,
  187. y: 50,
  188. size:24,
  189. color:'#000'
  190. },
  191. {
  192. type: 'text',
  193. text:this.currectData.post,
  194. use:'post',
  195. x: 240,
  196. y: 55,
  197. size:18,
  198. color:'#666666'
  199. },
  200. {
  201. type: 'text',
  202. text:this.currectData.companyName,
  203. use:'companyName',
  204. x: 150,
  205. y: 95,
  206. size:18,
  207. color:'#000'
  208. },
  209. {
  210. type: 'image',
  211. path: '../../static/imgs/card/address1.png',
  212. use:'address-icon',
  213. x: 145,
  214. y: 130,
  215. width: 15,
  216. height: 20
  217. },
  218. {
  219. type: 'textarea',
  220. text:this.currectData.province+this.currectData.city+this.currectData.area+this.currectData.detailedAddress,
  221. lineSpace:1,
  222. width:320,
  223. use:'address',
  224. x: 175,
  225. y: 135,
  226. size:14,
  227. color:'#000'
  228. },
  229. {
  230. type: 'image',
  231. path: '../../static/imgs/card/phone1.png',
  232. use:'phone-icon',
  233. x: 145,
  234. y: 163,
  235. width: 16,
  236. height: 16
  237. },
  238. {
  239. type: 'text',
  240. text:this.currectData.phone,
  241. use:'phone',
  242. x: 175,
  243. y: 167,
  244. size:14,
  245. color:'#000'
  246. },
  247. {
  248. type: 'image',
  249. path: '../../static/imgs/card/remark1.png',
  250. use:'remark-icon',
  251. x: 145,
  252. y: 197,
  253. width: 13,
  254. height: 16
  255. },
  256. {
  257. type: 'textarea',
  258. text:this.currectData.remark?this.currectData.remark:'单击添加备注',
  259. use:'remark',
  260. lineSpace:2,
  261. width:200,
  262. x: 175,
  263. y: 200,
  264. size:13,
  265. color:'#000'
  266. },
  267. {
  268. type: 'image',
  269. path: '../../static/imgs/card/bg3.png',
  270. use:'bg1',
  271. x: 0,
  272. y: 243,
  273. width: 370,
  274. height: 67
  275. },
  276. {
  277. type: 'image',
  278. path: '../../static/imgs/card/bg4.png',
  279. use:'bg2',
  280. x: 355,
  281. y: 243,
  282. width: 150,
  283. height: 67
  284. },
  285. {
  286. type: 'image',
  287. path: '../../static/imgs/card/home.png',
  288. use:'home',
  289. x: 65,
  290. y: 260,
  291. width: 33,
  292. height: 33
  293. },
  294. {
  295. type: 'text',
  296. text:this.currectData.classifyName?this.currectData.classifyName:'默',
  297. use:'classify',
  298. x: 145,
  299. y: 263,
  300. size:34,
  301. color:'#fff'
  302. },
  303. {
  304. type: 'image',
  305. path: '../../static/imgs/card/share.png',
  306. use:'share',
  307. x: 235,
  308. y: 263,
  309. width: 33,
  310. height: 28
  311. },
  312. ]
  313. console.log(this.currectData.cuttentTemplate,111111)
  314. for(var i=0;i<data.length;i++){
  315. switch (this.currectData.cuttentTemplate) {
  316. case '2':
  317. if(data[i].use==='name'
  318. ||data[i].use==='companyName'
  319. ||data[i].use==='address-icon'
  320. ||data[i].use==='phone-icon'
  321. ||data[i].use==='remark-icon'){
  322. data[i].x=30
  323. }
  324. if(data[i].use==='post'){
  325. data[i].x=100
  326. }
  327. if(data[i].use==='address'
  328. ||data[i].use==='phone'
  329. ||data[i].use==='remark'){
  330. data[i].x=60
  331. }
  332. if(data[i].use=='head'){
  333. data[i].x=370
  334. }
  335. break;
  336. case '3':
  337. if(data[i].use==='name'){
  338. data[i].x=30
  339. data[i].y=150
  340. }
  341. if(data[i].use==='companyName'){
  342. data[i].x=30
  343. data[i].y=180
  344. }
  345. if(data[i].use==='post'){
  346. data[i].x=100
  347. data[i].y=153
  348. }
  349. if(data[i].use==='address-icon'
  350. ||data[i].use==='phone-icon'
  351. ||data[i].use==='remark-icon'){
  352. data[i].x=170
  353. }
  354. if(data[i].use==='address-icon'){data[i].y=150}
  355. if(data[i].use==='address'){data[i].y=155;data[i].width=300}
  356. if(data[i].use==='phone-icon'){data[i].y=180}
  357. if(data[i].use==='phone'){data[i].y=183}
  358. if(data[i].use==='remark-icon'){data[i].y=210}
  359. if(data[i].use==='remark'){data[i].y=212}
  360. if(data[i].use==='address'
  361. ||data[i].use==='phone'
  362. ||data[i].use==='remark'){
  363. data[i].x=190
  364. }
  365. break;
  366. case '4':
  367. if(data[i].use==='name'
  368. ||data[i].use==='companyName'){
  369. data[i].x=30
  370. }
  371. if(data[i].use==='companyName'){
  372. data[i].y=90
  373. }
  374. if(data[i].use==='post'){
  375. data[i].x=100
  376. }
  377. if(data[i].use=='head'){
  378. data[i].x=25
  379. data[i].y=120
  380. }
  381. if(data[i].use==='address-icon'
  382. ||data[i].use==='phone-icon'
  383. ||data[i].use==='remark-icon'){
  384. data[i].x=170
  385. }
  386. if(data[i].use==='address'){data[i].width=300}
  387. if(data[i].use==='address'
  388. ||data[i].use==='phone'
  389. ||data[i].use==='remark'){
  390. data[i].x=190
  391. }
  392. break;
  393. default:
  394. }
  395. }
  396. this.canvasData= {clicknum:this.clicknum++,list:data}
  397. },
  398. posterError(err) {
  399. console.log(err)
  400. uni.hideLoading()
  401. },
  402. posterSuccess(url) {
  403. console.log("hahahah",url)
  404. // 生成成功,会把临时路径在这里返回
  405. this.poster = url;
  406. console.log(url)
  407. // this.show=false
  408. uni.hideLoading()
  409. },
  410. menuClick(typeName) {
  411. let _url = '/pages/mySet/' + typeName
  412. console.log(_url)
  413. uni.navigateTo({
  414. url: _url
  415. })
  416. }
  417. }
  418. }
  419. </script>
  420. <style lang="scss" scoped>
  421. .content1 {
  422. background: #112253;
  423. padding: 0rpx 20rpx 160rpx 20rpx;
  424. box-sizing: border-box;
  425. border-radius: 0px 0px 20rpx 20rpx;
  426. .user {
  427. color: #fff;
  428. .name {
  429. font-weight: 700;
  430. }
  431. }
  432. .img {
  433. width: 124rpx;
  434. border-radius: 50%;
  435. margin-right: 32rpx;
  436. }
  437. .position {
  438. .right-img {
  439. width: 44rpx;
  440. margin-left: 40rpx;
  441. }
  442. }
  443. }
  444. .content2 {
  445. background: #fff;
  446. margin: 20rpx;
  447. padding:0 40rpx;
  448. position: relative;
  449. top: -100rpx;
  450. border-radius: 20rpx;
  451. .nav-img{
  452. width: 32rpx;
  453. margin-right:20rpx ;
  454. }
  455. .row{
  456. border-bottom: 1px solid #E6E6E6;
  457. padding: 35rpx 0;
  458. .row-right-img{
  459. width: 12rpx;
  460. }
  461. }
  462. .row:last-child{
  463. border: none;
  464. }
  465. .left-btn{
  466. background: #fff;
  467. padding: 0;
  468. margin: 0;
  469. font-size: 32rpx;
  470. }
  471. .left-btn:after{
  472. border: none!important;
  473. }
  474. }
  475. </style>