|
|
@@ -1,166 +1,128 @@
|
|
|
<template>
|
|
|
- <view class="page">
|
|
|
- <view class="img-box">
|
|
|
- <!-- <image :src="avatar" class="img" mode="aspectFill"></image> -->
|
|
|
- <u-avatar :src="avatar" size="55" class="img" />
|
|
|
- <view class="img-text">
|
|
|
- <view class="name">{{ nickname }}</view>
|
|
|
- <view class="address">{{ location.address }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="qrcode-box">
|
|
|
- <view class="qrcode">
|
|
|
- <uQrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake"
|
|
|
- @complete="complete($event)">
|
|
|
- </uQrcode>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="scan-text">扫描上方二维码，加入我的团队</view>
|
|
|
-
|
|
|
- <tabbar currentTab="promotionCode" />
|
|
|
- </view>
|
|
|
+ <view class="client-promotionCode">
|
|
|
+ <page-navbar :hasBack="false" bgColor="transparent" title="推广"></page-navbar>
|
|
|
+ <base-card marginBottom="48rpx">
|
|
|
+ <view class="promotionCode-qrcode">
|
|
|
+ <view class="promotionCode-avatar">
|
|
|
+ <u-avatar :src="avatar" size="90" />
|
|
|
+ </view>
|
|
|
+ <view class="u-m-t-70 text-center">
|
|
|
+ <view class="f-s-28 text-primary">{{ nickname }}</view>
|
|
|
+ <view class="f-s-24 text-999 u-m-t-8">{{ location.address }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="u-m-t-40">
|
|
|
+ <uQrcode ref="qr" canvas-id="qr" :value="text" :options="options"> </uQrcode>
|
|
|
+ </view>
|
|
|
+ <view class="f-s-24 text-999 u-m-t-10">扫描上方二维码，加入我的团队</view>
|
|
|
+ </view>
|
|
|
+ </base-card>
|
|
|
+ <base-card padding="0rpx">
|
|
|
+ <view class="fl-flex-item promotionCode-share">
|
|
|
+ <view class="direction" @click="handleShare">
|
|
|
+ <u--image
|
|
|
+ src="/static/pages/promotionCode/weixin.png"
|
|
|
+ width="48rpx"
|
|
|
+ height="48rpx"
|
|
|
+ ></u--image>
|
|
|
+ <view class="f-s-28 text-primary u-m-t-16">分享到微信</view>
|
|
|
+ </view>
|
|
|
+ <view class="promotionCode-line"></view>
|
|
|
+ <view class="direction" @click="handleSave">
|
|
|
+ <u--image
|
|
|
+ src="/static/pages/promotionCode/phone.png"
|
|
|
+ width="48rpx"
|
|
|
+ height="48rpx"
|
|
|
+ ></u--image>
|
|
|
+ <view class="f-s-28 text-primary u-m-t-16">分享到微信</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </base-card>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
|
|
|
- import {
|
|
|
- mapGetters
|
|
|
- } from 'vuex';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- text: `https://test.chelvc.com/static/${this.userId}`,
|
|
|
- size: 200,
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- uQrcode,
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['location', 'avatar', 'nickname', "userId"]),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- kplete(e) {
|
|
|
- if (e.success) {
|
|
|
- console.log('生成成功');
|
|
|
- } else {
|
|
|
- console.log('生成失败');
|
|
|
- }
|
|
|
- },
|
|
|
- remake() {
|
|
|
- // const ref = this.$refs['qr'];
|
|
|
- // ref.remake();
|
|
|
- },
|
|
|
- save() {
|
|
|
- uni.showLoading({
|
|
|
- title: '保存中',
|
|
|
- mask: true,
|
|
|
- });
|
|
|
- const ref = this.$refs['qr'];
|
|
|
- ref.save({
|
|
|
- success: res => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon: 'success',
|
|
|
- title: '保存成功',
|
|
|
- });
|
|
|
- },
|
|
|
- fail: err => {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: JSON.stringify(err),
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
+import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: `https://test.chelvc.com/static/${this.userId}`,
|
|
|
+ options: {
|
|
|
+ size: 142,
|
|
|
+ margin: 10,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ uQrcode,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['location', 'avatar', 'nickname', 'userId']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleShare() {
|
|
|
+ this.$u.toast('该功能暂未开发，尽情期待！');
|
|
|
+ },
|
|
|
+ handleSave() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '保存中',
|
|
|
+ mask: true,
|
|
|
+ foregroundImageSrc: this.avatar,
|
|
|
+ });
|
|
|
+ const ref = this.$refs['qr'];
|
|
|
+ ref.save({
|
|
|
+ success: res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'success',
|
|
|
+ title: '保存成功',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: err => {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: JSON.stringify(err),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .page {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: #fff;
|
|
|
- z-index: -1;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .img-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 280rpx auto 0;
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- width: 90%;
|
|
|
- background: linear-gradient(to right, #f3904f, #3b4371);
|
|
|
- padding-left: 40rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-left: 12%;
|
|
|
- margin-right: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .img-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 37rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-content: space-evenly;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .address {
|
|
|
- // color: #B5B5B5;
|
|
|
- color: #fff;
|
|
|
- margin-top: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .qrcode-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 0 30px;
|
|
|
- margin-top: 100rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .scan-text {
|
|
|
- text-align: center;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #b7b7b7;
|
|
|
- margin-top: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .qrcode {
|
|
|
- padding: 16px;
|
|
|
- background-color: #ffffff;
|
|
|
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 2px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .msg {
|
|
|
- margin-top: 15px;
|
|
|
- font-size: 14px;
|
|
|
- color: #9a9b9c;
|
|
|
- }
|
|
|
-
|
|
|
- .save {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
+.client-promotionCode {
|
|
|
+ height: 100vh;
|
|
|
+ padding: 144rpx 48rpx 0 48rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: linear-gradient(#e9f4ff, #dee6ff);
|
|
|
+ .promotionCode-qrcode {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .promotionCode-avatar {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: -120rpx;
|
|
|
+ transform: translate(-50%);
|
|
|
+ background-color: #fff;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .promotionCode-share {
|
|
|
+ padding: 32rpx 96rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promotionCode-line {
|
|
|
+ height: 96rpx;
|
|
|
+ width: 1rpx;
|
|
|
+ background-color: #d8d8d8;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
