小程序圖片加水印實現代碼，帶效果圖

效果圖：

本文有核心代碼和完整代碼，完整代碼是上傳用戶的個人信息到雲數據庫，包括表單，圖片上傳，多圖上傳到雲數據庫。

實現核心代碼

				<view class="mg_bo">
					<view class="text mg_bot">身份證正面照片：
					</view>
					<view class="text_">上傳自動加水印</view>
					<view class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" wx:if="{{zhengmian}}">
						<image class="img" src="{{zhengmian}}"></image>
					</view>
					<image wx:else class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" src="/img/zhengmian.jpg"></image>
				</view>

<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;visibility:hidden;" canvas-id="myCanvas"></canvas>

  zhengmian_img() {
    let that = this
    var ctx = wx.createCanvasContext('myCanvas')
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        //獲取圖片基本信息
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            var width = res.width
            var height = res.height
            //獲取屏幕寬度
            let screenWidth = wx.getSystemInfoSync().windowWidth
            //處理一下圖片的寬高的比例
            if (width >= height) {
              if (width > screenWidth) {
                width = screenWidth
              }
              height = height / res.width * width
            } else {
              if (width > screenWidth) {
                width = screenWidth
              }
              if (height > 400) {
                height = 400
                width = res.width / res.height * height
              } else {
                height = height / res.width * width
              }
            }
            that.setData({
              imageWidth: width,
              imageHeight: height,
            })
            ctx.drawImage(res.path, 0, 0, width, height)
            ctx.rotate(20 * Math.PI / 180)
            for (let j = 1; j < 12; j++) {
              ctx.beginPath()
              ctx.setFontSize(14)
              ctx.setFillStyle('white')
              ctx.fillText('身份證水印', 0, 50 * j)
              for (let i = 1; i < 12; i++) {
                ctx.beginPath()
                ctx.setFontSize(14)
                ctx.setFillStyle('white')
                ctx.fillText("身份證水印", (15 + (14 - 1) * "身份證水印".length) * i, 50 * j)
              }
            }
            ctx.draw(false, () => {
              //生成圖片
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function (res) {
                  console.log("canvas可以生成圖片")
                  console.log(res.tempFilePath, 'canvas圖片地址');

                  // tempFilePath可以作爲img標籤的src屬性顯示圖片
                  console.log('選擇圖片', res)
                  const tempFilePaths = res.tempFilePath
                  wx.cloud.uploadFile({
                    cloudPath: Date.parse(new Date()) + "",
                    filePath: tempFilePaths,
                    success: res => {
                      console.log('上傳成功', res)
                      let imgUrl = res.fileID
                      that.setData({
                        zhengmian: imgUrl
                      })
                    },
                    fail: err => {
                      console.log('上傳失敗', err)
                    }
                  })
                }
              })
            })

          }
        })
      }
    })
  },

實現完整頁面代碼：

