我的邀请 邀请好友

mall/src/pages/interest/invite.vue

@@ -1,289 +1,303 @@
 <template>
-	<div class="app-content">
-		<div class="invite-top-wrap">
-			<div class="invite-top-img">
-				<img :src="`${constant.imgUrl}/retail/interest/invite.png`" alt mode="widthFix" />
-			</div>
-			<div class="invite-top-price-wrap">
-				<div class="flex-end-center">
-					<span class="money-text">{{ data.asset.prize }}</span>
-				</div>
-				<div class="app-color-2">
-					<span>受邀朋友可得</span>
-					<span class="app-price" style="margin: 0 4px;">{{ data.asset.amount }}</span>
-					<span class="app-price">元优惠券</span>
-				</div>
-			</div>
-			<div class="share-btn" @click="showShare = true"></div>
-		</div>
-		<div class="list-content">
-			<div class="invite-tabs">
-				<div class="tabs-list">
-					<div class="tabs-img">
-						<img :src="`${constant.imgUrl}/retail/interest/invited.png`" alt mode="widthFix" />
-					</div>
-					<div class="tab-list-right">
-						<div class>已邀请(人)</div>
-						<div class="tabs-num">{{ data.stat.inviteNum }}</div>
-					</div>
-				</div>
-				<div class="tabs-list">
-					<div class="tabs-img">
-						<img :src="`${constant.imgUrl}/retail/interest/ordered.png`" alt mode="widthFix" />
-					</div>
-					<div class="tabs-list-right">
-						<div class>已下单(人)</div>
-						<div class="tabs-num">{{ data.stat.orderNum }}</div>
-					</div>
-				</div>
-			</div>
-			<!-- 邀请记录 -->
-			<div class="invite-list-blo">
-				<div class="invite-list-tit flex-center-between">
-					<div class="app-size-30">邀请记录</div>
-					<div class="flex-center-end app-color-3" @click="showAlert = true">
-						<span>规则说明</span>
-						<i class="iconfont iconchangjianwentixiangguanwenti2"></i>
-					</div>
-				</div>
-				<div class="invite-list-wrap">
-					<block v-if="!$util.isEmpty(list)">
-						<div class="invite-list flex-center-between" v-for="(item, index) in list" :key="index">
-							<div class="list-left flex-center-start">
-								<div class="list-img">
-									<img :src="item.userAvatar" alt mode="widthFix" />
-								</div>
-								<div class>
-									<div class="app-size-30">{{ item.userName }}</div>
-									<div class="app-color-3 invite-list-status">
-										<block v-if="item.status == 0">
-											<span>{{ item.addTime | formatTime }}</span>
-											<span>领券</span>
-										</block>
-										<block v-else-if="item.status == 1">
-											<span>{{ item.orderTime | formatTime }}</span>
-											<span>下单</span>
-											<span class="app-price">¥{{ item.amount }}</span>
-										</block>
-										<block v-else-if="item.status == 2">
-											<span>{{ item.giveTime | formatTime }}</span>
-											<span>兑奖</span>
-										</block>
-									</div>
-								</div>
-							</div>
-							<div class="app-size-26">{{ item.status | constantfilter('INVITE_STATUS') }}</div>
-						</div>
-					</block>
-					<block v-else>
-						<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
-					</block>
-					<!-- <div class="load-more flex-center-center app-color-3">加载更多...</div> -->
-				</div>
-			</div>
-		</div>
-		<!-- 弹窗 -->
-		<alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
-			<div class="alt-wrap">
-				<div class="alt-tit app-size-34">规则说明</div>
-				<div class="alt-content">
-					<div>1、邀请有礼活动老客可以获得奖励，新客可以获得超值优惠券；</div>
-					<div>2、只有本店老客户才能发起邀请；</div>
-					<div>3、只有本店新客户才能接受邀请；</div>
-					<div>4、本活动只能邀请自己的朋友，请勿滥发邀请链接，否则取消邀请权力。</div>
-				</div>
-			</div>
-		</alert-module>
-		<app-share-mask :show="showShare" @click="hideShare" />
-	</div>
+  <div class="app-content">
+    <div class="invite-top-wrap">
+      <div class="invite-top-img">
+        <img :src="`${constant.imgUrl}/retail/interest/invite.png`" alt mode="widthFix" />
+      </div>
+      <div class="invite-top-price-wrap">
+        <div class="flex-end-center">
+          <span class="money-text">{{ data.asset.prize }}</span>
+        </div>
+        <div class="app-color-2">
+          <span>受邀朋友可得</span>
+          <span class="app-price" style="margin: 0 4px;">{{ data.asset.amount }}</span>
+          <span class="app-price">元优惠券</span>
+        </div>
+      </div>
+      <!-- #ifdef H5 -->
+      <div class="share-btn" @click="showShare = true"></div>
+      <!-- #endif -->
+
+      <!-- #ifdef MP-WEIXIN -->
+      <div class="share-btn">
+        <button open-type="share" class="inner-btn"></button>
+      </div>
+      <!-- #endif -->
+    </div>
+    <div class="list-content">
+      <div class="invite-tabs">
+        <div class="tabs-list">
+          <div class="tabs-img">
+            <img :src="`${constant.imgUrl}/retail/interest/invited.png`" alt mode="widthFix" />
+          </div>
+          <div class="tab-list-right">
+            <div class>已邀请(人)</div>
+            <div class="tabs-num">{{ data.stat.inviteNum }}</div>
+          </div>
+        </div>
+        <div class="tabs-list">
+          <div class="tabs-img">
+            <img :src="`${constant.imgUrl}/retail/interest/ordered.png`" alt mode="widthFix" />
+          </div>
+          <div class="tabs-list-right">
+            <div class>已下单(人)</div>
+            <div class="tabs-num">{{ data.stat.orderNum }}</div>
+          </div>
+        </div>
+      </div>
+      <!-- 邀请记录 -->
+      <div class="invite-list-blo">
+        <div class="invite-list-tit flex-center-between">
+          <div class="app-size-30">邀请记录</div>
+          <div class="flex-center-end app-color-3" @click="showAlert = true">
+            <span>规则说明</span>
+            <i class="iconfont iconchangjianwentixiangguanwenti2"></i>
+          </div>
+        </div>
+        <div class="invite-list-wrap">
+          <block v-if="!$util.isEmpty(list)">
+            <div class="invite-list flex-center-between" v-for="(item, index) in list" :key="index">
+              <div class="list-left flex-center-start">
+                <div class="list-img">
+                  <img :src="item.userAvatar" alt mode="widthFix" />
+                </div>
+                <div class>
+                  <div class="app-size-30">{{ item.userName }}</div>
+                  <div class="app-color-3 invite-list-status">
+                    <block v-if="item.status == 0">
+                      <span>{{ item.addTime | formatTime }}</span>
+                      <span>领券</span>
+                    </block>
+                    <block v-else-if="item.status == 1">
+                      <span>{{ item.orderTime | formatTime }}</span>
+                      <span>下单</span>
+                      <span class="app-price">¥{{ item.amount }}</span>
+                    </block>
+                    <block v-else-if="item.status == 2">
+                      <span>{{ item.giveTime | formatTime }}</span>
+                      <span>兑奖</span>
+                    </block>
+                  </div>
+                </div>
+              </div>
+              <div class="app-size-26">{{ item.status | constantfilter('INVITE_STATUS') }}</div>
+            </div>
+          </block>
+          <block v-else>
+            <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+          </block>
+          <!-- <div class="load-more flex-center-center app-color-3">加载更多...</div> -->
+        </div>
+      </div>
+    </div>
+    <!-- 弹窗 -->
+    <alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
+      <div class="alt-wrap">
+        <div class="alt-tit app-size-34">规则说明</div>
+        <div class="alt-content">
+          <div>1、邀请有礼活动老客可以获得奖励，新客可以获得超值优惠券；</div>
+          <div>2、只有本店老客户才能发起邀请；</div>
+          <div>3、只有本店新客户才能接受邀请；</div>
+          <div>4、本活动只能邀请自己的朋友，请勿滥发邀请链接，否则取消邀请权力。</div>
+        </div>
+      </div>
+    </alert-module>
+    <app-share-mask :show="showShare" @click="hideShare" />
+  </div>
 </template>
 
 <script>
