添加图片的操作

app.js

@@ -57,6 +57,7 @@ App({
                   that.globalData.isNewUser = false;//不是新用户
                   that.globalData.userRole = res.data.data.userRole;
                   that.globalData.userInfo.avatarUrl = res.data.data.icon;
+                  that.globalData.user_id = res.data.data.user_id;
 
                   var name = res.data.data.name;
                   name = name.replace(/\?/g, '');
@@ -131,12 +132,14 @@ App({
     un_id:null,
     open_id: null,
     openid : null,
+    user_id:null,// 用户id
     userRole : '',
     isNewUser : '',
     fromUserId : '',//分享者的id
     fromUserRole : '',//分享者的role
     //servsers: "https://52yqf.cn/",
-    servsers: "https://www.daliangzao.net/",//正式库
+    // servsers: "https://www.daliangzao.net/",//正式库
+    servsers: "https://dlz.info666.com/",//测试域名库
     //servsers: "https://tt.daliangzao.net/",//测试库
     appid: 'wxf9a0ddcb8c70b939',//appid
     secret: 'a009cb3e46c8ecef9c54a50522f11823',//secret

components/component-made/made-solid.wxss

@@ -10,7 +10,7 @@
 .solid{
   width:270rpx;
   height:270rpx;
-  border:1rpx dashed #fff;
+  border:2rpx dashed #fff;
   margin:0 auto;
   position:absolute;
   top:50rpx;

customized/pages/made/madeFont/madeFont.js

@@ -57,7 +57,9 @@ Page({
   onReady: function () {
     let that = this;
     that.changeCupImg('1');
-    this.animation = wx.createAnimation()
+    that.animation = wx.createAnimation({
+      timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
+    })
   },
 
   /**

customized/pages/made/madeFont/madeFont.wxml

@@ -10,7 +10,6 @@
         <view class='font-content' style='top:{{touch.y}}px;left:{{touch.x}}px'>
           <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='fontDelete'></view>
           <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">{{touch.fontContent}}</view>
-          <view class='iconfont icon-fangda c-white icon-rotate' touchstart="touchstart" ></view>
         </view>
       </view>
     </made-solid>

customized/pages/made/madeFont/madeFont.wxss

@@ -87,7 +87,7 @@ page{
   margin:50rpx auto;
   text-align:center;
   background:none;
-  border:1rpx dashed #fff;
+  border:2rpx dashed #fff;
   color:#fff;
   font-size:30rpx;
   font-weight: bold;

customized/pages/made/madeImg/madeImg.js

@@ -1,25 +1,75 @@
 // pages/customized/made/madeImg/madeImg.js
+let app = getApp();
+let host = app.globalData.servsers; // 请求的url
+let userid = app.globalData.user_id; //用户的userid
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    dataPositionObj: { //正面数据
+      top: '156rpx',
+      left: '286rpx',
+      width: '',
+      height: '',
+      
+    },
+    propSize: {
+      top: '8cm',
+      right: '8cm',
+      bottom: '8cm',
+      left: '8cm',
+    },
+
+    isActive: '1', // 默认是正面
+    obverseImgObject: {
+      '1': '/customized/images/customized/cup_black_big.png',/*正面 */
+      '2': '/customized/images/customized/cup_black_side.png',/*侧面面 */
+      '3': '/customized/images/customized/cup_black_handle.png',/*手柄 */
+      '4': '/customized/images/customized/cup_black_bottom.png',/*底部 */
+    },
+    fontContent: '可定制区域',
+    madeImg: null, // 定制图 
+    madeStatic: false, // 定制状态，表示是否已经定制了,false 表示没有定制
+    animationData: {},//旋转动画
+    imageArray:[
+      {
+        id:1,
+        src:'/customized/images/customized/cover-img.png'
+      }
+    ],//请求数据后的图片列表
+    imageId: null, // 用户选中图片的id
+    imageSrc:null, // 选中图片后的路径
+    touch:{
+      src: null,
+      x:30,
+      y:30,
+      clientX:0,
+      clientY:0,
+      width:null, // 图片的宽度
+      height:null,
+      scale:1, // 图片宽高比例
+      angle: 0, // 旋转度数
+    }
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
-
+    let that = this;
+    
+    that.animation = wx.createAnimation({
+      timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
+    })
   },
 
   /**
@@ -62,5 +112,105 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+  // touch 事件
+  fontTouchstart(e) {
+    //1.获取鼠标点击下去的
+    this.setData({
+      "touch.clientX": e.touches[0].clientX - this.data.touch.x,
+      "touch.clientY": e.touches[0].clientY - this.data.touch.y
+    });
+    console.log(this.data.touch, "touch")
+  },
+  fontTouchmove(e) {
+    // 鼠标移动的位置
+    this.setData({
+      "touch.x": e.changedTouches[0].clientX - this.data.touch.clientX,
+      "touch.y": e.changedTouches[0].clientY - this.data.touch.clientY
+    });
+
+    // console.log(this.data.touch)
+  },
+  imgDelete(){ // 图片删除
+    let that = this;
+    that.setData({
+      'touch.src': null,
+      madeStatic: false, // 表示已经有图片
+    })
+  },
+  imgEnlarge(e){
+    let that = this;
+    console.log(e.detail.value,'eee')
+    that.setData({
+      'touch.width': e.detail.value,
+      'touch.height': e.detail.value/that.data.touch.scale
+    })
+  },
+  imgRotate(e) { // 旋转
+    this.animation.rotate(e.detail.value).step();
+    this.setData({
+      animationData: this.animation.export(),
+      'touch.angle': e.detail.value
+    })
+  },
+  uploadImg(){
+    console.log('点击上传图片');
+    wx.chooseImage({
+      success(res) {
+        const tempFilePaths = res.tempFilePaths
+        wx.uploadFile({
+          url: host + '/fileUpload', // 仅为示例，非真实的接口地址
+          filePath: tempFilePaths[0],
+          name: 'file',
+          formData: {
+            file: tempFilePaths[0],
+            userid:userid,
+          },
+          success(res) {
+            console.log(res)
+          }
+        })
+      }
+    })
+  },
+  selectImgBtn(e){
+    console.log('选中图片', e.currentTarget.dataset.id);
+    this.setData({
+      imageId: e.currentTarget.dataset.id,
+      imageSrc: e.currentTarget.dataset.src
+    })
+    // 'touch.src': e.currentTarget.dataset.src,
+      // madeStatic: true, // 表示已经有图片
+    // this.getScale(this, e.currentTarget.dataset.src);
+  },
+  getScale(that,src){ // 获取图片的比例
+    wx.getImageInfo({
+      src: src,
+      success: function (res) {
+        console.log(res, "fff")
+        that.setData({
+          'touch.width': res.width,
+          'touch.height': res.height,
+          'touch.scale': res.width / res.height, // 宽高比例
+        })
+        console.log(that.data.touch)
+      }
+    })
+  },
+  addImg(){ // 添加图片
+    let that = this;
+    if (that.data.imageSrc){
+      that.setData({
+        'touch.src': that.data.imageSrc,
+        madeStatic: true, // 表示已经有图片
+      })
+      that.getScale(that, that.data.imageSrc)
+    } else {
+      wx.showToast({
+        title: '您还没有选中图片',
+        icon: 'none'
+      })
+    }
+    
   }
 })

customized/pages/made/madeImg/madeImg.json

@@ -1,3 +1,7 @@
 {
-  "usingComponents": {}
+  "navigationBarTitleText": "定制",
+  "backgroundColor": "#fff",
+  "usingComponents": {
+    "made-solid": "/components/component-made/made-solid"
+  }
 }

customized/pages/made/madeImg/madeImg.wxml

@@ -1,2 +1,60 @@
-<!--pages/customized/made/madeImg/madeImg.wxml-->
-<text>pages/customized/made/madeImg/madeImg.wxml</text>
+<view class='container'>
+  <view class='made-content'>
+    <view class='made-img-box'>
+      <image class='made-image' src='{{obverseImgObject[isActive]}}'></image>
+      <made-solid prop-position="{{dataPositionObj}}" prop-size="{{propSize}}">
+        <view class='f-box f-align-items-center f-justify-content-center made-prompt' wx:if="{{!madeStatic}}">{{fontContent}}</view>
+        <view wx:else class='edit-content' style='top:{{touch.y}}px;left:{{touch.x}}px'>
+          <view class='iconfont icon-guanbi1 c-white icon-close' bindtap='imgDelete'></view>
+          <view bindtouchstart="fontTouchstart" animation="{{animationData}}" bindtouchmove="fontTouchmove" bindtouchend="fontTouchend">
+            <image src="{{touch.src}}" mode="aspectFit" style='width:{{touch.width}}rpx;height:{{touch.height}}rpx'></image>
+          </view>
+        </view>
+      </made-solid>
+    </view>
+  </view>
+  <!-- 上传后的图片 -->
+  <view class='upload-box'>
+    <view class='f-box'>
+      <!-- <view class='upload-list'><button hover-class="none" class='upload-btn f-box f-align-items-center'>点击上传图片</button></view> -->
+      <scroll-view class="scroll-view_H f-box" scroll-x style="width: 100%">
+        <view wx:for="{{imageArray}}" wx:for-index="idx" wx:for-item="itemName" class='scroll-item {{itemName.id === imageId ? "active" : ""}}'><image src="{{itemName.src}}" data-id='{{itemName.id}}' data-src='{{itemName.src}}' mode="aspectFill" bindtap='selectImgBtn'></image></view>
+      </scroll-view>
+    </view>
+  </view>
+
+<!-- slider -->
+<view class='slider-box' wx:if="{{madeStatic}}">
+<!-- 大小 -->
+  <view class='f-box f-align-items-center mar-l20 mar-r20'>
+    <view class='f-s30'>放大</view>
+    <view class="body-view f-item">
+      <slider bindchanging="imgEnlarge" block-color="#00af66" block-size="16" min="20" max="1000" value='{{touch.width}}' show-value/>
+    </view>
+  </view>
+  <view class='f-box f-align-items-center mar-l20 mar-r20'>
+    <!-- 度数 -->
+    <view class='f-s30'>旋转</view>
+    <view class="body-view f-item">
+      <slider bindchanging="imgRotate" block-color="#00af66" block-size="16" min="0" max="360" value='{{touch.angle}}' show-value/>
+    </view>
+  </view>
+  
+</view>
+
+  <view class='public-prompt'>该预览为仿真效果图，具体请以实物为准</view>
+  <view class='footer f-box'>
+    <view class="f-box f-align-items-center f-justify-content-center footer-icon">
+      <block>
+        <icon class='f-box' type="clear" />
+      </block>
+    </view>
+    <view class='f-item footer-upload-btn' bindtap='uploadImg'>上传图片</view>
+    <view class='f-item footer-add-btn' bindtap='addImg'>添加图片</view>
+    <view class="f-box f-align-items-center footer-icon f-justify-content-center">
+      <block>
+        <icon class='f-box' type="success"/>
+      </block>
+    </view>
+  </view>
+</view>

customized/pages/made/madeImg/madeImg.wxss

@@ -1 +1,110 @@
-/* pages/customized/made/madeImg/madeImg.wxss */
+page{
+  background:#fff;
+}
+
+.made-img-box{
+  position:relative;
+  margin-top:60rpx;
+}
+.made-image {
+  width:100%;
+  height:588rpx;
+}
+.made-prompt{
+  width:inherit;
+  height:inherit;
+}
+.made-box{
+  width:270rpx;
+  height:270rpx;
+  padding:1rpx;
+  margin:0 auto;
+}
+.upload-box{
+  margin-bottom:200rpx;
+}
+.upload-list{
+  width:180rpx;
+  height:180rpx;
+  border:2rpx solid #e0e0e0;
+  margin:0 10rpx;
+}
+.upload-btn{
+  width:180rpx;
+  height:180rpx;
+  line-height:50rpx;
+  background:none;
+  font-size:30rpx;
+}
+.upload-btn::after{
+  border:none;
+  border-radius:none;
+}
+.upload-box{
+  margin:50rpx 30rpx;
+}
+
+.edit-content{
+  display: inline-block;
+  position:relative;
+}
+.edit-content .iconfont{
+  position:absolute;
+  font-size:60rpx;
+  z-index:10;
+}
+.icon-close{
+  top:-50rpx;
+  left:-50rpx;
+}
+.footer{
+  position:fixed;
+  bottom:0;
+  width:100%;
+  z-index:10;
+  line-height:92rpx;
+  background:#fff;
+  border-top:1rpx solid #dcdcdc;
+  text-align: center;
+  color:#666;
+  font-size:30rpx;
+  cursor: pointer;
+}
+.footer-icon{
+  width:120rpx;
+}
+.footer-add-btn{
+  background:#00af66;
+  color:#fff;
+}
+.footer-upload-btn{
+  background:#f57b32;
+  color:#fff;
+}
+.scroll-view_H{
+  white-space: nowrap;
+}
+.scroll-item{
+  display:inline-block;
+  width:180rpx;
+  height:180rpx;
+  border:2rpx solid #e0e0e0;
+  margin:0 10rpx;
+}
+.scroll-item.active{
+  border-color:#00af66;
+}
+.scroll-item image{
+  width:180rpx;
+  height:180rpx;
+}
+.slider-box{
+  /* padding:50rpx 0;
+  position:fixed;
+  background:rgba(0,0,0,0.8);
+  bottom:0;
+  z-index:20;
+  width:100%;
+  color:#fff; */
+  margin-bottom:180rpx;
+}

style/customized.wxss

@@ -133,4 +133,5 @@
   font-size:24rpx;
   position:fixed;
   bottom: 92rpx;
+  z-index:10;
 }