<form bindsubmit='formsubmit'>
	<view>
		<image class="top" mode="widthFix" src="/img/IMG1.png"></image>
		<view class="info">

			<view>
				<view class="title">{{page_type?'信息填寫':'編輯信息'}}</view>
				<block wx:for="{{list}}" wx:key="idx">
					<view class="mg_bo">
						<view class="text">{{item.text}}：
							<text style="color:red">*</text>
						</view>
						<view class="text_">{{item.text_}}</view>
						<input name="{{item.name}}" value="{{item.value}}" data-title="{{item.text}}" data-type='0'></input>
					</view>
				</block>
			</view>
			<view>
				<view class="title">以下信息對外公開，填寫時注意保護身份證號碼、住址等隱私信息</view>
				<view class="mg_bo">
					<view class="text mg_bot">暱稱：
						<text style="color:red">*</text>
					</view>
					<input name="nicheng" value="{{nicheng}}"></input>
				</view>
				<view class="mg_bo">
					<view class="text mg_bot">單選：
						<text style="color:red">*</text>
					</view>
					<view class="">
						<radio-group bindchange="radioChange" class="flexRow ">

							<view wx:for="{{sex_list}}" wx:key="idx" style="margin-right: 40rpx;" class="weui-cell__hd">
								<radio value="{{item.name}}" checked="true" />{{item.name}}
							</view>
						</radio-group>
					</view>
				</view>
				<view class="mg_bo">
					<view class="text mg_bot">封面頭像：
					</view>
					<view class="text_">支持 jpg, png, gif, bmp, psd, tiff 等圖片格式</view>
					<view class="img_" bindtap="hande_img" wx:if="{{hande}}">
						<image class="img" src="{{hande}}"></image>
					</view>
					<view class="img_" bindtap="hande_img" wx:else>+ </view>
				</view>
				<view class="mg_bo">
					<view class="text mg_bot">生活照片：
					</view>
					<view class="text_">支持 jpg, png, gif, bmp, psd, tiff 等圖片格式(建議上傳多張，不要過度美顏哦)</view>

					<view class="img_" bindtap="live_phone" wx:if="{{live_phone.length==0}}">+ </view>
					<block wx:else>
						<view class="img_" bindtap="live_phone" wx:for="{{live_phone}}">
							<image class="img" src="{{item}}"></image>
						</view>
					</block>
				</view>
				
				<view class="mg_bo">
					<view class="text mg_bot">身份證正面照片：
					</view>
					<view class="text_">上傳自動加水印</view>
					<view class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" wx:if="{{zhengmian}}">
						<image class="img" src="{{zhengmian}}"></image>
					</view>
					<image wx:else class="img_ img_2" mode="widthFix" bindtap="zhengmian_img" src="/img/zhengmian.jpg"></image>
				</view>
				
				<view class="mg_bo">
					<view class="text mg_bot">身份證反面照片：
					</view>
					<view class="text_">上傳自動加水印</view>
					<view class="img_ img_2" bindtap="fanmian_img" wx:if="{{fanmian}}">
						<image class="img" mode="widthFix" src="{{fanmian}}"></image>
					</view>
					<image wx:else class="img_ img_2" mode="widthFix" bindtap="fanmian_img" src="/img/fanmian.jpg"></image>
				</view>
				<view class="mg_bo">
					<view class="text mg_bot">籍貫：
					</view>
					<picker mode="region" bindchange="bindRegionChange1" value="{{region1}}">
						<view class="picker">
							當前選擇：{{region1[0]}}，{{region1[1]}}，{{region1[2]}}
						</view>
					</picker>
				</view>
				<view class="mg_bo">
					<view class="text mg_bot">所在地區：
						<view class="text_">同區域的小夥伴配對成功的概率大哦</view>
					</view>
					<picker mode="region" bindchange="bindRegionChange2" value="{{region2}}">
						<view class="picker">
							當前選擇：{{region2[0]}}，{{region2[1]}}，{{region2[2]}}
						</view>
					</picker>
				</view>
				<view class="itemaaaa">
					<view class="mg_bo flexRow">
						<view class="text">身高</view>
						<input name="shengao" value="{{shengao}}" class="bt_input"></input>
						<text>cm</text>
					</view>
					<view class="mg_bo flexRow">
						<view class="text">體重</view>
						<input name="tizhong" value="{{tizhong}}" class="bt_input"></input>
						<text>kg</text>
					</view>
					<view class="mg_bo flexRow">
						<view class="text">年齡</view>
						<input name="age" value="{{age}}" class="bt_input"></input>
						<text>歲</text>
					</view>
					<view class="mg_bo flexRow">
						<view class="text">年薪</view>
						<input name="nianxing1" value="{{nianxing1}}" class="bt_input"></input>
						<text class="ganggang">-</text>
						<input name="nianxing2" value="{{nianxing2}}" class="bt_input"></input>
						<text>元</text>
					</view>
					<view class="mg_bo flexRow">
						<view class="text">家庭成員</view>
						<input name="jtcy" value="{{jtcy}}" class="bt_input bt_input2"></input>
					</view>
					<view class="mg_bo " bindtap="xuli">
						<view class="text">學歷</view>
						<view class="da {{ xuli?'':'col'}}">{{xuli?xuli:'請選擇'}}</view>
					</view>
					<view class="mg_bo " bindtap="ziyie">
						<view class="text">職業</view>
						<view class="da  {{ ziyie?'':'col'}}">{{ziyie?ziyie:'請選擇'}}</view>
					</view>
					<view class="mg_bo " bindtap="car">
						<view class="text">車子</view>
						<view class="da  {{ car?'':'col'}}">{{car?car:'請選擇'}}</view>
					</view>
					<view class="mg_bo " bindtap="house">
						<view class="text">房子</view>
						<view class="da  {{ house?'':'col'}}">{{house?house:'請選擇'}}</view>
					</view>
					<view class="mg_bo " bindtap="love">
						<view class="text">戀愛狀態</view>
						<view class="da  {{ love?'':'col'}}">{{love?love:'請選擇'}}</view>
					</view>
					<view class="mg_bo">
						<view>
							<view class="text mg_bot">你是怎麼樣的人
								<text style="color:red">*</text>
							</view>
							<view class="text_">讓對方對你有個簡單的認識</view>
							<view class="text_">日常生活簡介、會不會做飯？是不是顏值控？</view>
							<view class="text_">家庭情況、工作簡介等等</view>
							<view class="text_">請輸入200個字以上</view>
							<textarea name="nssmr" value="{{nssmr}}"></textarea>
						</view>
					</view>
					<view class="mg_bo">
						<view>
							<view class="text mg_bot">平時的興趣愛好
								<text style="color:red">*</text>
							</view>
							<view class="text_">讓對方對你有個簡單的認識</view>
							<view class="text_">爲匹配興趣相近的小夥伴，請準確填寫。可以填寫上班時間喜歡做什麼，下班時間喜歡做什麼，節假日喜歡做什麼.....等等</view>
							<view class="text_">請輸入200個字以上</view>
							<textarea name="psdah" value="{{psdah}}"></textarea>
						</view>
					</view>
					<view class="mg_bo">
						<view>
							<view class="text mg_bot">交友宣言
							</view>
							<input name="jyxy" value="{{jyxy}}"></input>
						</view>
					</view>
					<view class="mg_bo">
						<view>
							<view class="text mg_bot">你希望的TA是什麼樣子的？
								<text style="color:red">*</text>
							</view>
							<textarea name="nxwdt" value="{{nxwdt}}"></textarea>
						</view>
					</view>
				</view>
			</view>

			<button formType="submit">{{page_type?'提交':'下一步'}}</button>

		</view>
	</view>
