# v-card

**Repository Path**: wazan/v-card

## Basic Information

- **Project Name**: v-card
- **Description**: 基于vue开发的翻牌活动总结
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-02-01
- **Last Updated**: 2023-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 目录
* [活动地址](#活动地址)
* [活动配置](#活动配置)
* [开发结构](#开发结构)
* [基本功能](#基本功能)
* [本地调试准备](#本地调试准备)
* [功能实现](#功能实现)

## [活动地址](#活动地址)
* [正式地址已下线:https://www1.pcauto.com.cn/zt/gz20210120/byd/zfb/index.html](https://www1.pcauto.com.cn/zt/gz20210120/byd/zfb/index.html)
* [fastmock模拟接口可看:https://www1.pcauto.com.cn/test/wtest/2021/vcard1/index.html](https://www1.pcauto.com.cn/test/wtest/2021/vcard1/index.html)

## [活动配置](#活动配置)
* src/assets/images        图片放置
* src/assets/js/tool.js    常用方法库 
* src/assets/js/config.js  活动区别配置

## [开发结构](#开发结构)
* home.vue
* sult.vue(子组件card.vue(子组件lottery.vue))
* share.vue

## [基本功能](#基本功能)
### 首页home
* [定位控制](#定位控制)
* [规则弹窗swiper插件滚动](#规则弹窗swiper插件滚动)
### 抽奖页sult
* [翻卡牌](#翻卡牌)
* [抽奖进度条](#抽奖进度条)
* [领券](#领券)
* [携带id跳转分享页](#携带id跳转分享页)
* [支付宝app右上角携带id分享](#支付宝app右上角携带id分享)
### 分享页
* [生成截图](#生成截图)



## [本地调试准备](#本地调试准备)
为了方便在本地开发调试，可以叫后端提供多一个授权跳转的配置，
* 我们配置自己本机ip下项目的运行sult页的链接如：`http://192.168.20.246:5000/#/sult`,  
![debug](https://www1.pcauto.com.cn/test/2021wtest/git/v-card/debug.png)
* 授权链接处加上参数type (不加或者0:跳到线上sult, 1:跳到ip地址的sult)
```
  loginUrl = `https://pangku.com/alilogin?atid=${this.$CONF.atid}&callback=`,
  parms = `shareId=${shareId}&type=1`,
  callback =
    `${loginUrl}` +
    encodeURIComponent(`${this.$CONF.baseUrl}ali/oauthAli_callback.jsp?${parms}`),
  url = `${loginUrl}${callback}`;
  location.href = url;
```
这样就可以连接oa-wifi进行手机测试。同时在qa测试阶段，也能方便我们修复bug，不影响qa线上的测试，完了再一并更新到线上
* ip调试后端给的接口要加上`ischeck=false`才能使用


## [功能实现](#功能实现)
### [定位控制](#定位控制)
基于location插件封装了实现定位控制方法，在`config.js`配置即可  
* 要限制  
1.areaArea数组填写需要的省市(名称的'省'、'市'字眼都去掉)   
2.如果lottery.jsp需要传省市，lotteryArea:true,sult页将走定位并记录省市    
* 不限制  
1.areaArr:[]    
2.lottery:false    
![location](https://www1.pcauto.com.cn/test/2021wtest/git/v-card/location.png)


### [规则弹窗swiper插件滚动](#规则弹窗swiper插件滚动)
一开始`v-show:false`了规则弹框，但是却在mounted执行了new Swiper(),当`v-show:true`,滚动条将不能正常滚动，  
需要加上
```
observer: true, 
observeParents: true, 
```
这两个属性值  

### [翻卡牌](#翻卡牌)
这里翻卡牌拆分成组件Card，当然不拆分将省去以下组件间通信麻烦  
  
**bug**：这里sult.vue的`:cardIdx="cids"`prop的形式传递给子组件Card已领过的卡牌的下标数组(类似领券)，但是发现就算翻过卡牌之后Card获取到的仍为空数组[],  
    
**原因**：父组件通过Promise等其他异步方式获取异步数据，在尚未等到数据返回时，子组件 created或mounted已经执行完毕，故此时子组件中的数据为父组件上次的数据。[详细](https://juejin.cn/post/6917175880154349575);  

**解决**：给Card组件加`v-if="false`控制当接口获取到值时，再加载子组件，再执行子组件的updatedCard更新卡牌数据。  


### [抽奖进度条](#抽奖进度条)
![load](https://www1.pcauto.com.cn/test/2021wtest/git/v-card/load.png)    
结合css的setProperty方法控制
```
transform: translateX(var(--load));
```
并watch监听used(已翻牌的次数)响应进度条的变化  

### [领券](#领券)
在config.js里配置页面的券的数组对象untickets，多张券多个对象  
```
untickets: [{ 'id': '30268', 'isgot': false }];
```
每次进来将从getUserInfo获取
```
this.ontickets = data.ticketIds;
```
再来更新`untickets`对象，实现券的领取状态


### [携带id跳转分享页](携带id跳转分享页)
sult.vue获取用户id 
```
this.$router.push({ path: `/share/${this.$parent.id}` })
```
通过src/router/index.js 设置的
```
path: '/share/:id',
```
携带路由参数,share.vue 通过
```this.$route.params.id```
获取


### [支付宝app右上角携带id分享](#支付宝app右上角携带id分享)
使用`MetaInfo`插件可携带需要的参数使在sult页和share页分享出去的链接携带可变的参数
```
  metaInfo() {
    return {
      meta: [
        {
          name: "Alipay:link",
          content: `https://www1.pcauto.com.cn/zt/gz20210120/byd/zfb/index.html?shareId=${this.id}`,
        },
      ],
    };
  },
```

### [生成截图](#生成截图)
如果是本地ip的情况下调试share.vue的话，  
压缩图片的  
`//upc.pcauto.com.cn/upload_quick_base64.jsp?referer=http://play10.pcauto.com.cn/`  
接口会有跨域的情况， 
 vue.config.js配置了proxy代理,本地可用