feats

src/app.less

@@ -3,6 +3,10 @@
   height: 100vh;
 }
 
+.flex {
+  display: flex;
+}
+
 .v-flex {
   display: flex;
   flex-direction: column;

src/pages/index/components/avatar-change.vue

@@ -0,0 +1,205 @@
+<template>
+  <view class="v-flex">
+    <view class="flex-1 flex">
+      <view class="flex-0 avatar-preview-box">
+        <view class="avatar-preview">
+          <image class="avatar-poster" :src="poster || defaultAvatar"></image>
+          <image v-if="attach" :class="posCls" :src="attach.url"></image>
+        </view>
+      </view>
+      <view class="flex-1 setting-act">
+        <button @tap="getUserProfile">获取头像</button>
+        <button @tap="onChoose">自定义上传</button>
+        <button @tap="onSave">预览保存</button>
+      </view>
+    </view>
+    <view class="flex-0 avatar-slider-box">
+      <avatar-slider @change="onChange"/>
+    </view>
+  </view>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import defaultAvatar from '@/assets/images/avatar.png';
+import avatarSlider from './avatar-slider.vue';
+import useCanvas from '../useCanvas';
+
+export default {
+  components: {
+    'avatar-slider': avatarSlider,
+  },
+  setup () {
+    const avatarSize = 160;
+    const smallSize = 60;
+
+    const [drawImage, toDataURL, toTempFile, clearCanvas] = useCanvas(avatarSize);
+    const attach = ref();
+    const poster = ref();
+    
+    const posCls = computed(() => attach.value ? `pos-${attach.value.pos}` : '');
+
+    const getUserProfile = () => {
+      wx.getUserProfile({
+        desc: '用于设置头像',
+        success: (res) => {
+          poster.value = res.userInfo.avatarUrl;
+        },
+        fail: (err) => {
+          console.error(err);
+        }
+      });
+    };
+
+    const onChange = (val) => {
+      attach.value = val;
+    }
+
+    const onChoose = () => {
+      wx.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        success: ({ tempFiles }) => {
+          const tempFile = tempFiles[0];
+          poster.value = tempFile.tempFilePath;
+        }
+      });
+    };
+
+    const onSave = () => {
+      if (!poster.value || !attach.value) {
+        wx.showToast({
+          title: '无头像或小标',
+          icon: 'none'
+        });
+        return ;
+      }
+
+      wx.showLoading({
+        title: '请稍候...',
+      });
+
+      const onError = (err) => {
+        console.error(err);
+        wx.hideLoading();
+        wx.showToast({
+          title: '操作失败, 请重试',
+          icon: 'none'
+        });
+      }
+
+      clearCanvas();
+
+      // poster
+      drawImage(poster.value, 0, 0, avatarSize, avatarSize).then(() => {
+        // 头标
+        let p = undefined;
+        const url = attach.value.url;
+        switch (attach.value.pos) {
+          case 'lf':
+            p = drawImage(url, 0, 0, avatarSize, avatarSize);
+            break;
+          case 'rb':
+          default:
+            const startPos = avatarSize - smallSize - 10;
+            p = drawImage(url, startPos, startPos, smallSize, smallSize);
+            break;
+        }
+
+        p.then(() => {
+          toTempFile({
+            success(res) {
+              console.log(res);
+              wx.previewImage({ urls: [res] });
+            },
+            fail: onError,
+            complete: () => {
+              wx.hideLoading();
+            }
+          });
+        }).catch(onError);
+      }).catch(onError);
+    }
+    
+    return {
+      defaultAvatar,
+      poster,
+      attach,
+      posCls,
+      getUserProfile,
+      onChange,
+      onChoose,
+      onSave,
+    }
+  },
+}
+</script>
+
+<style lang="less">
+
+  // 国旗的两种颜色
+  @color1: #EE1C25;
+  @color2: #FFFD00;
+    
+  .setting-act {
+    margin-top: 1em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    button {
+      width: 8em;
+      font-size: 1em;
+      background: #f1c472;
+      color: #fff;
+
+      & + button {
+        margin-top: 1em;
+      }
+    }
+  }
+
+  .avatar-preview-box {
+    margin: auto;
+    box-sizing: border-box;
+    padding: 0 1.2em;
+  }
+
+  .avatar-preview {
+    margin: auto;
+    width: 320rpx;
+    height: 320rpx;
+    background: #fecf7a;
+    position: relative;
+    border: 16rpx solid #e37812;
+    border-radius: 16rpx;
+    overflow: hidden;
+
+    .avatar-poster {
+      width: 100%;
+      height: 100%;
+    }
+
+    .pos-rb {
+      position: absolute;
+      width: 120rpx;
+      height: 120rpx;
+      right: 10rpx;
+      bottom: 10rpx;
+    }
+    
+    .pos-lf {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .avatar-slider-box {
+    box-sizing: border-box;
+    padding: 0.5em;
+    background: rgba(0, 0, 0,  .2);
+  }
+</style>

src/pages/index/components/avatar-slider.vue

@@ -94,7 +94,7 @@
 <style lang="less">
 .avatar-slider {
   width: 100vw;
-  height: 72rpx;
+  height: 96rpx;
   white-space: nowrap;
 
   .active {
@@ -102,10 +102,15 @@
   }
 
   image {
+    background: rgba(255, 255, 255, .8);
     display: inline-block;
-    width: 72rpx;
-    height: 72rpx;
+    width: 96rpx;
+    height: 96rpx;
     border: 2px solid transparent;
+
+    & + image {
+      margin-left: .5em;
+    }
   }
 }
 </style>

src/pages/index/components/banner.vue

@@ -0,0 +1,50 @@
+<template>
+  <view class="index-banner">
+    <image :src="banner" />
+    <view class="index-title">
+      欢度国庆.换出精彩
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const banner = 'http://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/banner.jpg';
+
+      return {
+        banner
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+.index-banner {
+  position: relative;
+
+  @bannerSize: 100vw;
+  @bannerHeight: calc(100vw * 130 / 375);
+
+  image {
+    width: @bannerSize;
+    height: @bannerHeight;
+  }
+
+  .index-title {
+    width: @bannerSize;
+    height: @bannerHeight;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    text-align: center;
+    color: #fdcd77;
+    font-size: 1.6em;
+    font-weight: bold;
+    letter-spacing: 8rpx;
+    text-shadow: 4px 6px rgba(0, 0, 0, .6);
+    line-height: @bannerHeight;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -1,25 +1,8 @@
 <template>
   <view class="page v-flex">
     <view class="flex-1 v-flex index-contariner">
-      <view class="flex-1">
-        <view class="avatar-setting">
-          <view class="setting-title">
-            快来设置你的头像吧~
-          </view>
-          <view class="avatar-preview">
-            <image v-if="poster" class="avatar-poster" :src="poster"></image>
-            <image v-if="attach" :class="posCls" :src="attach.url"></image>
-          </view>
-          <view class="setting-act">
-            <button @tap="getUserProfile">获取头像</button>
-            <button @tap="onChoose">自定义上传</button>
-            <button @tap="onSave">预览保存</button>
-          </view>
-        </view>
-      </view>
-      <view class="flex-0">
-        <avatar-slider @change="onChange"/>
-      </view>
+      <banner class="flex-0" />
+      <avatar-change class="flex-1" />
     </view>
     <view class="flex-0 footer-ad">
       <ad unit-id="adunit-134135d609e5c485"></ad>
@@ -28,14 +11,15 @@
 </template>
 
 <script>
-import { computed, onMounted, ref } from 'vue';
-import Taro, { eventCenter, getCurrentInstance, useReady } from '@tarojs/taro';
-import avatarSlider from './components/avatar-slider.vue';
-import useCanvas from './useCanvas';
+import { ref } from 'vue';
+import Taro, { useReady } from '@tarojs/taro';
+import banner from './components/banner.vue';
+import avatarChange from './components/avatar-change.vue';
 
 export default {
   components: {
-    'avatar-slider': avatarSlider,
+    'avatar-change': avatarChange,
+    banner,
   },
   onShareAppMessage() {
     return {
@@ -48,165 +32,19 @@ export default {
     }
   },
   setup () {
-    const avatarSize = 160;
-    const smallSize = 60;
-
-    const [drawImage, toDataURL, toTempFile] = useCanvas('avatar-canvas', avatarSize);
-    const attach = ref();
-    const poster = ref();
-    
-    const posCls = computed(() => attach.value ? `pos-${attach.value.pos}` : '');
-
-    const getUserProfile = () => {
-      wx.getUserProfile({
-        desc: '用于设置头像',
-        success: (res) => {
-          poster.value = res.userInfo.avatarUrl;
-        },
-        fail: (err) => {
-          console.error(err);
-        }
-      });
-    };
-
-    const onChange = (val) => {
-      attach.value = val;
-    }
-
-    const onChoose = () => {
-      wx.chooseMedia({
-        count: 1,
-        mediaType: ['image'],
-        success: ({ tempFiles }) => {
-          const tempFile = tempFiles[0];
-          poster.value = tempFile.tempFilePath;
-        }
-      });
-    };
-
-    const onSave = () => {
-      if (!poster.value || !attach.value) {
-        wx.showToast({
-          title: '无头像或小标',
-          icon: 'none'
-        });
-        return ;
-      }
-
-      wx.showLoading({
-        title: '请稍候...',
-      });
-
-
-      const onError = (err) => {
-        console.error(err);
-        wx.hideLoading();
-        wx.showToast({
-          title: '操作失败, 请重试',
-          icon: 'none'
-        });
-      }
-
-      // poster
-      drawImage(poster.value, 0, 0, avatarSize, avatarSize).then(() => {
-        // 头标
-        let p = undefined;
-        const url = attach.value.url;
-        switch (attach.value.pos) {
-          case 'lf':
-            p = drawImage(url, 0, 0, avatarSize, avatarSize);
-            break;
-          case 'rb':
-          default:
-            const startPos = avatarSize - smallSize - 10;
-            p = drawImage(url, startPos, startPos, smallSize, smallSize);
-            break;
-        }
-
-        p.then(() => {
-          toTempFile({
-            success(res) {
-              console.log(res);
-              wx.previewImage({ urls: [res] });
-            },
-            complete: () => {
-              wx.hideLoading();
-            }
-          });
-        }).catch(onError);
-      }).catch(onError);
-    }
-    
-    return {
-      poster,
-      attach,
-      posCls,
-      getUserProfile,
-      onChange,
-      onChoose,
-      onSave,
-    }
   },
 }
 </script>
 
 <style lang="less">
 
-  @color1: #EE1C25;
-  @color2: #FFFD00;
-
   .index-contariner {
-    background: linear-gradient(@color1, #fff);
-
-    .avatar-setting {
-
-      .setting-title {
-        text-align: center;
-        font-size: 1.6em;
-        padding: 2em 0;
-        color: @color2;
-      }
-
-      .setting-act {
-        margin-top: 2em;
-        display: flex;
-        justify-content: center;
+    background: #faf4e6;
+    background-repeat: no-repeat;
+    background-image: url(http://yz-h5.oss-cn-shanghai.aliyuncs.com/assets/guoqing-miniapp/back.jpg);
+    background-position: center bottom;
+    background-size: 100% auto;
 
-        button {
-          background: fade(@color2, 40%);
-          color: @color1;
-        }
-      }
-    }
-
-    .avatar-preview {
-      margin: auto;
-      width: 320rpx;
-      height: 320rpx;
-      background: fade(@color2, 20%);
-      position: relative;
-
-      .avatar-poster {
-        width: 100%;
-        height: 100%;
-      }
-
-      .pos-rb {
-        position: absolute;
-        width: 120rpx;
-        height: 120rpx;
-        right: 10rpx;
-        bottom: 10rpx;
-      }
-      
-      .pos-lf {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-      }
-    }
   }
 
   .footer-ad {

src/pages/index/useCanvas.js

@@ -1,12 +1,12 @@
 
-import { ref } from 'vue';
-import Taro, { useReady } from '@tarojs/taro';
+import { ref, onMounted } from 'vue';
+// import Taro, { useReady } from '@tarojs/taro';
 
-export default function useCanvas(id, size = 160) {
+export default function useCanvas(size = 160) {
   const cvsRef = ref();
   const ctxRef = ref();
 
-  useReady(() => {
+  onMounted(() => {
     const canvas = wx.createOffscreenCanvas({type: '2d', width: size, height: size});
     const ctx = canvas.getContext('2d');
     
@@ -14,6 +14,10 @@ export default function useCanvas(id, size = 160) {
     ctxRef.value = ctx;
   });
 
+  const reset = () => {
+    cvsRef.value.height = size;
+  }
+
   const drawImage = (url, ...args) => {
     const canvas = cvsRef.value;
     const ctx = ctxRef.value;
@@ -79,6 +83,7 @@ export default function useCanvas(id, size = 160) {
     drawImage,
     toDataURL,
     toTempFile,
+    reset,
     cvsRef,
     ctxRef,
   ];