</form>
<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;visibility:hidden;" canvas-id="myCanvas"></canvas>

js
 

//index.js
var userInfo;
const DB = wx.cloud.database()
var util = require('../../utils/util.js')

let that
// var data{
//   phoneNumber: '手機號碼',
//   name: '姓名',
//   userNumber: '身份證號碼',
//   wxNumber: '微信帳號',
//   shengao: '身高',
//   tizhong: '體重',
//   nssmr: '你是怎麼樣的人',
//   psdah: '平時的興趣愛好',
//   jyxy: '交友宣言',
//   nxwdt: '你希望的TA是什麼樣子的？',

//   nicheng 暱稱
//   sex: '性別',
//   region1: '籍貫',
//   region2: '所在地區',
//   xuli: '學歷',
//   ziyie: '職業',
//   car: '車子',
//   house: '房子',
//   love: '戀愛狀態',
//  jtcy 家庭成員
// nianxing1 年薪
// nianxing2 年薪
// zhengmian  身份證正面
// fanmian_img    身份證反面
// }
Page({
  data: {
    page_type: wx.getStorageSync('userInfoDetail') ? false : true,
    list: [{
      text: '手機號碼',
      text_: '僅用於登記，不公開',
      name: 'phoneNumber',
      value: ""
    }, {
      text: '姓名',
      text_: '僅用於登記，不公開',
      name: 'name',
      value: ""
    }, {
      text: '身份證號碼',
      text_: '僅作覈實身份之用，不公開',
      name: 'userNumber',
      value: ""
    }, {
      text: '微信帳號',
      text_: '',
      name: 'wxNumber',
      value: ""
    }],
    region1: ['請選擇', '請選擇', '請選擇'],
    region2: ['請選擇', '請選擇', '請選擇'],
    sex: "男",
    customItem: '請選擇',
    sex_list: [{
        name: '男',
        checked: 'true',
      },
      {
        name: '女',
      },
    ],
    hande: "cloud://gezi-ofhmx.6765-gezi-ofhmx-1255880295/1593571997000",
    arr_list: [],
    live_phone: [],
  },
  onLoad: function (option) {
    that = this
    console.log('--------')
    if (option.nav_type == "login") {
      this.setData({
        nav_type: option.nav_type
      })
    }
    try {

      if (wx.getStorageSync('userInfo')) {
        var list = this.data.list;
        var user = wx.getStorageSync('userInfo').userInfoDetail;
        console.log(list[0].value, user.phoneNumber)

        if (user.phoneNumber) {
          list[0].value = user.phoneNumber
        }
        if (user.name) list[1].value = user.name
        if (user.userNumber) list[2].value = user.userNumber
        if (user.wxNumber) list[3].value = user.wxNumber

        var sex_list = this.data.sex_list;
        var sex = "男";


        if (user.age == 1) {
          sex_list[0].checked = true;
          sex_list[1].checked = false;
          sex = "男"
        } else {
          sex = "女"
          sex_list[0].checked = false;
          sex_list[1].checked = true;
        }

        console.log('-----------------', user)
        this.setData({
          list,
          sex_list,
          sex,
          user,
          ...user
        })
      } else {
        console.log('===========')
      }
    } catch (error) {
      console.log('====', error)

    }
  },
  hande_img() {
    let that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作爲img標籤的src屬性顯示圖片
        console.log('選擇圖片', res)
        const tempFilePaths = res.tempFilePaths[0]
        // 將圖片上傳至雲存儲空間
        wx.cloud.uploadFile({
          // 指定上傳到的雲路徑
          cloudPath: Date.parse(new Date()) + tempFilePaths[0],
          // 指定要上傳的文件的小程序臨時文件路徑
          filePath: tempFilePaths,
          // 成功回調
          success: res => {
            console.log('上傳成功', res)
            // 成功之後的圖片地址
            let imgUrl = res.fileID
            that.setData({
              hande: imgUrl
            })
          }
        })
      }
    })
  },
  zhengmian_img() {
    let that = this
    var ctx = wx.createCanvasContext('myCanvas')
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        //獲取圖片基本信息
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            var width = res.width
            var height = res.height
            //獲取屏幕寬度
            let screenWidth = wx.getSystemInfoSync().windowWidth
            //處理一下圖片的寬高的比例
            if (width >= height) {
              if (width > screenWidth) {
                width = screenWidth
              }
              height = height / res.width * width
            } else {
              if (width > screenWidth) {
                width = screenWidth
              }
              if (height > 400) {
                height = 400
                width = res.width / res.height * height
              } else {
                height = height / res.width * width
              }
            }
            that.setData({
              imageWidth: width,
              imageHeight: height,
            })
            ctx.drawImage(res.path, 0, 0, width, height)
            ctx.rotate(20 * Math.PI / 180)
            for (let j = 1; j < 12; j++) {
              ctx.beginPath()
              ctx.setFontSize(14)
              ctx.setFillStyle('white')
              ctx.fillText('身份證水印', 0, 50 * j)
              for (let i = 1; i < 12; i++) {
                ctx.beginPath()
                ctx.setFontSize(14)
                ctx.setFillStyle('white')
                ctx.fillText("身份證水印", (15 + (14 - 1) * "身份證水印".length) * i, 50 * j)
              }
            }
            ctx.draw(false, () => {
              //生成圖片
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function (res) {
                  console.log("canvas可以生成圖片")
                  console.log(res.tempFilePath, 'canvas圖片地址');

                  // tempFilePath可以作爲img標籤的src屬性顯示圖片
                  console.log('選擇圖片', res)
                  const tempFilePaths = res.tempFilePath
                  wx.cloud.uploadFile({
                    cloudPath: Date.parse(new Date()) + "",
                    filePath: tempFilePaths,
                    success: res => {
                      console.log('上傳成功', res)
                      let imgUrl = res.fileID
                      that.setData({
                        zhengmian: imgUrl
                      })
                    },
                    fail: err => {
                      console.log('上傳失敗', err)
                    }
                  })
                }
              })
            })

          }
        })
      }
    })
  },
  fanmian_img() {
    let that = this
    var ctx = wx.createCanvasContext('myCanvas')
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        //獲取圖片基本信息
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            var width = res.width
            var height = res.height
            //獲取屏幕寬度
            let screenWidth = wx.getSystemInfoSync().windowWidth
            //處理一下圖片的寬高的比例
            if (width >= height) {
              if (width > screenWidth) {
                width = screenWidth
              }
              height = height / res.width * width
            } else {
              if (width > screenWidth) {
                width = screenWidth
              }
              if (height > 400) {
                height = 400
                width = res.width / res.height * height
              } else {
                height = height / res.width * width
              }
            }
            that.setData({
              imageWidth: width,
              imageHeight: height,
            })
            ctx.drawImage(res.path, 0, 0, width, height)
            ctx.rotate(20 * Math.PI / 180)
            for (let j = 1; j < 12; j++) {
              ctx.beginPath()
              ctx.setFontSize(14)
              ctx.setFillStyle('white')
              ctx.fillText('身份證水印', 0, 50 * j)
              for (let i = 1; i < 12; i++) {
                ctx.beginPath()
                ctx.setFontSize(14)
                ctx.setFillStyle('white')
                ctx.fillText("身份證水印", (15 + (14 - 1) * "身份證水印".length) * i, 50 * j)
              }
            }
            ctx.draw(false, () => {
              //生成圖片
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function (res) {
                  console.log("canvas可以生成圖片")
                  console.log(res.tempFilePath, 'canvas圖片地址');

                  // tempFilePath可以作爲img標籤的src屬性顯示圖片
                  console.log('選擇圖片', res)
                  const tempFilePaths = res.tempFilePath
                  wx.cloud.uploadFile({
                    cloudPath: Date.parse(new Date()) + "",
                    filePath: tempFilePaths,
                    success: res => {
                      console.log('上傳成功', res)
                      let imgUrl = res.fileID
                      that.setData({
                        fanmian: imgUrl
                      })
                    },
                    fail: err => {
                      console.log('上傳失敗', err)
                    }
                  })
                }
              })
            })

          }
        })
      }
    })
  },
  live_phone() {
    let that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作爲img標籤的src屬性顯示圖片
        // console.log('選擇圖片', res)
        const tempFilePaths = res.tempFilePaths
        that.setData({
          live_phone: []
        })
        let i = 0
        for (i; i < tempFilePaths.length; i++) {
          // console.log(i, ':', tempFilePaths[i])
          let url = tempFilePaths[i]
          // 將圖片上傳至雲存儲空間
          wx.cloud.uploadFile({
            // 指定上傳到的雲路徑
            cloudPath: Date.parse(new Date()) + i + '.png',
            // 指定要上傳的文件的小程序臨時文件路徑
            filePath: url,
            // 成功回調
            success: res => {
              console.log('上傳成功', res)
              // 成功之後的圖片地址
              let imgUrl = res.fileID
              let arr = [
                imgUrl
              ]

              that.setData({
                live_phone: that.data.live_phone.concat(arr)
              })

            }
          })
        }

      }
    })
  },
  formsubmit: function (e) {
    var that = this;
    var formData = e.detail.value;
    console.log('formData1', formData)
    if (this.data.hande) formData.hande = this.data.hande;
    if (this.data.live_phone) formData.live_phone = this.data.live_phone;
    if (this.data.sex) formData.sex = this.data.sex;
    if (this.data.region1) formData.region1 = this.data.region1[0] == "請選擇" ? null : this.data.region1;
    if (this.data.region2) formData.region2 = this.data.region2[0] == "請選擇" ? null : this.data.region2;
    if (this.data.xuli) formData.xuli = this.data.xuli;
    if (this.data.ziyie) formData.ziyie = this.data.ziyie;
    if (this.data.car) formData.car = this.data.car;
    if (this.data.house) formData.house = this.data.house;
    if (this.data.love) formData.love = this.data.love;
    console.log('formData2', formData)
    this.userAdd(formData)

  },


  userAdd(formData) {
    if (this.data.user && this.data.user.hande) {
      formData.hande = this.data.user.hande
    }
    console.log(formData.name, formData.hande, formData.sex, formData.phoneNumber, formData.wxNumber, formData.userNumber)

    if (!formData.name || !formData.hande || !formData.sex || !formData.phoneNumber) {
      wx.showToast({
        title: '請確認必填信息填寫完整',
        icon: 'none'
      })
      return
    }
    if (!util.IdentityCodeValid(formData.userNumber)) {
      wx.showToast({
        title: '身份證信息錯誤',
        icon: 'none'
      })
      return
    }
    if (!util.regPhone(formData.phoneNumber)) {
      wx.showToast({
        title: '手機號錯誤',
        icon: 'none'
      })
      return
    }
    wx.setStorageSync('userInfoDetail', formData);
    DB.collection('user').doc(wx.getStorageSync('userInfo')._id).update({
      data: {
        userInfoDetail: formData
      }
    })

    if (this.data.nav_type == "login") {
      console.log('11111111111111111111111111')
      wx.navigateTo({
        url: '/pages/character_list/index',
      })
    } else {
      console.log('2222222222222222222222222')

      wx.switchTab({
        url: '/pages/find/index',
      })
    }
  },
  //省市區選擇器：
  bindRegionChange1: function (e) {
    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
    this.setData({
      region1: e.detail.value
    })
  },
  //省市區選擇器：
  bindRegionChange2: function (e) {
    console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
    this.setData({
      region2: e.detail.value
    })
  },
  next() {
    wx.navigateTo({
      url: '../character_list/index',
      success: function (res) {},
      fail: function (res) {},
      complete: function (res) {},
    })
  },
  input(e) {
    console.log(e)
    let tite = e.currentTarget.dataset.title
    let type = e.currentTarget.dataset.type
    let text = e.detail.value
    let arr = {
      tite: tite,
      type: type,
      text: text
    }
    this.setData({
      arr_list: this.data.arr_list.push(arr)
    })
  },


  radioChange(e) {
    this.setData({
      sex: e.detail.value
    })
  },
  // 學歷
  xuli() {
    let list = ['研究生及以上', '本科', '專科及以下']
    wx.showActionSheet({
      itemList: list,
      itemColor: '',
      success: function (res) {
        console.log(res)
        that.setData({
          xuli: list[res.tapIndex]
        })
      },
      fail: function (res) {},
      complete: function (res) {},
    })
  },
  // 職業
  ziyie() {
    let list = ['企業員工', '公務員', '自由職業', '其他']
    wx.showActionSheet({
      itemList: list,
      itemColor: '',
      success: function (res) {
        that.setData({
          ziyie: list[res.tapIndex]
        })
      },
      fail: function (res) {},
      complete: function (res) {},
    })
  },
  //車
  car() {
    let list = ['自己名下有車全款', '自己名下有車貸款', '沒車', '家裏有車']
    wx.showActionSheet({
      itemList: list,
      itemColor: '',
      success: function (res) {
        that.setData({
          car: list[res.tapIndex]
        })
      },
      fail: function (res) {},
      complete: function (res) {},
    })
  },
  // 房
  house() {
    let list = ['自己名下有房全款', '自己名下有房貸款', '沒房', '家裏有房']
    wx.showActionSheet({
      itemList: list,
      itemColor: '',
      success: function (res) {
        that.setData({
          house: list[res.tapIndex]
        })
      },
      fail: function (res) {},
      complete: function (res) {},
    })
  },
  // 戀愛狀態
  love() {
    let list = ['未戀愛過', '戀愛分手一年內', '戀愛分手多年', '離異自己帶子女', '離異無子女', '離異對方帶子女']
    wx.showActionSheet({
      itemList: list,
      itemColor: '',
      success: function (res) {
        that.setData({
          love: list[res.tapIndex]
        })
      },
      fail: function (res) {},
      complete: function (res) {},
    })
  }
})

