Wesmiler 2021-0115第4期分销功能新增

data/config/weixin.php

@@ -3,7 +3,7 @@
  * 微信配置
  */
 return [
-    'debug' => false, // 是否微信测试模式
+    'debug' => true, // 是否微信测试模式
 //    'debug' => false, // 是否测试模式
     'payDebug' => true, // 微信支付测试，开启后支付金额为0.01元
     'payResult' => false, // 是否记录支付结果

public/themes/default/weixin/market/index.html

@@ -1,12 +1,21 @@
 <include file="weixin@block:header"/>
 <title>分销中心</title>
 <link rel="stylesheet" href="__TMPL__/weixin/public/assets/css/market.css?v={$version}">
+<link rel="stylesheet" type="text/css" href="/static/lib/cropper/cropper.css?v={$version}"/>
 <div id="app" v-cloak >
+    <div class="fanhui2" v-if="showCropBox">
+        <h1>修改头像</h1>
+        <a @click="cropBack()"><img src="__TMPL__/weixin/public/assets/img/tubiao37.png"></a>
+        <div class="del" @click="cropCancel('avatar')"><img src="__TMPL__/weixin/public/assets/img/icon/del.png" alt=""></div>
+    </div>
     <div id="main" class="main-box">
         <div class="tox_box">
             <img src="__TMPL__/weixin/public/assets/img/tubiao9.png">
             <div class="tox_xx">
-                <div class="tox"> <img :src="memberInfo.avatar? memberInfo.avatar : '__TMPL__/weixin/public/assets/img/tubiao7.png'"  onerror="this.src='__TMPL__/weixin/public/assets/img/tubiao7.png'"></div>
+                <div class="tox" @click="showPop()">
+                    <img :src="memberInfo.avatar? memberInfo.avatar : '__TMPL__/weixin/public/assets/img/tubiao7.png'"  onerror="this.src='__TMPL__/weixin/public/assets/img/tubiao7.png'">
+                    <p>更换头像</p>
+                </div>
                 <div class="wod_xim">
                     <h1 v-text="memberInfo.user_nickname? memberInfo.user_nickname : '游客'"></h1>
                     <p><a href="/weixin/market/profile">资料设置</a></p>
@@ -68,8 +77,62 @@
                 </a>
             </ul>
         </div>
+        <div class="pop" v-show="uploadBox">
+            <div class="guanbi"></div>
+            <div class="popMain">
+                <div class="popMiddle">
+                    <ul><h1>请上传本人真实正面照，以下形式的图片将不会通过审核</h1>
+                        <li><img src="__TMPL__/weixin/public/assets/img/cuowzp1.jpg?v=2">
+                            <p>大头照</p></li>
+                        <li><img src="__TMPL__/weixin/public/assets/img/cuowzp2.jpg">
+                            <p>不雅照</p></li>
+                        <li><img src="__TMPL__/weixin/public/assets/img/cuowzp3.jpg">
+                            <p>动漫图片</p></li>
+                        <li><img src="__TMPL__/weixin/public/assets/img/cuowzp4.jpg">
+                            <p>模糊照片</p></li>
+                        <li><img src="__TMPL__/weixin/public/assets/img/cuowzp5.jpg">
+                            <p>证件照</p></li>
+                    </ul>
+                    <h2 class="select-pic">从相册选择照片<input type="file" accept="image/*" id="upload" class="upload"
+                                                         @change="selectImg($event,'avatar')" value="上传"></h2>
+                    <h2 class="popBottom" @click="showPop()"> 取消</h2>
+                    <!--<div class="popBottom" @click="postSubmit()"> 确定</div>-->
+                </div>
+            </div>
+        </div>
+        <div id="cropBox" class="weui-popup__container">
+            <div class="weui-popup__overlay"></div>
+            <div class="weui-popup__modal">
+                <div class="crop-preview">
+                    <div id="preview" class="preview">
+                        <!--<div class="del" @click="cropCancel('avatar')"><img src="__TMPL__/weixin/public/assets/img/icon/del.png" alt=""></div>-->
+                        <div id="preview_box" class="preview-box">
+                            <img id="preview_avatar" class="preview-img" src="" data-src="" alt="">
+                        </div>
+                        <div id="cropPreview" class="preview-box">
+
+                        </div>
+                        <div class="desc">
+                            个人描述
+                        </div>
+                        <div class="tips">
+                            <span> <img src="__TMPL__/weixin/public/assets/img/icon/size.png" alt="">拖拽</span>
+                            <span><img src="__TMPL__/weixin/public/assets/img/icon/scroll.png" alt="">移动</span>
+                            <!--<span @click="zoom('avatar')"><img src="__TMPL__/weixin/public/assets/img/icon/scroll.png" alt="">测试</span>-->
+                        </div>
+                    </div>
+                </div>
+                <div class="crop-actions">
+                    <a class="weui-btn weui-btn_default" @click="cropReset('avatar')">重置</a>
+                    <a class="weui-btn weui-btn_default" @click="cropConfirm('avatar')">完成</a>
+                </div>
+
+            </div>
+        </div>
     </div>
     <include file="weixin@block:footer_nav"/>
 </div>
+<script src="/static/lib/cropper/cropper.js?v={$version}" type="text/javascript"></script>
+<script src="__TMPL__/weixin/public/assets/lib/html2canvas.min.js?v={$version}" type="text/javascript"></script>
 <script src="__TMPL__/weixin/public/assets/js/market.js?v={$version}"></script>
 <include file="weixin@block:footer"/>

public/themes/default/weixin/market/profile.html

@@ -4,8 +4,7 @@
 <div id="app" v-cloak>
     <div class="fanhui2">
         <h1>个人信息</h1>
-        <a :href="id? '/weixin/member/profile?id='+id: '/weixin/member/profile'"><img
-                src="__TMPL__/weixin/public/assets/img/tubiao37.png"></a>
+        <a href="/weixin/market/index"><img src="__TMPL__/weixin/public/assets/img/tubiao37.png"></a>
     </div>
     <div class="main" v-if="params.id">
         <div class="gerxix_box">

public/themes/default/weixin/public/assets/css/market.css

@@ -1,9 +1,19 @@
-.tox_box{width: 100%;background: #fff;background-size: 100%;overflow: hidden;margin-top: -10px;}
+.tox_box{ width: 100%;background: #fff;background-size: 100%;overflow: hidden;margin-top: -10px;}
 .tox_box img{width: 100%;position: relative;top: 0;}
 .tox_xx{margin-top: 50px;position: absolute;top: 0;left: 15px;}
-.tox{width: 88px;height: 88px;background: #fff;margin: auto;border-radius: 50%;float: left;}
+.tox{position: relative;width: 88px;height: 88px;background: #fff;margin: auto;border-radius: 50%;float: left;}
 .wod_xim{float: left;margin-left: 20px;}
 .tox_box h1{color: #fff;font-size: 18px;margin-top: 16px;}
+.tox_box .tox p{
+    position: absolute;
+    bottom: 6px;
+    right: 0;
+    left: 0;
+    margin: auto;
+    width: 80px;
+    text-align: center;
+    font-size: 10px;
+}
 .tox_box p{color: #fff;font-size: 14px;margin-top: 6px;}
 
 
@@ -103,3 +113,182 @@
     background-color: #e62977;
     color: #fff;
 }
+
+
+
+/* 上传 */
+.fanhui2 {
+    z-index: 99999;
+}
+.fanhui2 .del {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    display: none;
+}
+.fanhui2 .del img {
+    width: 30px;
+    height: 30px;
+    position: inherit;
+    top: 0;
+}
+.select-pic {
+    position: relative;
+}
+.upload {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    opacity: 0;
+}
+
+
+
+/*	头像弹窗样式开始*/
+.pop{
+
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+}
+.guanbi{
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+
+}
+.popMiddle{background: #fff;overflow: hidden;}
+.pop .popMain{ width: 100%; /*height: 266px;*/ position: absolute;bottom: 0; z-index: 99999;}
+.popMiddle h1{text-align: center;padding: 15px;color: #666;font-size: 12px;}
+.popMiddle ul{width: 100%;overflow: hidden;padding-bottom: 15px;}
+.popMiddle h2{    text-align: center;
+    color: #333;
+    font-size: 16px;
+    line-height: 45px;
+    /*border-top: 1px solid #d2d2d2;*/
+    border-bottom: 1px solid #d2d2d2;
+}
+.popMiddle li{width: 20%;overflow: hidden;text-align: center;float: left;}
+.popMiddle li img{width: 92%;border-radius: 10px;overflow: hidden;}
+.popMiddle p{font-size: 12px; color: #666;margin-top: 6px;}
+.popBottom{
+    /*position: absolute;*/
+    /*bottom: 0;*/
+    /*left: 0;*/
+    display: block;
+    text-align: center;
+    width: 100%;
+    height: 45px;
+    margin-top: 5px;
+    background: #fff;
+    font-size: 16px;
+    line-height: 45px;
+}
+
+/* 裁剪 */
+#cropPreview {
+    display: none;
+}
+.crop-preview {
+    margin-top: 40px;
+    height: calc(100% - 105px);
+}
+.crop-preview .preview {
+    height: 100%;
+    background: rgba(152, 147, 147, 0.2);
+    position: relative;
+    width: 100%;
+}
+.crop-preview .preview-box {
+    height: 425px;
+    width: 343px;
+    position: absolute;
+    right: 0;
+    left: 0;
+    margin: auto;
+    overflow: hidden;
+    bottom: 102px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.crop-preview .desc {
+    position: absolute;
+    bottom: 42px;
+    text-align: center;
+    color: #666;
+    height: 60px;
+    line-height: 60px;
+    width: 343px;
+    border: 1px solid #fff;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    background: #fff;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.crop-preview .del {
+    position: absolute;
+    /*top: 5px;*/
+    right: 5px;
+    bottom: 532px;
+    z-index: 98;
+}
+.crop-preview .del img {
+    height: 30px;
+    width: 30px;
+}
+.crop-preview .tips {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+}
+.crop-preview .tips span {
+    color: #999;
+}
+.crop-preview .tips img {
+    width: 30px;
+    margin-right: 10px;
+}
+.crop-preview .preview-box .preview-img {
+    width: 100%;
+    height: 100%;
+}
+.crop-actions {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    margin: 10px 0;
+}
+
+.crop-actions a {
+    width: 47%;
+    display: inline-block;
+    margin-left: 2%;
+    padding: 0;
+    margin-top: 0 !important;
+    float: left;
+}
+
+.crop-actions a:last-child {
+    color: #fff;
+    background: #ffd132;
+}
+
+.weui-popup__container {
+    z-index: 9999;
+}

public/themes/default/weixin/public/assets/js/market.js

@@ -12,6 +12,7 @@ var app = new Vue({
         file: null,
         // 上传弹窗
         uploadBox: false,
+        showCropBox: false,
         submitting: {'sendcode': null, 'submit': null},
         rebackurl: '',
         cropData: {},
@@ -23,8 +24,10 @@ var app = new Vue({
     methods: {
         // 显示头像弹窗
         showPop: function () {
+            this.showCropBox = false;
             if (this.uploadBox) {
                 this.uploadBox = false;
+
                 $("body").css('overflowY', 'auto');
             } else {
                 this.uploadBox = true;
@@ -85,6 +88,7 @@ var app = new Vue({
             }
 
             _this.showPop();
+            _this.showCropBox = true;
             $("#cropPreview").hide();
             $("#preview_box").show();
             $(".fanhui2 .del").show();
@@ -222,6 +226,13 @@ var app = new Vue({
             $("body").css('overflowY', 'scroll');
             $.closePopup();
         },
+        // 取消
+        cropBack: function () {
+            $("#upload").val("");
+            $(".fanhui2 .del").hide();
+            $("body").css('overflowY', 'scroll');
+            $.closePopup();
+        },
         // 重置
         cropReset: function (id) {
             $image = $("#preview_" + id);
@@ -423,6 +434,7 @@ var app = new Vue({
                     _this.submitting.submit = false;
                     if (res.code == 'success') {
                         $.toast(res.message, 'text');
+                        _this.getInfo()
                         //_this.showPop();
                     } else if (res.code == 'login') {
                         var url = res.data.url;