-	import { mapGetters } from 'vuex'
-	import AppWrapperEmpty from '@/components/app-wrapper-empty'
-	import AlertModule from '@/components/plugin/alert'
-	import AppShareMask from '@/components/module/app-share-mask'
-	import { share } from '@/mixins'
-	// api
-	import { getShopUser } from '@/utils/auth'
-	import { getList, getProfile } from '@/api/invite'
-	export default {
-		name: 'invite',
-		components: {
-			AlertModule,
-			AppShareMask,
-			AppWrapperEmpty
-		},
-		mixins: [share],
-		data() {
-			return {
-				data: {
-					constant: this.$constant,
-					stat: {},
-					asset: {}
-				},
-				list: [],
-				showAlert: false,
-				showShare: false
-			}
-		},
-		computed: {
-			...mapGetters({ shopUser: 'getShopUser' })
-		},
-		onLoad() {
-			// this.init()
-		},
-		methods: {
-			init() {
-				// #ifdef H5
-				// 微信二次分享
-				let href = window.location.href
-				if (href.indexOf('from=singlemessage') > 0) {
-					location.href = `${this.$constant.formal}/#/pages/interest/invite${this.$util.parse(this.option)}`
-					return false
-				}
-				// #endif
-
-				this._getProfile()
-				this._getList()
-
-				getShopUser().then(res => {
-					console.log('this.data', res)
+import { mapGetters } from "vuex";
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import AlertModule from "@/components/plugin/alert";
+import AppShareMask from "@/components/module/app-share-mask";
+import { share } from "@/mixins";
+// api
+import { getShopUser } from "@/utils/auth";
+import { getList, getProfile } from "@/api/invite";
+export default {
+  name: "invite",
+  components: {
+    AlertModule,
+    AppShareMask,
+    AppWrapperEmpty
+  },
+  mixins: [share],
+  data() {
+    return {
+      data: {
+        constant: this.$constant,
+        stat: {},
+        asset: {}
+      },
+      list: [],
+      showAlert: false,
+      showShare: false
+    };
+  },
+  computed: {
+    ...mapGetters({ shopUser: "getShopUser" })
+  },
+  onLoad() {
+    // this.init()
+  },
+  methods: {
+    init() {
+      // #ifdef H5
+      // 微信二次分享
+      let href = window.location.href;
+      if (href.indexOf("from=singlemessage") > 0) {
+        location.href = `${
+          this.$constant.formal
+        }/#/pages/interest/invite${this.$util.parse(this.option)}`;
+        return false;
+      }
+      // #endif
 
-					// 设置分享
-					let shareParams = {
-						title: `${res.merchantName}`, // 分享标题
-						desc: '这家店不错推荐给你', // 分享内容
-						imgUrl: res.smallAvatarUrl,
-						// #ifdef H5
-						pagePath: `${window.location.protocol}//mall.${this.$constant.firstHost}.com/#/pages/home/shop?account=${res.merchantId}&introUserId=${res.id}`,
-						// #endif
-						// #ifndef H5
-						pagePath: `/pages/home/shop?account=${res.merchantId}&introUserId=${res.id}`
-						// #endif
-					}
-					this.jweixinFn(shareParams)
+      this._getProfile();
+      this._getList();
 
-				})
-			},
-			_getProfile() {
-				getProfile().then(res => {
-					this.data = res.data
-				})
-			},
-			_getList() {
-				return getList().then(res => {
-					if (this.$util.isEmpty(res.data.list)) return false
-					this.list = res.data.list
-				})
-			},
-			hideAlert() {
-				this.showAlert = false
-			},
-			hideShare() {
-				this.showShare = false
-			}
-		}
-	}
+      getShopUser().then(res => {
+        // 设置分享
+        let shareParams = {
+          title: `${res.merchantName}`, // 分享标题
+          desc: "这家店不错推荐给你", // 分享内容
+          imgUrl: res.smallAvatarUrl,
+          // #ifdef H5
+          pagePath: `${window.location.protocol}//mall.${this.$constant.firstHost}.com/#/pages/home/shop?account=${res.merchantId}&introUserId=${res.id}`,
+          // #endif
+          // #ifndef H5
+          pagePath: `/pages/home/shop?account=${res.merchantId}&introUserId=${res.id}`
+          // #endif
+        };
+        this.jweixinFn(shareParams);
+      });
+    },
+    _getProfile() {
+      getProfile().then(res => {
+        this.data = res.data;
+      });
+    },
+    _getList() {
+      return getList().then(res => {
+        if (this.$util.isEmpty(res.data.list)) return false;
+        this.list = res.data.list;
+      });
+    },
+    hideAlert() {
+      this.showAlert = false;
+    },
+    hideShare() {
+      this.showShare = false;
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.app-content {
-		width: 100%;
-		// position: relative;
-		// 弹窗
-		/deep/.tui-alert-content {
-			padding: 40px 40px 0;
-		}
-		.alt-wrap {
-			.alt-content {
-				margin-top: 30px;
-				margin-bottom: 30px;
-				text-align: left;
-				color: $fontColor2;
-			}
-		}
-	}
-	.invite-top-wrap {
-		position: relative;
-		.invite-top-price-wrap {
-			position: absolute;
-			top: 120px;
-			left: 0;
-			right: 0;
-			text-align: center;
-			.flex-end-center {
-				margin-top: 20px;
-				margin-bottom: 40px;
-			}
-			.money-text {
-				color: $mainColor;
-				font-size: 50px;
-			}
-		}
-		.share-btn {
-			position: absolute;
-			top: 400px;
-			width: 100%;
-			height: 180px;
-		}
-	}
-	.list-content {
-		position: relative;
-		top: -100px;
-		width: 96%;
-		margin: 0 auto;
-	}
-	.invite-tabs {
-		padding: 20px 60px 24px;
-		// border-bottom: 20px solid #f5f5f5;
-		margin-bottom: 20px;
-		color: $fontColor3;
-		border-radius: 10px;
-		background-color: #fff;
-		@include disFlex(center, space-between);
-		.tabs-list {
-			@include disFlex(center, flex-end);
-		}
-		.tabs-img {
-			width: 90px;
-			margin-right: 20px;
-		}
-		.tabs-num {
-			font-size: 40px;
-			color: #ff5400;
-			margin-top: 8px;
-		}
-	}
-	.invite-list-blo {
-		padding: 20px 20px 24px;
-		border-radius: 10px;
-		background-color: #fff;
-		.invite-list-tit {
-			margin-bottom: 20px;
-			.iconfont {
-				margin-left: 10px;
-				font-size: 34px;
-			}
-		}
-		.invite-list-wrap {
-			.invite-list {
-				padding: 14px 0;
-				border-bottom: 1px solid $borderColor;
-			}
-			.list-img {
-				width: 80px;
-				margin-right: 20px;
-			}
-			.invite-list-status {
-				span {
-					margin-right: 10px;
-				}
-			}
-			// 加载更多
-			.load-more {
-				padding: 24px 0 6px;
-			}
-		}
-	}
+.app-content {
+  width: 100%;
+  /deep/.tui-alert-content {
+    padding: 40px 40px 0;
+  }
+  .alt-wrap {
+    .alt-content {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      text-align: left;
+      color: $fontColor2;
+    }
+  }
+}
+.invite-top-wrap {
+  position: relative;
+  .invite-top-price-wrap {
+    position: absolute;
+    top: 120px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    .flex-end-center {
+      margin-top: 20px;
+      margin-bottom: 40px;
+    }
+    .money-text {
+      color: $mainColor;
+      font-size: 48px;
+    }
+  }
+  .share-btn {
+    position: absolute;
+    top: 400px;
+    width: 100%;
+    height: 180px;
+    .inner-btn {
+      height: 104rpx;
+      width: 420rpx;
+      background-color: transparent;
+      margin-top: 48rpx;
+    }
+    .inner-btn::after {
+      border: none;
+    }
+  }
+}
+.list-content {
+  position: relative;
+  top: -100px;
+  width: 96%;
+  margin: 0 auto;
+}
+.invite-tabs {
+  padding: 20px 60px 24px;
+  // border-bottom: 20px solid #f5f5f5;
+  margin-bottom: 20px;
+  color: $fontColor3;
+  border-radius: 10px;
+  background-color: #fff;
+  @include disFlex(center, space-between);
+  .tabs-list {
+    @include disFlex(center, flex-end);
+  }
+  .tabs-img {
+    width: 90px;
+    margin-right: 20px;
+  }
+  .tabs-num {
+    font-size: 40px;
+    color: #ff5400;
+    margin-top: 8px;
+  }
+}
+.invite-list-blo {
+  padding: 20px 20px 24px;
+  border-radius: 10px;
+  background-color: #fff;
+  .invite-list-tit {
+    margin-bottom: 20px;
+    .iconfont {
+      margin-left: 10px;
+      font-size: 34px;
+    }
+  }
+  .invite-list-wrap {
+    .invite-list {
+      padding: 14px 0;
+      border-bottom: 1px solid $borderColor;
+    }
+    .list-img {
+      width: 80px;
+      margin-right: 20px;
+    }
+    .invite-list-status {
+      span {
+        margin-right: 10px;
+      }
+    }
+    // 加载更多
+    .load-more {
+      padding: 24px 0 6px;
+    }
+  }
+}
 </style>