css

.title {
  width: 100%;
  text-align: center;
  font-size: 36rpx;
  font-weight: 800;
}
radio{
  
}
.top{
  width: 100%;
  min-height: 200rpx;
}
.info{
  padding: 30rpx;
}
.itemaaaa .text{
  margin-top: 10rpx;
}
.itemaaaa input{
  position: relative;
  top: -20rpx;
}
.itemaaaa .mg_bo{
  display: flex;
  flex-direction: row;
}
.mg_bo{
  margin: 20rpx;
  /* border-bottom: 1rpx solid #ccc; */
  padding-bottom: 40rpx
}
.text {
  font-size: 32rpx;
  color: #233144;
}
.text_ {
  font-size: 22rpx;
  color: rgba(111, 111, 112, 0.89);
}
input{
  width: 90%;
  border-bottom: 1rpx solid #ccc;
  margin-left: 5%;
  margin-top: 10rpx;
  padding: 10rpx
}
.flexRow{
  display: flex;
  flex-direction: row
}
.mg_bot{
   margin-bottom: 20rpx;
}
label{
 
  flex: 1;
  text-align: center
}
.img_{
  width: 300rpx;
  height: 300rpx;
  text-align: center;
  line-height: 300rpx;
  border: 1rpx solid #ccc;
  background: rgb(228, 228, 228);
  font-size: 100rpx;
  color: #fff;
  /* margin-left: 200rpx; */
  margin-top: 20rpx
}
.img_2{
  width: 500rpx;

}
.img_ .img{
width: 100%;
height: 100%;
}
.map_bo{
  width: 100%
}
.map_bo view{
  flex: 1;
text-align: center
}
.bt_input{
  width: 100rpx
}
.bt_input2{
  width: 300rpx;
}
.ganggang{
  width: 100rpx;
  text-align: center;
  margin-right: -5%;
}
.da{
  margin-left: 100rpx;
  padding-top: 10rpx;
}
.col{
  color: #757575
}
textarea{
  width: 600rpx;
  border: 1rpx solid #ccc;
  margin-top: 10rpx;
  padding: 20rpx
}
.next{
  margin: 100rpx;
  background: #0778fa;
  color: #fff;
  line-height: 80rpx;
  text-align: center;border-radius: 16rpx
}