app-my-share.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <template>
  2. <view class="app-my-share" v-if="shareInfo.parent_id">
  3. <view class="share-info">
  4. <view class="headimg">
  5. <image :src="shareInfo.parent_headimg"></image>
  6. </view>
  7. <text class="nickname">{{shareInfo.parent_name}}为您服务</text>
  8. <view class="contact" @click="showQrCode">
  9. <image src="../../../static/image/icon/cash/icon-wechat.png"></image> 联系
  10. </view>
  11. </view>
  12. <view class="show-qrcode" v-if="showQrCodeStatus">
  13. <div class="info">
  14. <view class="close" @click="showQrCode">
  15. <image src="../../../static/image/icon/invalid.png"></image>
  16. </view>
  17. <view class="share">
  18. <view class="headimg">
  19. <image :src="shareInfo.parent_headimg"></image>
  20. </view>
  21. <view class="nickname">
  22. <view>{{shareInfo.parent_name}}</view>
  23. <view class="desc">加我微信,随时为您服务</view>
  24. </view>
  25. </view>
  26. <image class="qrcode" :src="shareInfo.parent_qr_code"></image>
  27. <view class="saoyisao">扫一扫上面的二维码图案,加我微信</view>
  28. </div>
  29. <view class="save-btn" @click="saveImg">保存二维码</view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. import {mapState, mapGetters} from 'vuex';
  35. export default {
  36. name: "app-my-share",
  37. props:{
  38. shareInfo:{
  39. type: Object,
  40. default(){
  41. return {
  42. }
  43. }
  44. }
  45. },
  46. data(){
  47. return {
  48. showQrCodeStatus: false,
  49. }
  50. },
  51. methods: {
  52. showQrCode(){
  53. console.log(this.userInfo)
  54. this.showQrCodeStatus = !this.showQrCodeStatus;
  55. },
  56. saveImg(){
  57. uni.downloadFile({
  58. url: this.shareInfo.qrcode,
  59. success: (res) =>{
  60. if (res.statusCode === 200){
  61. uni.saveImageToPhotosAlbum({
  62. filePath: res.tempFilePath,
  63. success: function() {
  64. uni.showToast({
  65. title: "保存成功",
  66. icon: "none"
  67. });
  68. },
  69. fail: function() {
  70. uni.showToast({
  71. title: "保存失败",
  72. icon: "none"
  73. });
  74. }
  75. });
  76. }
  77. }
  78. });
  79. }
  80. },
  81. onLoad(){
  82. },
  83. computed: {
  84. ...mapState('mallConfig', {
  85. setting: state => state.mall.setting
  86. }),
  87. ...mapGetters('mallConfig', {
  88. getTheme: 'getTheme',
  89. }),
  90. },
  91. }
  92. </script>
  93. <style scoped lang="scss">
  94. .app-my-share{
  95. width: 100%;
  96. height: #{100rpx};
  97. z-index: 9999999;
  98. background: #ffffff;
  99. font-size: #{26rpx};
  100. padding: 0 #{30rpx};
  101. .share-info{
  102. display: flex;
  103. align-items: center;
  104. height: 100%;
  105. .headimg{
  106. border-radius: 50%;
  107. width: #{50rpx};
  108. height: #{50rpx};
  109. overflow: hidden;
  110. margin-right: #{10rpx};
  111. image{
  112. width: 100%;
  113. height: 100%;
  114. }
  115. }
  116. .contact{
  117. border: #{1rpx} solid #ccc;
  118. border-radius: #{20rpx};
  119. padding: #{5rpx} #{15rpx};
  120. display: flex;
  121. align-items: center;
  122. margin-left: #{10rpx};
  123. image{
  124. width: #{30rpx};
  125. height: #{30rpx};
  126. margin-right: #{10rpx};
  127. }
  128. }
  129. }
  130. .show-qrcode{
  131. position: fixed;
  132. width: 100%;
  133. height: 100%;
  134. left: 0;
  135. top: 0;
  136. background: rgba(0,0,0,.3);
  137. padding-top: #{150rpx};
  138. display: flex;
  139. flex-direction: column;
  140. align-items: center;
  141. z-index: 999999999;
  142. image{
  143. height: 100%;
  144. width: 100%;
  145. }
  146. .info{
  147. background: #ffffff;
  148. padding: #{60rpx} #{70rpx};
  149. border-radius: #{30rpx};
  150. .close{
  151. float: right;
  152. width: #{40rpx};
  153. height: #{40rpx};
  154. position: relative;
  155. top: -30rpx;
  156. right: -30rpx;
  157. }
  158. .share{
  159. display: flex;
  160. align-items: center;
  161. margin-top: #{30rpx};
  162. .headimg{
  163. width: #{80rpx};
  164. height: #{80rpx};
  165. border-radius: 50%;
  166. overflow: hidden;
  167. }
  168. .nickname{
  169. display: flex;
  170. flex-direction: column;
  171. margin-left: #{15rpx};
  172. .desc{
  173. font-size: #{20rpx};
  174. color: #888888;
  175. }
  176. }
  177. }
  178. .qrcode{
  179. width: #{450rpx};
  180. height: #{450rpx};
  181. }
  182. .saoyisao{
  183. color: #888888;
  184. text-align: center;
  185. font-size: #{20rpx};
  186. }
  187. }
  188. .save-btn{
  189. background: #FE3666;
  190. color: #ffffff;
  191. font-size: #{28rpx};
  192. margin-top: #{40rpx};
  193. padding: #{20rpx} #{100rpx};
  194. border-radius: #{30rpx};
  195. }
  196. }
  197. }
  198. </style>