123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- <template>
- <view class="app-my-share" v-if="shareInfo.parent_id"
- :class="fixed?'fixed':''"
- :style="{backgroundColor: newData.background}">
- <view class="share-info">
- <view class="headimg">
- <image :src="shareInfo.parent_headimg"></image>
- </view>
- <text class="nickname" :style="{color:newData.color}">{{shareInfo.parent_name}}为您服务</text>
- <view class="contact" @click="showQrCode" :style="{borderColor:newData.color,color:newData.color}">
- <image src="../../../static/image/icon/wechat-white.png"></image> 联系
- </view>
- </view>
- <view class="show-qrcode" v-if="showQrCodeStatus">
- <div class="info">
- <view class="close" @click="showQrCode">
- <image src="../../../static/image/icon/invalid.png"></image>
- </view>
- <view class="share">
- <view class="headimg">
- <image :src="shareInfo.parent_headimg"></image>
- </view>
- <view class="nickname">
- <view>{{shareInfo.parent_name}}</view>
- <view class="desc">加我微信,随时为您服务</view>
- </view>
- </view>
- <image class="qrcode" :src="shareInfo.parent_qr_code"></image>
- <view class="saoyisao">扫一扫上面的二维码图案,加我微信</view>
- </div>
- <view class="save-btn" @click="saveImg">保存二维码</view>
- <view class="save-btn" v-if="false" @click="scan">扫一扫</view>
- </view>
- </view>
- <view class="app-my-share" v-else
- :class="fixed?'fixed':''"
- :style="{backgroundColor: newData.background}">
- <view class="share-info">
- <text class="nickname" :style="{color:newData.color}">{{mall.name}}</text>
- </view>
- </view>
- </template>
- <script>
- import {mapState, mapGetters} from 'vuex';
- export default {
- name: "app-my-share",
- props:{
- shareInfo:{
- type: Object,
- default(){
- return {
- }
- }
- },
- fixed: {
- type:Boolean,
- default(){
- return false;
- }
- },
- value: {
- type: Object,
- default: function() {
- return {
- background: `#efeff4`,
- color: '#ffffff',
- }
- }
- },
- tabBarNavs: {
- type: Object,
- default() {
- return {};
- }
- },
- mall: {
- type: Object,
- default() {
- return {};
- }
- },
- },
- data(){
- return {
- showQrCodeStatus: false,
- }
- },
- methods: {
- scan(){
- uni.scanCode({
- success: function (res) {
- console.log('条码类型:' + res);
- uni.navigateTo({
- url: '/'+res.path
- });
- }
- });
- },
- showQrCode(){
- console.log(this.homePages)
- this.showQrCodeStatus = !this.showQrCodeStatus;
- },
- saveImg(){
- uni.downloadFile({
- url: this.shareInfo.parent_qr_code,
- success: (res) =>{
- if (res.statusCode === 200){
- uni.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success: function() {
- uni.showToast({
- title: "保存成功",
- icon: "none"
- });
- },
- fail: function() {
- uni.showToast({
- title: "保存失败",
- icon: "none"
- });
- }
- });
- }
- }
- });
- },
- },
- computed: {
- ...mapState('mallConfig', {
- setting: state => state.mall.setting
- }),
- ...mapGetters('mallConfig', {
- getTheme: 'getTheme',
- }),
- newData() {
- let value = this.value;
- if(this.tabBarNavs){
- this.value.background = this.tabBarNavs.top_background_color;
- this.value.top_text_color = this.tabBarNavs.top_text_color;
- }
- return value;
- },
- },
- }
- </script>
- <style scoped lang="scss">
- .app-my-share{
- width: 100%;
- height: #{162rpx};
- z-index: 9999999;
- background: #ffffff;
- font-size: #{26rpx};
- padding: 40rpx #{30rpx} 0;
- &.fixed{
- position: fixed;
- }
- .share-info{
- display: flex;
- align-items: center;
- // height: 100%;
- margin-top: 58rpx;
- .headimg{
- border-radius: 50%;
- width: #{50rpx};
- height: #{50rpx};
- overflow: hidden;
- margin-right: #{10rpx};
- image{
- width: 100%;
- height: 100%;
- }
- }
- .contact{
- border: #{1rpx} solid #ccc;
- border-radius: #{20rpx};
- padding: #{2rpx} #{15rpx};
- display: flex;
- align-items: center;
- margin-left: #{10rpx};
- image{
- width: #{30rpx};
- height: #{30rpx};
- margin-right: #{10rpx};
- }
- }
- }
- .show-qrcode{
- position: fixed;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- background: rgba(0,0,0,.3);
- padding-top: #{150rpx};
- display: flex;
- flex-direction: column;
- align-items: center;
- z-index: 999999999;
- image{
- height: 100%;
- width: 100%;
- }
- .info{
- background: #ffffff;
- padding: #{60rpx} #{70rpx};
- border-radius: #{30rpx};
- .close{
- float: right;
- width: #{40rpx};
- height: #{40rpx};
- position: relative;
- top: -30rpx;
- right: -30rpx;
- }
- .share{
- display: flex;
- align-items: center;
- margin-top: #{30rpx};
- .headimg{
- width: #{80rpx};
- height: #{80rpx};
- border-radius: 50%;
- overflow: hidden;
- }
- .nickname{
- display: flex;
- flex-direction: column;
- margin-left: #{15rpx};
- .desc{
- font-size: #{20rpx};
- color: #888888;
- }
- }
- }
- .qrcode{
- width: #{450rpx};
- height: #{450rpx};
- }
- .saoyisao{
- color: #888888;
- text-align: center;
- font-size: #{20rpx};
- }
- }
- .save-btn{
- background: #FE3666;
- color: #ffffff;
- font-size: #{28rpx};
- margin-top: #{40rpx};
- padding: #{20rpx} #{100rpx};
- border-radius: #{30rpx};
- }
- }
- }
- </style>
|