微信小程序交互

最新推荐文章于 2022-08-03 00:35:41 发布

luzhenju

最新推荐文章于 2022-08-03 00:35:41 发布

阅读量395

点赞数

CC 4.0 BY-SA版权

分类专栏：微信文章标签：微信

本文链接：https://blog.csdn.net/luzhenju/article/details/96764690

微信专栏收录该内容

0 篇文章

订阅专栏

微信小程序交互的例子

<template>
  <table border="1">
    <div v-for="v in name" :key="index" class="div1">
      姓名:{{v.a_name}}
      手机号:{{v.a_tel}}
      地址:{{v.a_address}}
      <input type="radio">默认地址</input>
 
    </div>
    <button @click="add" class="add1" >新增收货地址</button>
  </table>
</template>
<script>
export default {
  data () {
    return {
      name: {}
    }
  },
  mounted: function () {
    this.load()
  },
  methods: {
    load () {
      let t = this
      wx.request({
        url: 'http://localhost/laravel/public/api/good', // 仅为示例，并非真实的接口地址
        data: {
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          console.log(res.data)
          t.name = res.data
        }
      })
    },
    add () {
      wx.navigateTo({
        url: '/pages/login/main'
      })
    }

  }
}
</script>

<style scoped>
.text1 {
  float: right;
  width: 260px;
  border: 1px rgb(234, 234, 241) solid;
  border-radius: 0px 0px 0px 0px;
}
.text2 {
  float: right;
  width: 255px;
  border: 1px rgb(234, 234, 241) solid;
  border-radius: 0px 0px 0px 0px;
}
.td1 {
  padding: 10px;
}
.area {
  float: right;
  width: 255px;
  border: 1px rgb(234, 234, 241) solid;
  border-radius: 0px 0px 0px 0px;
}
.set1 {
  margin-top: 200px;
  color: #e4f3f7;
  background-color: #d63722;
}
.div1{
 
  /* width: 260px; */
  border: 1px rgb(231, 231, 238) solid;
  border-radius: 0px 0px 0px 0px;
  margin-bottom: 40px;
  /* margin-left: 60px; */
}
/* .add1{
 position: absolute;
  left: 108px;
  top: 480px;
} */
.img1{
  width: 20px;
  height: 20px;
}
.but1{
  float:  right;
}
.but2{
  float:  right;
}
.img2{
  width: 20px;
  height: 20px;
}
</style>


<template>
  <table>
    <tr>
      <td>
        收货人：
        <input type="text" v-model="a_name" class="text1">
      </td>
      <td class="td1">
        联系电话：
        <input type="text" v-model="a_tel" class="text2">
      </td>
      <td>
        详细地址：
        <textarea v-model="a_address" cols="30" rows="10" class="area"></textarea>
      </td>
    </tr>
    <button @click="set" class="set1">保存</button>
  </table>
</template>
<script>
export default {
  data () {
    return {
      a_name: '',
      a_tel: '',
      a_address: ''
    }
  },
  methods: {
    set () {
      var sets = {}
      sets.a_name = this.a_name
      sets.a_tel = this.a_tel
      sets.a_address = this.a_address

      // console.log('=======set=======')
      // console.log(sets)
      // console.log('=======set=======')

      // 验证
      if (!this.a_name) {
        wx.showToast({
          title: '请输入名字',
          icon: 'none',
          duration: 1500
        })
        return false
      }
      if (!this.a_tel) {
        wx.showModal({
          title: '提示',
          content: '请输入联系电话',
          showCancel: false,
          success (res) {
            if (res.confirm) {
              console.log('点击确定')
            } else if (res.cancel) {
              console.log('点击取消')
            }
          }
        })
        return false
      }
      if (!this.a_address) {
        wx.showModal({
          title: '提示',
          content: '请输入收货地址',
          showCancel: false,
          success (res) {
            if (res.confirm) {
              console.log('点击确定')
            } else if (res.cancel) {
              console.log('点击取消')
            }
          }
        })
        return false
      }
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })
      wx.navigateTo({
        url: '/pages/mydress/main'
      })
      wx.request({
        url: 'http://129.28.160.23/index.php/Ressadd', // 仅为示例，并非真实的接口地址
        data: {
          a_name: this.a_name,
          a_tel: this.a_tel,
          a_address: this.a_address
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          console.log(res.data)
        }
      })
    }
  }
}
</script>

<style scoped>
.text1 {
  float: right;
  width: 260px;
  border: 1px rgb(234, 234, 241) solid;
  border-radius: 0px 0px 0px 0px;
}
.text2 {
  float: right;
  width: 255px;
  border: 1px rgb(234, 234, 241) solid;
  border-radius: 0px 0px 0px 0px;
}
.td1 {
  padding: 10px;
}
.area {
  float: right;
  width: 255px;
  border: 1px rgb(234, 234, 241) solid;
  border-radius: 0px 0px 0px 0px;
}
.set1 {
  margin-top: 200px;
  color: #e4f3f7;
  background-color: #d63722;
}
</style>





``