图片裁剪

app.json

@@ -37,7 +37,8 @@
         "pages/mine/product/coupon/editcoupon",
         "pages/mine/product/coupon/choosegoods"
     ],
-    "subPackages": [{
+    "subPackages": [
+        {
             "root": "packagecard",
             "pages": [
                 "cardList/cardList",
@@ -58,9 +59,11 @@
                 "shop/bespeak/bespeak",
                 "shop/product/goodsdetail",
                 "shop/product/affirmorder",
-            "shop/catalog/bannerlist/goodscataloglist"
+                "shop/catalog/bannerlist/goodscataloglist",
+                "common/corpperimg/cropperimg"
             ]
-    }],
+        }
+    ],
     "window": {
         "backgroundTextStyle": "dark",
         "navigationBarBackgroundColor": "#fff",
@@ -72,7 +75,8 @@
         "color": "#000000",
         "selectedColor": "#000000",
         "borderStyle": "black",
-        "list": [{
+        "list": [
+            {
                 "text": "首页",
                 "pagePath": "pages/index/index",
                 "iconPath": "images/ic_card_normal.png",

class/main.wxss

@@ -3615,7 +3615,7 @@ scroll-view.cu-steps .cu-item {
 }
 
 .bg-blue {
-	background-color: var(--blue);
+	background-color: var(--yellowLight);
 	color: var(--white);
 }
 

packagecard/cardDetail/cardDetail.js

@@ -38,7 +38,9 @@ Page({
         "iconPath": "/images/ic_mine_normal.png",
         "selectedIconPath": "/images/ic_mine_sel.png",
       }
-    ]
+    ],
+    imgTempSrc: '',
+    currentIndex: 0
   },
   tabChange(e) {
     this.setData({
@@ -145,15 +147,30 @@ Page({
   choosePhoto: function (e) {
     var self = this
     var cur = e.currentTarget.dataset.cur
+    var item = e.currentTarget.dataset.item
+    console.log(cur)
+    self.setData({
+      currentIndex: cur
+    })
+    //宽高比
+    var scale = item.templateAreaWidth / item.templateAreaHeight
     wx.chooseImage({
       count: 1,
       sourceType: ['album', 'camera'],
       success: function (res) {
+        wx.navigateTo({
+          url: '/packagecard/common/corpperimg/cropperimg?imgSrc=' + res.tempFiles[0].path + '&scale=' + scale,
+        })
+      }
+    })
+  },
+  doUploadImg(path) {
+    var _self = this
     wx.showLoading({
       title: '上传中...',
     })
     app.http.upload(app.urls.doUploadImg, {
-          path: res.tempFiles[0].path,
+      path: path,
       name: 'image',
       header: {
         token: app.globalData.token
@@ -161,38 +178,23 @@ Page({
     }).then(res => {
       wx.hideLoading({})
       res = JSON.parse(res)
-          console.log(res)
+      var change = 'areaList[' + _self.data.currentIndex + '].templateAreaFile'
-          var change = 'areaList[' + cur + '].templateAreaFile'
+      _self.setData({
-          self.setData({
         [change]: res.data
       })
       wx.showToast({
         title: '上传成功',
         duration: 1500
       })
-        }).catch(res => {
+      _self.setData({
-
+        imgTempSrc: '',
+        currentIndex: 0
+      })
+    }).catch(res => {
+      _self.setData({
+        imgTempSrc: '',
+        currentIndex: 0
       })
-        // app.restAjax.file(app.restAjax.path('{cardUrl}app/file/uploadimage', [app.tradeUrl]), res.tempFiles[0].path, 'image', {
-        //   headers: {
-        //     token: app.globalData.token
-        //   }
-        // }, function (code, data) {
-        //   console.log(data)
-        //   data = JSON.parse(data)
-        //   wx.hideLoading({})
-        //   var change = 'areaList[' + cur + '].templateAreaTitle'
-        //   self.setData({
-        //     [change]: data.data
-        //   })
-        //   wx.showToast({
-        //     title: '上传成功',
-        //     duration: 1500
-        //   })
-        // }, function (code, data) {
-        //   app.dialog.msg(data.msg);
-        // });
-      }
     })
   },
   getPhoneNumber: function (e) {
@@ -442,7 +444,10 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    console.log(this.data.imgTempSrc)
+    if (this.data.imgTempSrc != '') {
+      this.doUploadImg(this.data.imgTempSrc)
+    }
   },
 
   /**

packagecard/cardDetail/cardDetail.wxml

@@ -50,7 +50,7 @@
     <view class="row" wx:for="{{areaList}}" wx:key="index"
       wx:if="{{item.templateAreaServerLink == '2'  && item.templateAreaType != '1'}}">
       <view class="item-title">{{item.templateAreaName}}:</view>
-      <view bindtap="choosePhoto" data-cur="{{index}}" class="card-img-box">
+      <view bindtap="choosePhoto" data-cur="{{index}}" data-item="{{item}}" class="card-img-box">
         <image src="{{cardUrl}}{{item.templateAreaFile}}" mode="widthFix"></image>
         <text class="cuIcon-cameraadd"></text>
       </view>

packagecard/cardList/cardList.js

@@ -6,17 +6,20 @@ Page({
    * 页面的初始数据
    */
   data: {
-    cardUrl: app.cardUrl,
+    imgUrl: app.urls.baseImgUrl,
     cardList: []
   },
   getList: function () {
     var self = this
-    wx.showNavigationBarLoading()
+    wx.showLoading({
+      title: '加载中...',
+    })
     app.http.get(app.urls.getCardList, {
         header: {
           token: app.globalData.token
         }
       }).then(res => {
+        wx.hideLoading({})
         self.setData({
           cardList: res.data
         })
@@ -24,6 +27,7 @@ Page({
         wx.stopPullDownRefresh() //停止下拉刷新
       })
       .catch(err => {
+        wx.hideLoading({})
         wx.hideNavigationBarLoading() //完成停止加载
         wx.stopPullDownRefresh() //停止下拉刷新
       })

packagecard/cardList/cardList.wxml

@@ -4,7 +4,7 @@
 <view class="list">
   <view class="card" bindtap="goDetail" wx:for="{{cardList}}" data-id="{{item.cardTemplateId}}" wx:key="index">
     <view class="card-img">
-      <image src="{{item.picturesTemplatePicture}}"></image>
+      <image src="{{imgUrl+item.picturesTemplatePictureUrl}}"></image>
     </view>
     <view class="card-name">{{item.picturesTemplateTitle}}</view>
   </view>

packagecard/common/corpperimg/cropperimg.js

@@ -0,0 +1,50 @@
+// packagecard/common/corpperimg/cropperimg.js
+const app = getApp()
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        imgSrc: '',
+        scale: 1
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        this.setData({
+            imgSrc: options.imgSrc,
+            scale: options.scale
+        })
+        console.log(this.data.scale)
+    },
+    cropperDone(e) {
+        const {
+            src,
+            cropperData
+        } = e.detail;
+        let arr = getCurrentPages()
+        let lastPage = (arr.length >= 2) ? arr[arr.length - 2] : undefined
+        lastPage.setData({
+            imgTempSrc: src
+        })
+    },
+
+    cropperCancel() {
+        wx.navigateBack({})
+    },
+
+    cropperFail(e) {
+        const err = e.detail;
+        console.log(e);
+        wx.showToast({
+            title: '裁剪失败,请重试',
+            icon: 'none',
+            success() {
+                wx.navigateBack({})
+            }
+        })
+    }
+})

packagecard/common/corpperimg/cropperimg.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "cropper": "/vant/dist/cropper/index"
+  }
+}

packagecard/common/corpperimg/cropperimg.wxml

@@ -0,0 +1,5 @@
+<cu-custom isCustom="{{false}}" isBack="{{true}}">
+    <view slot="content">图片裁剪</view>
+</cu-custom>
+<cropper imageSrc="{{imgSrc}}" enableScale="{{true}}" ratio="{{scale}}" bind:cropperDone="cropperDone"
+    bind:cropperCancel="cropperCancel" bind:cropperFail="cropperFail"></cropper>

packagecard/common/corpperimg/cropperimg.wxss

@@ -0,0 +1 @@
+/* packagecard/common/corpperimg/cropperimg.wxss */

pages/index/index.wxml

@@ -87,7 +87,7 @@
       <view class="good">
         <view class="good-avatar">
           <view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user">
-            <image src="{{imgUrl}}{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
+            <image src="{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
             <image src="/images/ic_user_default.png" wx:if="{{!user.creatorIcon}}"></image>
           </view>
         </view>

pages/mine/myCard/myCard.js

@@ -6,7 +6,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-        cardUrl: app.urls.baseImgUrl,
+        imgUrl: app.urls.baseImgUrl,
         cardList: [],
         otherCardList: [],
         historyList: [],
@@ -211,7 +211,7 @@ Page({
             this.getOtherCard()
         } else if (this.data.tab == '2') {
             this.setData({
-                otherCardList: [],
+                historyList: [],
                 page: {
                     rows: 10,
                     page: 1

pages/mine/myCard/myCard.wxml

@@ -15,7 +15,7 @@
         style="padding-bottom:{{(list.cardTemplateUseHeight / list.cardTemplateUseWidth) *100 +'%'}};">
         <view class="card-img">
           <view class="main" wx:if="{{list.cardTemplateUseDefault == '1'}}">主名片</view>
-          <image src="{{list.cardTemplateUsePhoto}}" style="width: 100%"></image>
+          <image src="{{list.picturesTemplatePictureUrl}}" style="width: 100%"></image>
         </view>
       </view>
       <view class="card-name">{{list.cardTemplateUseTitle}}</view>
@@ -35,7 +35,7 @@
         style="padding-bottom:{{(list.cardTemplateUseDTO.cardTemplateUseHeight / list.cardTemplateUseDTO.cardTemplateUseWidth) *100 +'%'}};">
         <view class="card-img">
           <view class="main" wx:if="{{list.cardTemplateUseTop == '1'}}">置顶</view>
-          <image src="{{list.cardTemplateUseDTO.cardTemplateUsePhoto}}" style="width: 100%"></image>
+          <image src="{{list.cardTemplateUseDTO.picturesTemplatePictureUrl}}" style="width: 100%"></image>
         </view>
       </view>
       <view class="card-name other-card">
@@ -61,12 +61,12 @@
         style="padding-bottom:{{(list.cardTemplateUseDTO.cardTemplateUseHeight / list.cardTemplateUseDTO.cardTemplateUseWidth) *100 +'%'}};">
         <view class="card-img">
           <view class="main" wx:if="{{list.cardTemplateUseTop == '1'}}">置顶</view>
-          <image src="{{list.cardTemplateUseDTO.cardTemplateUsePhoto}}" style="width: 100%"></image>
+          <image src="{{list.cardTemplateUseDTO.picturesTemplatePictureUrl}}" style="width: 100%"></image>
         </view>
       </view>
       <view class="card-name-sm other-card">
         <view style="display:flex;flex-direction:row;">
-          <image src="{{cardUrl+list.creatorIcon}}" style="width:64rpx;height:64rpx;border-radius:50%;"></image>
+          <image src="{{list.creatorIcon}}" style="width:64rpx;height:64rpx;border-radius:50%;"></image>
           <text style="margin-left:10rpx;">{{list.creatorName}}</text>
         </view>
         <view>

pages/mine/otherCard/othercarddetail.js

@@ -8,8 +8,6 @@ Page({
         speedStep: 5, //快进快退秒数
         waitFlag: false,
         avatarUrl: app.globalData.userInfo.avatarUrl,
-        haveCard: false,
-        bgImg: '',
         areaList: [],
         cardHeight: '',
         cardInfo: {},
@@ -17,17 +15,25 @@ Page({
         personIntro: {},
         companyIntro: {},
         shareImg: '',
-        phoneTxt: '',
+        phoneTxt: '未录入',
-        emailTxt: '',
+        emailTxt: '未录入',
-        wechateTxt: '',
+        wechateTxt: '未录入',
-        addressTxt: '',
+        addressTxt: '未录入',
         viewInfo: {},
         forwardCount: '',
         imgUrl: app.urls.baseImgUrl,
-        personId: '',
         shareRecordId: '',
         isShowBarCode: false,
-        browUserList: []
+        browUserList: [],
+        shareImgUrl: '',
+        tempUserId: '', //当前名片用户的ID
+        cardTemplateDispatchId: '', //用来标记是否是分享过来的
+        cardTemplateUseId: '', //分享过来的名片id
+        isShowCard: false, //用来显示我浏览过的名片
+        otherCardList: [], //卡包名片
+        isPlayAudio: false, //标识当前是否在播放音乐
+        audioId: '',
+        count: 3,
     },
     onLoad(options) {
         var self = this
@@ -676,7 +682,7 @@ Page({
             var postId = self.buildId()
             self.shareRecord(postId)
 
-            var param = '/pages/sharePage/sharePage?cardTemplateDispatchId=' + postId;
+            var param = '/pages/index/index?cardTemplateDispatchId=' + postId;
             return {
                 title: '我的名片',
                 path: param

pages/mine/otherCard/othercarddetail.wxml

@@ -1,7 +1,12 @@
-<cu-custom id="head" isCustom="{{false}}" isBack="{{true}}" isIndex="{{false}}">
+<cu-custom id="head" isCustom="{{false}}" isBack="{{false}}" isIndex="{{true}}" bind:show="showCardHistory">
-    <view slot="content">{{nameTxt}}</view>
+  <view slot="content">
+    <view>
+      {{nameTxt}}
+      <text class="cuIcon-triangledownfill"></text>
+    </view>
+  </view>
 </cu-custom>
-<view>
+<view style="background-color:#F7F7F7;">
   <view class="top-box">
     <!-- 名片 -->
     <view class="card-container"
@@ -9,7 +14,7 @@
       <view class="card"
         style="padding-bottom:{{(cardInfo.cardTemplateUseHeight / cardInfo.cardTemplateUseWidth) *100 +'%'}};">
         <!-- 背景图 -->
-                <image src="{{cardUrl}}{{cardInfo.cardTemplateUseBackgroundImage}}" alt="" class="card-bgImg"
+        <image src="{{cardUrl}}{{cardInfo.cardTemplateUseBackgroundImage}}" alt="" class="card-bgImg" mode="widthFix"
           wx:if="{{cardInfo.cardTemplateUseBackgroundImage}}"></image>
         <!-- 文字 -->
         <view class="area-box" wx:for="{{areaList}}" wx:key="index"
@@ -18,185 +23,237 @@
         <!-- 图片 -->
         <view wx:for="{{areaList}}" data-cur="{{index}}" wx:key="index"
           style="position:absolute;top: {{(item.templateAreaTop / cardInfo.cardTemplateUseHeight) * 100 + '%'}};left:{{(item.templateAreaLeft / cardInfo.cardTemplateUseWidth) * 100 + '%'}};color:{{item.templateAreaFontColor}};width:{{(item.templateAreaWidth / cardInfo.cardTemplateUseWidth) * 100 + '%'}};height:{{(item.templateAreaHeight / cardInfo.cardTemplateUseHeight) * 100 + '%'}}"
-                    wx:if="{{item.templateAreaType != '1'}}">
+          wx:if="{{item.templateAreaServerLink != '1'}}">
-                    <image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%">
+          <image src="{{cardUrl}}{{item.templateAreaFile}}" style="width: 100%;height:100%" mode="widthFix">
           </image>
         </view>
       </view>
     </view>
+    <!-- 功能区 -->
+    <view class="flex flex-direction justify-center align-center bg-white" style="width:100%;">
       <view class="mid">
         <button open-type="share" class="mid-box">
-                <image src="/images/share-icon.png"></image>
+          <view class="flex justify-between align-center" style="width:100%;">
-                <view class="mid-box-text">分享名片</view>
+            <text style="text-align:center;line-height:30rpx;height:30rpx;font-size:28rpx;color:#CCC;">01/</text>
+            <image src="/images/ic_share_icon.png"></image>
+          </view>
+          <view class="mid-box-text  margin-top-xs">分享名片</view>
         </button>
         <view class="mid-box" bindtap="includedCard">
-                <image src="/images/contact-icon.png"></image>
+          <view class="flex justify-between align-center" style="width:100%;">
-                <view class="mid-box-text">加入卡包</view>
+            <text style="text-align:center;line-height:30rpx;height:30rpx;font-size:28rpx;color:#CCC;">02/</text>
+            <image src="/images/ic_phone_icon.png"></image>
           </view>
-            <view class="mid-box" bindtap="showBarCode">
+          <view class="mid-box-text  margin-top-xs">加入卡包</view>
-                <image src="/images/code-icon.png"></image>
+        </view>
-                <view class="mid-box-text">名片码</view>
+        <view class="mid-box bg-yellow-yellow" bindtap="showBarCode">
+          <view class="flex justify-between align-center" style="width:100%;">
+            <text style="text-align:center;line-height:30rpx;height:30rpx;font-size:28rpx;">03/</text>
+            <image src="/images/ic_code_icon.png"></image>
+          </view>
+          <view class="mid-box-text-white margin-top-xs">名片码</view>
         </view>
       </view>
       <view class="mid-btn">
         <view class="mid-btn-box" bindtap="makeCall">
-                <image src="/images/mid-btn-1.png"></image>
+          <view class="mid-btn-title">
-                <view class="mid-btn-text">
+            <image class="image" src="/images/ic_call_phone_icon.png"></image>
-                    <view class="text-top">电话</view>
+            <text>拨打电话</text>
-                    <view class="text-bottom">{{phoneTxt}}</view>
           </view>
+          <view style="flex:7;text-align: right;">{{phoneTxt}}</view>
         </view>
         <view class="mid-btn-box" bindtap="copyText" data-text="{{wechateTxt}}">
-                <image src="/images/mid-btn-2.png"></image>
+          <view class="mid-btn-title">
-                <view class="mid-btn-text">
+            <image class="image" src="/images/ic_wechart_icon.png"></image>
-                    <view class="text-top">微信</view>
+            <text>添加微信</text>
-                    <view class="text-bottom">{{wechateTxt}}</view>
           </view>
+          <view style="flex:7;text-align: right;">{{wechateTxt}}</view>
         </view>
         <view class="mid-btn-box" bindtap="copyText" data-text="{{emailTxt}}">
-                <image src="/images/mid-btn-3.png"></image>
+          <view class="mid-btn-title">
-                <view class="mid-btn-text">
+            <image class="image" src="/images/ic_email_icon.png"></image>
-                    <view class="text-top">邮箱</view>
+            <text>邮箱</text>
-                    <view class="text-bottom">{{emailTxt}}</view>
           </view>
+          <view style="flex:7;text-align: right;">{{emailTxt}}</view>
         </view>
         <view class="mid-btn-box" bindtap="copyText" data-text="{{addressTxt}}">
-                <image src="/images/mid-btn-4.png"></image>
+          <view class="mid-btn-title">
-                <view class="mid-btn-text">
+            <image class="image" src="/images/ic_address_icon.png"></image>
-                    <view class="text-top">地址</view>
+            <text>地址</text>
-                    <view class="text-bottom">{{addressTxt}}</view>
           </view>
+          <view style="flex:7;text-align: right;">{{addressTxt}}</view>
         </view>
       </view>
       <view class="good">
         <view class="good-avatar">
-                <view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user"
+          <view class="avatar-list" wx:for="{{browUserList}}" wx:key="index" wx:for-item="user">
-                    style='transform:translateX({{-index*20}}rpx)'>
+            <image src="{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
-                    <image src="{{imgUrl}}{{user.creatorIcon}}" wx:if="{{user.creatorIcon}}"></image>
             <image src="/images/ic_user_default.png" wx:if="{{!user.creatorIcon}}"></image>
           </view>
         </view>
         <view class="good-click">
           <view class="view-count">
-                    <image src="/images/view-count.png"></image>
+            <image src="/images/view-count.png" mode="scaleToFill"></image>
-                    {{cardInfo.cardTemplateUseScansNumber}}
+            <text class="margin-left-sm text-center"> {{cardInfo.cardTemplateUseScansNumber >999? '999+' :
+              cardInfo.cardTemplateUseScansNumber}}</text>
           </view>
-                <view class="share-count">
+          <view class="view-count-no">
-                    <image src="/images/share-count.png"></image>
+            <image src="/images/share_count.png" mode="scaleToFill"></image>
-                    {{cardInfo.cardTemplateUseDispatchNumber}}
+            <text class="margin-left-sm text-center">{{cardInfo.cardTemplateUseDispatchNumber>999 ?
+              '999+':cardInfo.cardTemplateUseDispatchNumber}}</text>
           </view>
         </view>
       </view>
     </view>
-    <view wx:if="{{dataList.length>0}}">
+    <!-- 栏目数据 -->
+    <view wx:if="{{dataList.length>0}}" style="background-color:#F7F7F7;">
       <!-- 栏目组 -->
       <view wx:for="{{dataList}}" wx:key="index">
         <view class="flex flex-direction  margin-sm">
           <!-- 栏目 -->
-                <view class="catelog-title" data-item="{{item}}" bindtap="showMore">
+          <view class="catelog-title margin-top-xs" data-item="{{item}}" data-idx="{{index}}"
+            data-userid="{{tempUserId}}" bindtap="showMore">
             <view class="action">
               <view class="title intro-title">
-                            <text class="cuIcon-vipcard"></text>
+                <image src="/images/ic_column_icon.png" mode="scaleToFill" style="width:32rpx;height:32rpx;"></image>
-                            <text> {{item.name}}</text>
+                <text>{{item.name}}</text>
               </view>
             </view>
-                    <view class="action">
+            <view class="action text-gray" style="color:#999999;" wx:if="{{item.mode=='2'}}">
+              更多<text class="cuIcon-add"></text>
             </view>
           </view>
-                <view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it"
+          <view class="column-content">
-                    class="padding-lef-sm padding-right-sm bg-white radius flex flex-direction" style="width:100%;">
+            <!-- 栏目样式用来展示音频 -->
-                    <!-- 栏目数据 -->
+            <view wx:if="{{item.type=='dbc15b23-a1a3-4cb6-b7fa-9b01c9416454'}}" class="flex flex-direction"
-                    <view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i">
+              style="width:100%;">
-                        <!-- 具体数据 -->
+              <view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it" class="column-box-row">
+                <view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i" bindtap="showDetail"
+                  data-ctype="{{item.type}}" data-cid="{{item.cId}}" data-id="{{it.uid}}">
                   <!-- 文本 -->
-                        <view wx:if="{{child.dataType=='1'}}" class="align-center">
+                  <view wx:if="{{child.dataType=='1' && child.displayList}}" class="align-center">
-                            <view class="cu-bar bg-white">
-                                <view class="action">
-                                    <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
-                                </view>
-                            </view>
                     <view class="bg-white">
                       <view class="cu-form-group">
-                                    <view id="content"
+                        <view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
-                                        class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
                           style="line-height:40rpx;">
-                                        {{child.value}}
+                          <text class="cuIcon-title">
+                          </text>
+                          <text style="color:#333333;">{{child.value}}</text>
                         </view>
                       </view>
                     </view>
                   </view>
-                        <!-- 图片 -->
+                  <!-- 音频 -->
-                        <view wx:if="{{child.dataType=='2'}}">
+                  <view wx:if="{{child.dataType=='3' && child.displayList}}" style="width:100%;">
-                            <view class="cu-bar bg-white">
-                                <view class="action">
-                                    <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
-                                </view>
-                            </view>
                     <view class="cu-form-group padding-sm">
-                                <view class="grid col-4 grid-square flex-sub">
+                      <view class="flex align-center margin-left-sm" style="width:100%;" wx:for="{{child.valueList}}"
-                                    <view class="bg-img" wx:for="{{child.valueList}}" wx:key="d" wx:for-item="photo"
+                        wx:for-index="a" wx:key="a" wx:for-item="audio">
-                                        catchtap="viewImg" data-url="{{photo.path}}">
+                        <image src="{{audio.isPlay? '/images/ic_pause_icon.png': '/images/ic_play_icon.png'}}"
-                                        <image src='{{photo.path}}' mode='scaleToFill'></image>
+                          mode="scaleToFill" style="width:64rpx;height:64rpx;margin-left:5rpx;" data-index="{{index}}"
-                                    </view>
+                          data-i="{{i}}" data-idx="{{idx}}" data-a="{{a}}" data-item="{{audio}}" catchtap="play">
-                                </view>
-                            </view>
-                        </view>
-                        <!-- 视频 -->
-                        <view wx:if="{{child.dataType=='4'}}">
-                            <view class="cu-bar bg-white">
-                                <view class="action">
-                                    <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
-                                </view>
-                            </view>
-                            <view class="cu-form-group margin-top-sm padding-sm"
-                                style="border:1rpx solid #f9f9f9;border-radius:10rpx;">
-                                <view class="grid col-{{count>3 ? count : 1}} grid-square flex-sub">
-                                    <view class="bg-img" wx:for="{{child.valueList}}" wx:for-index="d" wx:key="d"
-                                        wx:for-item="video" catchtap="viewVideo"
-                                        style="{{count > 3 ? '' :'height:280rpx;width:100%;padding-bottom:0px;'}}"
-                                        data-url="{{video.path}}">
-                                        <image style="width:100%;height:100%;" src='{{video.imgPath}}'
-                                            mode='scaleToFill'></image>
-                                        <view class="{{count > 3 ? 'play-box-arrow-pos':'play-box-arrow-flex'}}">
-                                            <image src="/images/ic_video_play.png" mode="scaleToFill"
-                                                style="{{count > 3 ? 'width:32px;height:32px':'height:64px;width:64px;'}}">
                         </image>
                       </view>
                     </view>
                   </view>
                 </view>
+              </view>
 
             </view>
+            <view wx:else>
+              <view wx:for="{{item.list}}" wx:for-index="idx" wx:key="idx" wx:for-item="it" class="column-box">
+                <!-- 栏目数据 -->
+                <view wx:for="{{it.list}}" wx:for-index="i" wx:for-item="child" wx:key="i" bindtap="showDetail"
+                  data-ctype="{{item.type}}" data-cid="{{item.cId}}" data-id="{{it.uid}}">
+                  <!-- 栏目样式1或3 -->
+                  <view>
+                    <!-- 具体数据 -->
+                    <!-- 文本 -->
+                    <view wx:if="{{child.dataType=='1' && child.displayList}}" class="align-center">
+                      <view class="bg-white">
+                        <view class="cu-form-group">
+                          <view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
+                            style="line-height:40rpx;">
+                            <text class="{{item.type=='dda5007c-5fb7-48f2-8537-3cb8ea298242' ? 'cuIcon-title' : ''}}">
+                            </text>
+                            <text style="color:#333333;">{{child.value}}</text>
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+                    <!-- 图片 -->
+                    <view wx:if="{{child.dataType=='2' && child.displayList}}">
+                      <!-- 九宫格 -->
+                      <view wx:if="{{child.dataMode == '95bef6e2-0ab8-442f-b53d-b1f18130bae1'}}"
+                        class="cu-form-group padding-sm">
+                        <view class="grid col-3 grid-square flex-sub">
+                          <view class="bg-img" wx:for="{{child.valueList}}" wx:key="d" wx:for-item="photo"
+                            catchtap="viewImg" data-url="{{photo.path}}">
+                            <image src='{{photo.path}}' mode='scaleToFill'></image>
+                          </view>
+                        </view>
+                      </view>
+                      <!-- 左右滑动 -->
+                      <view
+                        wx:elif="{{child.dataMode=='bae3d6c1-8f6e-4e27-bba2-e42860758db7' || child.dataMode=='179441e3-5ad1-485b-b5af-421bdc383b5e'}}">
+                        <swiper style="width:100%;height:400rpx;margin-top:20rpx;" indicator-dots="{{true}}"
+                          autoplay="{{child.dataMode=='179441e3-5ad1-485b-b5af-421bdc383b5e'}}">
+                          <block wx:for="{{child.valueList}}" wx:key="pIndex" wx:for-index="pIndex" wx:for-item="photo">
+                            <swiper-item style="width:100%;">
+                              <image style="width:100%;border-radius:20rpx;height:400rpx;" src="{{photo.path}}"
+                                mode="scaleToFill">
+                              </image>
+                            </swiper-item>
+                          </block>
+                        </swiper>
+                      </view>
+                      <!-- 上下 -->
+                      <view wx:elif="{{child.dataMode=='121133b0-3596-46f4-a35f-7aaae79cf47a'}}">
+                        <block wx:for="{{child.valueList}}" wx:key="pIndex" wx:for-index="pIndex" wx:for-item="photo">
+                          <image style="width:100%;border-radius:20rpx;margin-top:20rpx;" src="{{photo.path}}"
+                            mode="widthFix">
+                          </image>
+                        </block>
+                      </view>
+                    </view>
+                    <!-- 视频 -->
+                    <view wx:if="{{child.dataType=='4' && child.displayList}}">
+                      <view class="cu-form-group margin-top-sm padding-sm"
+                        style="border:1rpx solid #f9f9f9;border-radius:10rpx;">
+                        <view class="grid col-{{count>3 ? count : 1}} grid-square flex-sub">
+                          <view class="{{count >3 ?'' : 'movie-item'}} bg-img" wx:for="{{child.valueList}}"
+                            wx:for-index="d" wx:key="d" wx:for-item="video" catchtap="viewVideo"
+                            data-url="{{video.path}}">
+                            <image style="width:100%;height:100%;" src='{{video.imgPath}}' mode='scaleToFill'></image>
+                            <view class="{{count > 3 ? 'play-box-arrow-pos':'play-box-arrow-flex'}}">
+                              <image src="/images/ic_video_play.png" mode="scaleToFill"
+                                class="{{count>3? 'image-32' :'image-64'}}"></image>
+                            </view>
+                          </view>
+                        </view>
+                      </view>
+                    </view>
                     <!-- 音频 -->
-                        <view wx:if="{{child.dataType=='3'}}" style="width:100%;">
+                    <view wx:if="{{child.dataType=='3' && child.displayList}}" style="width:100%;">
-                            <view class="cu-bar bg-white">
-                                <view class="action">
-                                    <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
-                                </view>
-                            </view>
                       <view class="cu-form-group padding-sm">
                         <view class="flex align-center shadow-box margin-top-xs" style="width:100%;"
                           wx:for="{{child.valueList}}" wx:for-index="a" wx:key="a" wx:for-item="audio">
-                                    <image src="/images/ic_user_default.png" mode="scaleToFill"
+                          <image src="/images/ic_user_default.png" mode="scaleToFill" style="width:80rpx;height:80rpx;">
-                                        style="width:80rpx;height:80rpx;">
                           </image>
                           <view class="play-box">
                             <view class="flex justify-between align-center" style="width:80%;">
                               <text>{{audio.curDurationStr}}</text>
-                                            <slider class="flex-sub" bindchange="slider4change" min="{{0}}"
+                              <slider class="flex-sub" bindchange="slider4change" min="{{0}}" max="{{audio.duration}}"
-                                                max="{{audio.duration}}" value="{{audio.curDuration}}"
+                                value="{{audio.curDuration}}" backgroundColor="#cacaca" activeColor="#1296db"
-                                                backgroundColor="#cacaca" activeColor="#1296db" data-index="{{index}}"
+                                data-index="{{index}}" data-idx="{{idx}}" data-i="{{i}}" data-item="{{audio}}"
-                                                data-idx="{{idx}}" data-i="{{i}}" data-item="{{audio}}" data-a="{{a}}"
+                                data-a="{{a}}" block-size="14" block-color="#1296db" />
-                                                block-size="14" block-color="#1296db" />
                               <text>{{audio.totalDurationStr}}</text>
                             </view>
                             <view class="flex justify-between" style="width:80%;">
-                                            <image src="/images/ic_audio_rewind.png" mode="scaleToFill"
+                              <image src="/images/ic_audio_rewind.png" mode="scaleToFill" data-index="{{index}}"
-                                                data-index="{{index}}" data-idx="{{idx}}" data-a="{{a}}" data-i="{{i}}"
+                                data-idx="{{idx}}" data-a="{{a}}" data-i="{{i}}" data-item="{{audio}}"
-                                                data-item="{{audio}}" catchtap="rewind">
+                                catchtap="rewind">
                               </image>
-                                            <image
+                              <image src="{{audio.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
-                                                src="{{audio.isPlay ? '/images/ic_audio_playing.png':'/images/ic_audio_play.png'}}"
                                 mode="scaleToFill" catchtap="play" data-index="{{index}}" data-i="{{i}}"
                                 data-idx="{{idx}}" data-a="{{a}}" data-item="{{audio}}"></image>
                               <image src="/images/ic_audio_speed.png" mode="scaleToFill" catchtap="speed"
@@ -206,15 +263,9 @@
                           </view>
                         </view>
                       </view>
-
                     </view>
                     <!-- 地图定位 -->
-                        <view wx:if="{{child.dataType=='6'}}">
+                    <view wx:if="{{child.dataType=='6' && child.displayList}}">
-                            <view class="cu-bar bg-white">
-                                <view class="action">
-                                    <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
-                                </view>
-                            </view>
                       <view class="padding-sm">
                         <view wx:for="{{child.valueList}}" wx:key="mindex" wx:for-index="mindex" wx:for-item="m"
                           style="width:100%;" class="margin-top-xs">
@@ -224,40 +275,130 @@
                             <view></view>
                           </view>
                           <view style="border-radius:10rpx;overflow:hidden;margin-top:10rpx;">
-                                        <map style="width:100%;height:300rpx;" longitude="{{m.longitude}}"
+                            <map style="width:100%;height:300rpx;" longitude="{{m.longitude}}" latitude="{{m.latitude}}"
-                                            latitude="{{m.latitude}}" scale="12" enable-scroll="{{false}}"
+                              scale="12" enable-scroll="{{false}}" enable-zoom="{{false}}" enable-rotate="{{false}}"
-                                            enable-zoom="{{false}}" enable-rotate="{{false}}" enable-traffic="{{false}}"
+                              enable-traffic="{{false}}"
                               markers="{{[{latitude:m.latitude,longitude:m.longitude}]}}"></map>
                           </view>
                         </view>
                       </view>
                     </view>
                     <!-- 文本域 -->
-                        <view wx:if="{{child.dataType == '7'}}">
+                    <view wx:if="{{child.dataType == '7' && child.displayList}}">
+                      <view class="bg-white">
+                        <view class="cu-form-group">
+                          <view id="content" class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
+                            style="line-height:40rpx;color:#333333">
+                            <text space="emsp" decode="true">&emsp;&emsp;{{child.value}}</text>
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+                    <!-- 单选 -->
+                    <view wx:if="{{child.dataType == '8' && child.displayList}}">
+                      <view class="flex" style="flex-direction:row;">
+                        <view class="cu-bar bg-white">
+                          <view class="action">
+                            <text class="cuIcon-vipcard"></text> <text class="text-black">{{child.comment}}:</text><text
+                              class="margin-left-sm">{{child.selValue}}</text>
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+                    <!-- 多选 -->
+                    <view wx:if="{{child.dataType == '9' && child.displayList}}">
                       <view class="cu-bar bg-white">
                         <view class="action">
                           <text class="cuIcon-vipcard"></text> <text>{{child.comment}}</text>
                         </view>
                       </view>
-                            <view class="bg-white">
+                      <view class="cu-capsule radius" wx:for="{{child.dictionariesList}}" wx:key="ids"
-                                <view class="cu-form-group">
+                        wx:for-index="ids" wx:for-item="ss">
-                                    <view id="content"
+                        <view wx:if="{{ss.isSel}}" class="cu-tag bg-blue radius padding-left-sm padding-right-sm">
-                                        class="padding-left-xs padding-right-xs margin-left-xs margin-right-xs"
+                          {{ss.dataName}}
-                                        style="line-height:40rpx;">
-                                        {{child.value}}
                         </view>
                       </view>
                     </view>
                   </view>
                 </view>
               </view>
+              <!-- 评论 收藏  点赞 -->
+              <!-- <view class="func-box">
+                <view class="line-gray-ssm">
+                </view>
+                <view class="func-items">
+                  <view class="func-item">
+                    <image src="/images/share_count.png" mode="scaleToFill"></image>
+                    <text>转发</text>
+                  </view>
+                  <view class="func-item">
+                    <image src="/images/ic_collect_icon.png" mode="scaleToFill"></image>
+                    <text>收藏</text>
+                  </view>
+                  <view class="func-item">
+                    <image src="/images/ic_comment_icon.png" mode="scaleToFill"></image>
+                    <text>10</text>
+                  </view>
+                  <view class="func-item">
+                    <image src="/images/ic_unfavour.png" mode="scaleToFill"></image>
+                    <text>12</text>
+                  </view>
+                </view>
+              </view> -->
+            </view>
+          </view>
         </view>
       </view>
     </view>
     <view wx:else style="margin-top:200rpx;width:100%;">
-        <van-empty description="暂无数据" image="/images/ic_empty_data.png" />
+      <van-empty description="暂无数据" />
+    </view>
+  </view>
+  <!-- 创建名片 -->
+  <view class="creat-card" bindtap="goList">
+    <image src="/images/create-btn.png"></image>
   </view>
 </view>
 <view class="bar-code" wx:if="{{isShowBarCode}}" bindtap="hideBarCode">
+  <view class="content">
+    <view class="code-title">一段话</view>
     <image src="{{cardUrl}}{{cardInfo.cardTemplateUseBarcode}}"></image>
+    <view class="code-txt">
+      有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
+    </view>
+  </view>
 </view>
+<!-- 选择展示的名片 -->
+<van-action-sheet show="{{ isShowCard }}" title="请选择" bind:close="onHide" style="padding-bottom:180rpx;">
+  <view class="flex flex-direction align-center" style="margin-top:10rpx;padding-bottom:30rpx;">
+    <scroll-view style="height:320rpx;max-height:320rpx;padding:0rpx 20rpx;align-items:center;" scroll-y>
+      <!-- 我的 -->
+      <view style="width:100%;flex-direction:center;" class="flex align-center" bindtap="changeCard">
+        <view class="flex align-center justify-center bg-yellow-yellow"
+          style="width:100%;height:160rpx;border-radius:10rpx;margin-right:10rpx;margin-left:10rpx;">
+          <text style="font-size:32rpx;color:#FFFFFF;">我的</text>
+        </view>
+      </view>
+      <!-- 浏览历史 -->
+      <view wx:for="{{otherCardList}}" wx:key="index" wx:for-item="item" class="cu-list menu-avatar solid"
+        style="margin-left:10rpx;margin-right:10rpx;margin-top:20rpx;" data-item="{{item}}" bindtap="changeCard">
+        <view class="cu-item bg-yellow-yellow" style="width:100%;height:160rpx;border-radius:10rpx;">
+          <view class="cu-avatar radius xl round bg-yellow-yellow">
+            <text style="font-size:14px;">{{item.name}}</text>
+          </view>
+          <view class="content" style="width:100%;">
+            <view class="text-depblack">
+              <text class="text-cut text-white">电话:{{item.phone}}</text>
+            </view>
+            <view class="text-gray text-sm flex">
+              <text class="text-cut text-white">公司:{{item.department}}</text>
+            </view>
+            <view class="text-gray text-sm flex">
+              <text class="text-cut text-white">地址:{{item.address}}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</van-action-sheet>

pages/mine/otherCard/othercarddetail.wxss

@@ -1,17 +1,17 @@
 page {
-    background: #f7f7f7;
+  background: #F7F7F7;
-  }
+}
 
-  .card-container {
+.card-container {
   height: 0;
   box-sizing: border-box;
-  }
+}
 
-  .share-btn {
+.share-btn {
   background: #eee;
-  }
+}
 
-  .card {
+.card {
   width: 100%;
   height: 0;
   box-sizing: border-box;
@@ -19,82 +19,109 @@ page {
   position: relative;
   overflow: hidden;
   /* text-align: center; */
-  }
+}
 
-  .area-box {
+.area-box {
   white-space: nowrap;
   word-break: break-all;
-  }
+  z-index: 111;
+}
 
-  .card-bgImg {
+.card-bgImg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  }
+}
 
-  .person {
+.person {
   padding: 20rpx;
-  }
+}
 
-  .dynamic-container {
+.dynamic-container {
   margin-top: -50rpx;
   position: relative;
   background-color: #fff;
   padding: 20rpx;
   border-radius: 20rpx;
-  }
+}
 
-  .dynamic-title image {
+.dynamic-title image {
   width: 30rpx;
   height: 30rpx;
   vertical-align: middle;
   margin-top: -4rpx;
-  }
+}
 
-  .catelog-title {
+.catelog-title {
   display: flex;
   position: relative;
   align-items: center;
   justify-content: space-between;
-  }
+}
 
-  .catelog-title .action {
+.catelog-title .action {
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 100%;
   padding-right: 30rpx;
-  }
+}
 
-  .title {
+.title {
-    font-size: 32rpx;
+  font-size: 30rpx;
   position: relative;
-    color: #fff;
+  color: #000;
-    border-top-right-radius: 20rpx;
-    border-top-left-radius: 20rpx;
-    padding-left: 15rpx;
-    background: #0054bd;
   display: inline-block;
-    padding: 25rpx 35rpx 20rpx;
+}
-  }
 
-  .intro-title image {
+.title text {
+  margin-left: 20rpx;
+}
+
+.column-box {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  width: 100%;
+}
+
+.column-box-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: #fff;
+  width: 100%;
+}
+
+.column-content {
+  display: flex;
+  flex-direction: column;
+  padding: 10rpx 20rpx 20rpx;
+  background-color: #fff;
+  border-radius: 10rpx;
+  width: 100%;
+  margin-top: 20rpx;
+  box-shadow: 0px 2px 2px #f0f0f0;
+  z-index: 2;
+}
+
+.intro-title image {
   width: 28rpx;
   height: 30rpx;
   vertical-align: middle;
   margin-top: -4px;
-  }
+}
 
-  .serve-title image {
+.serve-title image {
   width: 28rpx;
   height: 30rpx;
   vertical-align: middle;
   margin-top: -4px;
-  }
+}
 
-  .person-content {
+.person-content {
   padding: 20rpx;
   border-radius: 20rpx;
   background: #fff;
@@ -106,20 +133,20 @@ page {
   line-height: 40rpx;
   letter-spacing: 2rpx;
   position: relative;
-  }
+}
 
-  .company-title {
+.company-title {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ddd;
-  }
+}
 
-  .company-title image {
+.company-title image {
   width: 140rpx;
   height: 140rpx;
-  }
+}
 
-  .company-name {
+.company-name {
   width: 520rpx;
   height: 140rpx;
   display: flex;
@@ -128,47 +155,47 @@ page {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  }
+}
 
-  .company-content {
+.company-content {
   background: #fff;
   border-radius: 20rpx;
   padding: 20rpx;
   margin-top: -30rpx;
   position: relative;
-  }
+}
 
-  .company-content image {
+.company-content image {
   width: 100%;
   height: 300rpx;
   border-radius: 20rpx;
-  }
+}
 
-  .company .person-content {
+.company .person-content {
   margin-top: 0;
-  }
+}
 
-  .dynamic-title {
+.dynamic-title {
   width: 710rpx;
   margin: 0 auto;
   display: block;
-  }
+}
 
-  .dynamic-box {
+.dynamic-box {
   margin-bottom: 20rpx;
   background: #fff;
   border-radius: 20rpx;
   overflow: hidden;
   position: relative;
   height: 400rpx;
-  }
+}
 
-  .dynamic-box image {
+.dynamic-box image {
   width: 100%;
   height: 400rpx;
-  }
+}
 
-  .dynamic-text {
+.dynamic-text {
   position: absolute;
   left: 0;
   right: 0;
@@ -178,64 +205,64 @@ page {
   color: #fff;
   padding: 0 10rpx;
   font-size: 30rpx;
-  }
+}
 
-  .person-info {
+.person-info {
   display: flex;
   justify-content: space-between;
   padding-bottom: 20rpx;
   border-bottom: 1px solid #EEE;
-  }
+}
 
-  .avatar {
+.avatar {
   width: 120rpx;
   height: 120rpx;
   border-radius: 50%;
   overflow: hidden;
-  }
+}
 
-  .avatar image {
+.avatar image {
   width: 100%;
   height: 100%;
-  }
+}
 
-  .person-name {
+.person-name {
   width: 530rpx;
-  }
+}
 
-  .name {
+.name {
   font-size: 32rpx;
   margin: 15rpx 0 10rpx;
   color: #000;
-  }
+}
 
-  .time {
+.time {
   color: #b2b2b2;
-  }
+}
 
-  .dynamic-content {
+.dynamic-content {
   margin: 20rpx 0;
-  }
+}
 
-  .dynamic-img {
+.dynamic-img {
   position: relative;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  }
+}
 
-  .dynamic-img image {
+.dynamic-img image {
   width: 32%;
   margin-right: 2%;
   height: 160rpx;
   margin-bottom: 10rpx;
-  }
+}
 
-  .dynamic-img image:nth-child(3n) {
+.dynamic-img image:nth-child(3n) {
   margin-right: 0;
-  }
+}
 
-  .dynamic-img-text {
+.dynamic-img-text {
   position: absolute;
   left: 0;
   right: 0;
@@ -245,58 +272,58 @@ page {
   color: #fff;
   font-size: 32rpx;
   line-height: 70rpx;
-  }
+}
 
-  .dynamic-good {
+.dynamic-good {
   margin: 10rpx 0;
   display: flex;
   justify-content: space-between;
-  }
+}
 
-  .good-count {
+.good-count {
   color: #333;
   font-size: 28rpx;
-  }
+}
 
-  .good-btn image {
+.good-btn image {
   width: 40rpx;
   height: 40rpx;
   vertical-align: top;
-  }
+}
 
-  .dynamic-reply {
+.dynamic-reply {
   background: #eee;
   padding: 15rpx;
   margin-top: 15rpx;
-  }
+}
 
-  .reply {
+.reply {
   font-size: 32rpx;
   color: #000;
   margin-bottom: 5rpx;
-  }
+}
 
-  .reply-name {
+.reply-name {
   font-weight: bold;
   display: inline;
-  }
+}
 
-  .dynamic-reply-input {
+.dynamic-reply-input {
   margin-top: 10rpx;
-  }
+}
 
-  .dynamic-reply-input input {
+.dynamic-reply-input input {
   width: 100%;
   height: 60rpx;
   border-bottom: 1px solid #eee;
-  }
+}
 
-  .creat-card {
+.creat-card {
   position: fixed;
   right: 20rpx;
   bottom: 20rpx;
   padding: 20rpx;
-    background: #0054bd;
+  background: #E6B980;
   border-radius: 50%;
   box-sizing: border-box;
   align-items: center;
@@ -304,63 +331,64 @@ page {
   flex-direction: column;
   width: 140rpx;
   height: 140rpx;
-  }
+  z-index: 100;
+}
 
-  .creat-card image {
+.creat-card image {
   width: 80rpx;
   height: 60rpx;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  }
+}
 
-  .share-save {
+.share-save {
   text-align: center;
   display: flex;
   justify-content: space-between;
-  }
+}
 
-  .share-btn {
+.share-btn {
-    border: 1px solid #1296db;
+  border: 1px solid #E6B980;
   background: none;
   color: #1296db;
   font-weight: normal;
-  }
+}
 
-  .save-btn {
+.save-btn {
   border: 1px solid #1296db;
   background: #1296db;
   color: #fff;
   font-weight: normal;
-  }
+}
 
-  .bottom-btn {
+.bottom-btn {
   margin-top: 20rpx;
   padding: 0 20rpx;
   width: 100%;
   white-space: nowrap;
-  }
+}
 
-  .phone-box .icon {
+.phone-box .icon {
   width: 30rpx;
   height: 30rpx;
   vertical-align: top;
-  }
+}
 
-  .wechate-box .icon {
+.wechate-box .icon {
   width: 35rpx;
   height: 30rpx;
   vertical-align: top;
-  }
+}
 
-  .email-box .icon {
+.email-box .icon {
   width: 30rpx;
   height: 30rpx;
   vertical-align: top;
-  }
+}
 
-  .bottom-btn-box {
+.bottom-btn-box {
   display: inline-block;
   min-width: 32%;
   line-height: 30rpx;
@@ -369,171 +397,303 @@ page {
   border: 1px solid #DDD;
   border-radius: 10rpx;
   margin-right: 10rpx;
-  }
+}
 
-  .bottom-text {
+.bottom-text {
   margin-top: 10rpx;
-  }
+}
 
-  .top-box {
+.top-box {
   padding-bottom: 20rpx;
-    background: linear-gradient(to bottom, #eee, #fff)
+  background-color: #F7F7F7;
-  }
+}
 
-  .good {
+.good {
   display: flex;
   justify-content: space-between;
-    padding: 0 40rpx;
+  padding-left: 40rpx;
-  }
+  width: 100%;
+  margin-top: 40rpx;
+  padding-top: 40rpx;
+  padding-bottom: 30rpx;
+  background-color: #fff;
+}
 
-  .good-avatar,
+.good-avatar,
-  .good-click {
+.good-click {
   line-height: 45rpx;
   color: #333;
-  }
+}
 
-  .good-click {
+.good-click {
   display: flex;
-  }
+}
 
-  .view-count {
+.view-count {
   margin-right: 30rpx;
   padding-right: 30rpx;
   border-right: 1px solid #808080;
   color: #808080;
-  }
+  display: flex;
+  flex-direction: row;
+  font-size: 36rpx;
+}
 
-  .good-avatar image {
+.view-count-no {
+  margin-right: 30rpx;
+  padding-right: 30rpx;
+  color: #808080;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 36rpx;
+}
+
+.good-avatar image {
   width: 100%;
   height: 100%;
-  }
+}
 
-  .good-click image {
+.good-click image {
-    width: 45rpx;
+  width: 38rpx;
-    height: 45rpx;
+  height: 38rpx;
-    vertical-align: top;
+}
-  }
 
-  .view-count image {
+.view-count image {
-    height: 43rpx;
+  width: 32rpx;
-  }
+  height: 32rpx;
+}
 
-  .avatar-list {
+.view-count-no image {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.movie-item {
+  height: 280rpx;
+  width: 100%;
+  padding-bottom: 0px;
+}
+
+.image-32 {
+  width: 64rpx;
+  height: 64rpx;
+}
+
+.image-64 {
+  width: 128rpx;
+  height: 128rpx;
+}
+
+.avatar-list {
   width: 45rpx;
   height: 45rpx;
   margin-right: 10rpx;
   vertical-align: top;
   display: inline-block;
-  }
+}
 
-  .mid {
+.mid {
   display: flex;
-    background: #0054bd;
+  width: 95%;
-    /* border-top-left-radius: 80rpx; */
+  background: white;
-    /* border-top-right-radius: 80rpx; */
-    padding: 40rpx 0 80rpx;
-    /* margin-top: -20rpx; */
   position: relative;
-  }
+  margin-top: 5rpx;
+  padding-top: 20rpx;
+}
 
-  .mid-box {
+.mid-box {
   flex: 1;
+  width: 100%;
   display: flex;
   flex-direction: column;
-    align-items: center;
+  align-items: left;
-    justify-content: center;
+  justify-content: left;
-    border-right: 1px solid #2f82ea;
+  border: 2rpx solid #EAC390;
-    background: none;
+  border-radius: 10rpx;
+  background-color: white;
   font-weight: normal;
-    width: auto !important;
+  padding: 10rpx;
-    padding: 0 !important;
+}
-  }
 
-  .mid-box:last-child {
+/* .mid-box:nth-child(1) {
+ 
+} */
+
+.mid-box:nth-child(2) {
+  margin-left: 20rpx;
+}
+
+.mid-box:last-child {
   border: none;
-  }
+  margin-left: 20rpx;
+  border-radius: 10rpx;
+}
 
-  .mid-box image {
+.mid-box image {
-    width: 60rpx;
+  width: 48rpx;
-    height: 60rpx;
+  height: 48rpx;
-    margin-bottom: 20rpx;
+}
-  }
 
-  .mid-box-text {
+.mid-box-text {
-    font-size: 30rpx;
+  font-size: 28rpx;
-    color: #fff;
+  color: #000;
-  }
+  text-align: left;
+}
 
-  .mid-btn {
+.mid-box-text-white {
+  font-size: 28rpx;
+  color: #FFF;
+  text-align: left;
+}
+
+.mid-btn {
   position: relative;
-    margin-top: -60rpx;
+  margin-top: 20rpx;
   display: flex;
-    padding: 30rpx;
+  padding: 10rpx;
+  width: 95%;
+  border: 1rpx solid rgb(235, 235, 235);
+  border-radius: 15rpx;
   background: #fff;
-    border-top-left-radius: 20rpx;
+  box-shadow: 10rpx 10rpx 20rpx 20rpx #e4e4e426;
-    border-top-right-radius: 20rpx;
+  flex-wrap: nowrap;
-    flex-wrap: wrap;
+  flex-direction: column;
-    justify-content: space-between;
+  justify-content: center;
-  }
+}
 
-  .mid-btn-box {
+.mid-btn-box {
   flex-shrink: 0;
-    width: 49%;
-    margin-bottom: 20rpx;
   padding: 15rpx;
-    border-radius: 20rpx;
-    background: #eee;
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   box-sizing: border-box;
-  }
+}
 
-  .mid-btn-box:nth-child(3),
+.mid-btn-title {
-  .mid-btn-box:nth-child(4) {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex: 3;
+  align-items: center;
+}
+
+.mid-btn-title .image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.mid-btn-title text {
+  margin-left: 20rpx;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.mid-btn-box:nth-child(3),
+.mid-btn-box:nth-child(4) {
   margin-bottom: 0;
-  }
+}
 
-  .mid-btn-box image {
+.mid-btn-box image {
   width: 80rpx;
   height: 80rpx;
-  }
+}
 
-  .mid-btn-text {
+.mid-btn-text {
   width: 200rpx;
-  }
+}
 
-  .text-top {
+.text-top {
   line-height: 45rpx;
   font-size: 30rpx;
-    color: #333;
+  color: #000;
-  }
+}
 
-  .text-bottom {
+.text-bottom {
   font-size: 26rpx;
-    color: #808080;
+  color: #898989;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  }
+}
 
-  .bar-code {
+.bar-code {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.6);
-  }
+  z-index: 999;
+}
 
-  .bar-code image {
+.bar-code .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 96%;
   background: #fff;
-    width: 500rpx;
+  /* width: 500rpx;
-    height: 500rpx;
+  height: 500rpx; */
   border-radius: 10rpx;
-    padding: 10rpx;
+  padding: 20rpx;
-  }
+  min-width: 80%;
+  min-height: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.code-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #000;
+}
+
+.code-txt {
+  font-size: 32rpx;
+  color: #000;
+}
+
+.bar-code image {
+  width: 300rpx;
+  height: 300rpx;
+}
+
+.func-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10rpx;
+}
+
+.func-items {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10rpx;
+}
+
+.func-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.func-item image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.func-item text {
+  margin-left: 10rpx;
+}

vant/dist/cropper/index.js

@@ -0,0 +1,381 @@
+const defaultData = {
+    isShowCropper:false,
+    // 初始化的宽高
+    cropperInitW: 750,
+    cropperInitH: 750,
+    // 动态的宽高
+    cropperW: 750,
+    cropperH: 750,
+    // 动态的left top值
+    cropperL: 0,
+    cropperT: 0,
+
+    transL: 0,
+    transT: 0,
+
+    // 图片缩放值
+    scaleP: 0,
+    imageW: 0,
+    imageH: 0,
+
+    // 裁剪框 宽高
+    cutL: 0,
+    cutT: 0,
+    cutB: 0,
+    cutR: 0,
+
+    qualityWidth: '',
+    innerAspectRadio: 750 / wx.getSystemInfoSync().windowWidth,
+    
+    C_CONSTANTS:{
+        SCREEN_WIDTH : 750,
+        PAGE_X:0, // 手按下的x位置
+        PAGE_Y:0, // 手按下y的位置
+        PR : wx.getSystemInfoSync().pixelRatio, // dpi
+        T_PAGE_X:{}, // 手移动的时候x的位置
+        T_PAGE_Y:{}, // 手移动的时候Y的位置
+        CUT_L:0, // 初始化拖拽元素的left值
+        CUT_T:0, // 初始化拖拽元素的top值
+        CUT_R:0, // 初始化拖拽元素的
+        CUT_B:0, // 初始化拖拽元素的
+        CUT_W:0, // 初始化拖拽元素的宽度
+        CUT_H:0, //  初始化拖拽元素的高度
+        IMG_RATIO:0, // 图片比例
+        IMG_REAL_W:0, // 图片实际的宽度
+        IMG_REAL_H:0, // 图片实际的高度
+        IMG_TYPE:'',//图片的格式
+        DRAFG_MOVE_RATIO : 750 / wx.getSystemInfoSync().windowWidth //移动时候的比例
+    }
+};
+let data = {};
+
+try{
+    data = JSON.parse(JSON.stringify(defaultData));
+}catch(e){console.log(e)};
+
+Component({
+    properties: {
+        imageSrc:{
+            type:String,
+            value:'',
+            observer(newVal, oldVal) {
+                if(newVal !== oldVal){
+                    this.setData({
+                        isShowCropper:true
+                    },() => {
+                        this.loadImage();
+                    })
+                }
+                
+            }
+        },
+        isCircleCrop:{
+            type:Boolean,
+            value:false
+        },
+        enableScale:{
+            type:Boolean,
+            value:false
+        },
+        ratio:{
+            type:Number,
+            value:1
+        }
+    },
+    data,
+    ready(){
+        if(this.data.isCircleCrop){
+            //圆形裁剪 强制比例为1
+            this.setData({
+                ratio:1
+            })
+        }
+    },
+    methods: {
+        loadImage() {
+            let {ratio,imageSrc} = this.data;
+            let {IMG_REAL_W,IMG_REAL_H,IMG_RATIO,SCREEN_WIDTH,IMG_TYPE} = this.data.C_CONSTANTS;
+            wx.getImageInfo({
+                src: imageSrc,
+                success: res => {
+                    IMG_REAL_W = res.width;
+                    IMG_REAL_H = res.height;
+                    IMG_RATIO = IMG_REAL_W / IMG_REAL_H;
+                    IMG_TYPE = res.type === 'png' ? 'png' : 'jpg';
+                    // 根据图片的宽高显示不同的效果   保证图片可以正常显示
+                    let temp = {};
+                    let cropperData = {};
+                    if (IMG_RATIO >= 1) {
+                        cropperData = {
+                            cropperW: SCREEN_WIDTH,
+                            cropperH: SCREEN_WIDTH / IMG_RATIO,
+                            // 初始化left right
+                            cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
+                            cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2)
+                        }
+                        if(ratio > 1){
+                            temp = {
+                                cutL: (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2,
+                                cutT: (SCREEN_WIDTH / IMG_RATIO - SCREEN_WIDTH / IMG_RATIO / ratio ) / 2,
+                                cutR: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2 - SCREEN_WIDTH / IMG_RATIO,
+                                cutB: SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - SCREEN_WIDTH / IMG_RATIO / ratio ) / 2 - SCREEN_WIDTH / IMG_RATIO / ratio
+                            }
+                        }else{
+                            temp = {
+                                cutT:0,
+                                cutB:0,
+                                cutL:(SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO * ratio) / 2,
+                                cutR: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO * ratio) / 2 - SCREEN_WIDTH / IMG_RATIO * ratio
+                            }
+                        }
+                    } else {
+                        cropperData = {
+                            cropperW: SCREEN_WIDTH * IMG_RATIO,
+                            cropperH: SCREEN_WIDTH,
+                            // 初始化left right
+                            cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
+                            cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2)
+                        }
+                        if(ratio > 1){
+                            temp = {
+                                cutL:0,
+                                cutR:0,
+                                cutT: (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO / ratio) / 2,
+                                cutB: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO / ratio) / 2 - SCREEN_WIDTH * IMG_RATIO / ratio
+                            }
+                        }else{
+                            temp = {
+                                cutL: (SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO * ratio) / 2,
+                                cutR: SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO - SCREEN_WIDTH * IMG_RATIO * ratio) / 2 - SCREEN_WIDTH * IMG_RATIO * ratio,
+                                cutT: (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2,
+                                cutB: SCREEN_WIDTH - (SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2 - SCREEN_WIDTH * IMG_RATIO
+                            }
+    
+                        }
+                    }
+                    this.setData({
+                        C_CONSTANTS:Object.assign({},this.data.C_CONSTANTS,{
+                            IMG_REAL_W,
+                            IMG_REAL_H,
+                            IMG_RATIO,
+                            IMG_TYPE
+                        }),
+                        isShowCropper: true,
+                        // 图片缩放值
+                        scaleP: IMG_REAL_W / SCREEN_WIDTH,
+                        qualityWidth: IMG_REAL_W,
+                        innerAspectRadio: IMG_RATIO,
+                        ...temp,
+                        ...cropperData
+                    })
+                }
+            });
+            
+        },
+        contentStartMove(e) {
+            this.setData({
+                'C_CONSTANTS.PAGE_X':e.touches[0].pageX,
+                'C_CONSTANTS.PAGE_Y':e.touches[0].pageY
+            })
+        },
+        // 拖动时候触发的touchMove事件
+        contentMoveing(e) {
+            let {PAGE_X,PAGE_Y,DRAFG_MOVE_RATIO} = this.data.C_CONSTANTS;
+            let {cutL,cutR,cutT,cutB} = this.data;
+            let dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
+            let dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
+            // 左移
+            if (dragLengthX > 0) {
+                if (cutL - dragLengthX < 0) dragLengthX = cutL
+            } else {
+                if (cutR + dragLengthX < 0) dragLengthX = -cutR
+            }
+    
+            if (dragLengthY > 0) {
+                if (cutT - dragLengthY < 0) dragLengthY = cutT
+            } else {
+                if (cutB + dragLengthY < 0) dragLengthY = -cutB
+            }
+            this.setData({
+                cutL: cutL - dragLengthX,
+                cutT: cutT - dragLengthY,
+                cutR: cutR + dragLengthX,
+                cutB: cutB + dragLengthY,
+                'C_CONSTANTS.PAGE_X':e.touches[0].pageX,
+                'C_CONSTANTS.PAGE_Y':e.touches[0].pageY
+            });
+        },
+        // 设置大小的时候触发的touchStart事件
+        dragStart(e) {
+            let {cutL,cutR,cutT,cutB} = this.data;
+            this.setData({
+                C_CONSTANTS:Object.assign({},this.data.C_CONSTANTS,{
+                    T_PAGE_X : e.touches[0].pageX,
+                    T_PAGE_Y : e.touches[0].pageY,
+                    CUT_L : cutL,
+                    CUT_R : cutR,
+                    CUT_B : cutB,
+                    CUT_T : cutT
+                })
+            })
+            
+        },
+        // 设置大小的时候触发的touchMove事件
+        dragMove(e) {
+            let dragType = e.target.dataset.drag
+            let {ratio,cropperW,cropperH,cutL,cutT,cutR,cutB,enableScale} = this.data;
+            let {CUT_R,CUT_L,CUT_T,CUT_B,T_PAGE_X,T_PAGE_Y,DRAFG_MOVE_RATIO} = this.data.C_CONSTANTS;
+            let dragLength;
+            switch (dragType) {
+                case 'right':
+                    dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
+                    if (CUT_R + dragLength < 0) dragLength = -CUT_R
+                    cutR = CUT_R + dragLength;
+                    if(enableScale){
+                        cutT = CUT_T + dragLength / ratio;
+                    }
+                    if(cutR < 0 || cutT < 0 || cutT > cropperH || cutR > cropperW) return;
+                    break;
+                case 'left':
+                    dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
+                    if (CUT_L - dragLength < 0) dragLength = CUT_L
+                    if ((CUT_L - dragLength) > (this.data.cropperW - this.data.cutR)) dragLength = CUT_L - (this.data.cropperW - this.data.cutR)
+                    cutL = CUT_L - dragLength;
+                    if(enableScale){
+                        cutT = CUT_T - dragLength / ratio;
+                    }
+                    if(cutL < 0 || cutT < 0 || cutT > cropperH || cutL > cropperW) return;
+                    break;
+                case 'top':
+                    dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
+                    if (CUT_T - dragLength < 0) dragLength = CUT_T
+                    if ((CUT_T - dragLength) > (this.data.cropperH - this.data.cutB)) dragLength = CUT_T - (this.data.cropperH - this.data.cutB)
+                    cutT = CUT_T - dragLength;
+                    if(enableScale){
+                        cutR = CUT_R - dragLength * ratio;
+                    }
+                    break;
+                case 'bottom':
+                    dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
+                    if (CUT_B + dragLength < 0) dragLength = -CUT_B
+                    cutB = CUT_B + dragLength;
+                    if(enableScale){
+                        cutR = CUT_R + dragLength * ratio;
+                    }
+                    if(cutR < 0 || cutT < 0 || cutT > cropperH || cutR > cropperW) return;
+                    break;
+                default:'';
+            }
+            this.setData({
+                cutL,
+                cutT,
+                cutR,
+                cutB
+            });
+        },
+        contentTouchEnd(){},  
+        // 获取图片
+        confirmCropper() {
+            const {isCircleCrop} = this.data;;
+            if(isCircleCrop){
+                this.circleCrop()
+            }else{
+                this.normalCropper();
+            }
+        },
+
+        normalCropper(){
+            let {imageSrc,cropperW,cropperH,cutL,cutT,cutR,cutB} = this.data;
+            let {IMG_REAL_W,IMG_REAL_H,IMG_TYPE} = this.data.C_CONSTANTS;
+            // 将图片写入画布
+            const ctx = wx.createCanvasContext('cropper',this)
+            ctx.drawImage(imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
+            ctx.draw(true, () => {
+                // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
+                let canvasW = ((cropperW - cutL - cutR) / cropperW) * IMG_REAL_W
+                let canvasH = ((cropperH - cutT - cutB) / cropperH) * IMG_REAL_H
+                let canvasL = (cutL / cropperW) * IMG_REAL_W
+                let canvasT = (cutT / cropperH) * IMG_REAL_H
+                wx.canvasToTempFilePath({
+                    x: canvasL,
+                    y: canvasT,
+                    width: canvasW,
+                    height: canvasH,
+                    destWidth: canvasW,
+                    destHeight: canvasH,
+                    fileType:IMG_TYPE || 'jpg',
+                    canvasId: 'cropper',
+                    success: (res) => {
+                        //图片裁剪成功
+                        this.cancelCropper();
+                        this.triggerEvent('cropperDone', {
+                            src:res.tempFilePath,
+                            cropperData:{
+                                x: canvasL,
+                                y: canvasT,
+                                width: canvasW,
+                                height: canvasH
+                            }
+                        })
+                    },
+                    fail:err =>{
+                        this.triggerEvent('cropperFail',err)
+                    }
+                },this);
+            })
+        },
+
+        circleCrop(){
+            let {imageSrc,cropperW,cropperH,cutL,cutT,cutR,cutB} = this.data;
+            let {IMG_REAL_W,IMG_REAL_H,IMG_TYPE} = this.data.C_CONSTANTS;
+            // 将图片写入画布
+            const ctx = wx.createCanvasContext('cropper',this)
+            let canvasW = ((cropperW - cutL - cutR) / cropperW) * IMG_REAL_W
+            let canvasL = (cutL / cropperW) * IMG_REAL_W
+            let canvasT = (cutT / cropperH) * IMG_REAL_H
+            
+            this.setData({
+                canvasW:canvasW,
+                canvasH:canvasW
+            },() => {
+                ctx.arc(canvasW / 2,canvasW / 2,canvasW / 2,0,2 * Math.PI);
+                ctx.clip();
+                ctx.drawImage(imageSrc, canvasL, canvasT, canvasW, canvasW,0,0,canvasW,canvasW);
+                ctx.draw(true, () => {
+                    wx.canvasToTempFilePath({
+                        fileType:IMG_TYPE || 'jpg',
+                        canvasId: 'cropper',
+                        success: (res) => {
+                            //图片裁剪成功
+                            this.cancelCropper();
+                            this.triggerEvent('cropperDone', {
+                                src:res.tempFilePath,
+                                cropperData:{
+                                    x: canvasL,
+                                    y: canvasT,
+                                    width: canvasW,
+                                    height: canvasW
+                                }
+                            })
+                        },
+                        fail:err =>{
+                            this.triggerEvent('cropperFail',err)
+                        }
+                    },this);
+                })
+            })
+        },
+
+        cancelCropper(){
+            let originData = {}
+            try{
+                originData = JSON.parse(JSON.stringify(defaultData))
+            }catch(e){};
+
+            this.setData({
+                ...originData
+            });
+            this.triggerEvent('cropperCancel')
+        }
+    }
+})

vant/dist/cropper/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

vant/dist/cropper/index.wxml

@@ -0,0 +1,44 @@
+<view class="wx-cropper-info" wx:if="{{isShowCropper}}">
+    <view class='cropper-content'>
+        <!-- {{cropperInitH}}rpx -->
+        <view class="wx-corpper" style="width:{{cropperInitW}}rpx;height:85%;background:#000;display: flex;justify-content: center;align-items: center;">
+            <!-- left:{{cropperL}}rpx;top:{{cropperT}}rpx -->
+            <view class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;">
+                <image class="img" src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
+                <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing"
+                    bindtouchend="contentTouchEnd" style="left:{{cutL}}rpx;top:{{cutT}}rpx;right:{{cutR}}rpx;bottom:{{cutB}}rpx">
+                    <view class="wx-cropper-view-box">
+                        <view class="wx-cropper-dashed-h"></view>
+                        <view class="wx-cropper-dashed-v"></view>
+                        <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
+                        <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove" catchtouchend="dragEnd"></view>
+                        <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
+                        <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart"
+                            catchtouchmove="dragMove"></view>
+                        <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class='cropper-config'>
+        <button type="primary reverse" class="btn" bindtap="cancelCropper" style='margin-top: 30rpx;'> 取消 </button>
+        <button type="primary" class="cropper-confirm btn" bindtap="confirmCropper" style='margin-top: 30rpx;'> 确认 </button>
+    </view>
+    <canvas wx:if="{{!isCircleCrop}}" canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{qualityWidth}}px;height:{{qualityWidth/innerAspectRadio}}px;top:-9999px;left:-9999px;"></canvas>
+    <canvas wx:else canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{canvasW}}px;height:{{canvasH}}px;top:-9999px;left:-9999px;"></canvas>
+</view>
+

vant/dist/cropper/index.wxss

@@ -0,0 +1,296 @@
+/* pages/wx-cropper/index.wxss */
+.wx-cropper-info {
+    position: fixed;
+    top: 140rpx;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    z-index: 10000;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    background: #000;
+}
+
+.cropper-config {
+    display: flex;
+    position: fixed;
+    width: 100%;
+    bottom: 20rpx;
+}
+
+.cropper-config .btn {
+    min-width: 300rpx;
+}
+
+.cropper-config .cropper-confirm {
+    background: #fac208;
+}
+
+.cropper-content {
+    min-height: 750rpx;
+    width: 100%;
+    height: 100%;
+}
+
+.wx-corpper {
+    position: relative;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    box-sizing: border-box;
+}
+
+.wx-corpper-content {
+    position: relative;
+}
+
+.wx-corpper-content .img {
+    display: block;
+    width: 100%;
+    min-width: 0 !important;
+    max-width: none !important;
+    height: 100%;
+    min-height: 0 !important;
+    max-height: none !important;
+    image-orientation: 0deg !important;
+    margin: 0 auto;
+}
+
+/* 移动图片效果 */
+.wx-cropper-drag-box {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    cursor: move;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 1;
+}
+
+/* 内部的信息 */
+.wx-corpper-crop-box {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.3);
+    z-index: 2;
+}
+
+.wx-corpper-crop-box .wx-cropper-view-box {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    outline: 1px solid #69f;
+    outline-color: rgba(102, 153, 255, .75)
+}
+
+/* 横向虚线 */
+.wx-cropper-dashed-h {
+    position: absolute;
+    top: 33.33333333%;
+    left: 0;
+    width: 100%;
+    height: 33.33333333%;
+    border-top: 1px dashed rgba(255, 255, 255, 0.5);
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
+}
+
+/* 纵向虚线 */
+.wx-cropper-dashed-v {
+    position: absolute;
+    left: 33.33333333%;
+    top: 0;
+    width: 33.33333333%;
+    height: 100%;
+    border-left: 1px dashed rgba(255, 255, 255, 0.5);
+    border-right: 1px dashed rgba(255, 255, 255, 0.5);
+}
+
+/* 四个方向的线  为了之后的拖动事件*/
+.wx-cropper-line-t {
+    position: absolute;
+    display: block;
+    width: 100%;
+    background-color: #69f;
+    top: 0;
+    left: 0;
+    height: 1px;
+    opacity: 0.1;
+    cursor: n-resize;
+}
+
+.wx-cropper-line-t::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0rpx;
+    width: 100%;
+    -webkit-transform: translate3d(0, -50%, 0);
+    transform: translate3d(0, -50%, 0);
+    bottom: 0;
+    height: 41rpx;
+    background: transparent;
+    z-index: 11;
+}
+
+.wx-cropper-line-r {
+    position: absolute;
+    display: block;
+    background-color: #69f;
+    top: 0;
+    right: 0px;
+    width: 1px;
+    opacity: 0.1;
+    height: 100%;
+    cursor: e-resize;
+}
+
+.wx-cropper-line-r::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 41rpx;
+    -webkit-transform: translate3d(-50%, 0, 0);
+    transform: translate3d(-50%, 0, 0);
+    bottom: 0;
+    height: 100%;
+    background: transparent;
+    z-index: 11;
+}
+
+.wx-cropper-line-b {
+    position: absolute;
+    display: block;
+    width: 100%;
+    background-color: #69f;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    opacity: 0.1;
+    cursor: s-resize;
+}
+
+.wx-cropper-line-b::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0rpx;
+    width: 100%;
+    -webkit-transform: translate3d(0, -50%, 0);
+    transform: translate3d(0, -50%, 0);
+    bottom: 0;
+    height: 41rpx;
+    background: transparent;
+    z-index: 11;
+}
+
+.wx-cropper-line-l {
+    position: absolute;
+    display: block;
+    background-color: #69f;
+    top: 0;
+    left: 0;
+    width: 1px;
+    opacity: 0.1;
+    height: 100%;
+    cursor: w-resize;
+}
+
+.wx-cropper-line-l::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 41rpx;
+    -webkit-transform: translate3d(-50%, 0, 0);
+    transform: translate3d(-50%, 0, 0);
+    bottom: 0;
+    height: 100%;
+    background: transparent;
+    z-index: 11;
+}
+
+.wx-cropper-point {
+    width: 5px;
+    height: 5px;
+    background-color: #69f;
+    opacity: .75;
+    position: absolute;
+    z-index: 3;
+}
+
+.point-t {
+    top: -3px;
+    left: 50%;
+    margin-left: -3px;
+    cursor: n-resize;
+}
+
+.point-tr {
+    top: -3px;
+    left: 100%;
+    margin-left: -3px;
+    cursor: n-resize;
+}
+
+.point-r {
+    top: 50%;
+    left: 100%;
+    margin-left: -3px;
+    margin-top: -3px;
+    cursor: n-resize;
+}
+
+.point-rb {
+    left: 100%;
+    top: 100%;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
+    cursor: n-resize;
+    /* width: 24rpx; */
+    /* height: 24rpx; */
+    background-color: #69f;
+    position: absolute;
+    z-index: 1112;
+    opacity: 1;
+}
+
+.point-b {
+    left: 50%;
+    top: 100%;
+    margin-left: -3px;
+    margin-top: -3px;
+    cursor: n-resize;
+}
+
+.point-bl {
+    left: 0%;
+    top: 100%;
+    margin-left: -3px;
+    margin-top: -3px;
+    cursor: n-resize;
+}
+
+.point-l {
+    left: 0%;
+    top: 50%;
+    margin-left: -3px;
+    margin-top: -3px;
+    cursor: n-resize;
+}
+
+.point-lt {
+    left: 0%;
+    top: 0%;
+    margin-left: -3px;
+    margin-top: -3px;
+    cursor: n-resize;
+}