支付宝小程序测试唤起支付

其他 2019-02-24 19:57:03 阅读次数: 0
版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/87455444 

//index.axml
<!-- 最外层视图  无意义 -->
<!--  -->
<view class="content">
  <view class="conent">
  <!-- 支付宝唤起支付 -->
<button type="default" onTap="payment">支付宝支付</button>
<!-- 获取用户信息 -->
<!-- <button type="default" onTap="getuserInfo">获取用户信息</button> -->
<!--  -->
</view>
<view class='conts'>
	<!-- 第一层 -->
	<swiper
	 class='swiper_view'
	 indicator-dots="true"
	 vertical="{{vertical}}"
	 autoplay="{{autoplay}}"
	 duration="{{duration}}"
	 interval='{{interval}}'
	 bindchange="bindchange"
	 circular="{{circular}}"
	>
		<block a:for='{{imgList}}' a:key="{{index}}">
			<swiper-item>
				<image
				 src="{{item}}"
				 data-id='{{index}}'
				 class="slide-image"
				 bindload="imageLoad"
				/>
			</swiper-item>
		</block>
	</swiper>
  <!-- 第二层 -->
<view class="car_title">
  <label>热销车型</label>
  <text>更多></text>
</view>
<!-- 外层视图容器 -->
<view class="section">
<!-- scroll视图容器 -->
  <scroll-view class="scroll_view" scroll-x="true">
  <!-- 滚动列表内容 -->
    <view class="cont" a:for="{{list}}" a:key="{{item}}">
    <!-- 滚动图片 -->
      <image src="{{item.url}}"class="cont_img"/>
      <!-- 滚动文本 -->
      <view class="content">
      <view  class="cont_name" >{{item.title}}</view>
      <view class="cont_title">
        <view class="area">{{item.name}}</view>
      </view>
      </view>
    </view>
  </scroll-view>
</view>
  <!-- 第三层 -->
<view class="car_title">
  <label>限时促销</label>
  <text>更多></text>
</view>
<view class='time_car'>
<view class='time_cont'>
  <image a:for="{{list}}" a:key="{{item}}" src="{{item.url}}"class="carimg"/>
</view>
</view>
<!-- 第四层 -->
<view class="car_title">
  <label>店内促销</label>
  <text>更多></text>
</view>
      <view class="list" a:for="{{lists}}" a:key="{{index}}">
        <!-- 列表标题 -->
        <text class="list_name">{{item.title}}</text>
        <!-- 列表商品图片 -->
        <image class="list_img" src="{{item.image}}"></image>
        <!-- 规格 -->
        <text class="cart_g_name">规格 : {{item.pro_name}}</text>
        <!-- 价格 -->
        <!-- <text class="list_price">询问价格</text> -->
        </view>
        <!-- 第三层 -->
</view>
</view>

//index.acss

.content{
  position: relative;
  width: 100%;
}
.swiper_view{
  position: relative;
  width: 100%;
  height:400rpx;
  background-color: antiquewhite;
}
.slide-image{
  width:100%;
  height:100%;
}
.time_car{
  position: relative;
  width: 100%;
  text-align: center;
}
.carimg{
width:47%;
display:inline-block;
height:235rpx;
float: left;
margin:8rpx 7rpx;
}
.time_cont{
  position: relative;
  width: 93%;
  display: inline-block;
}
 
/* 列表 */
.list{
  position: relative;
 width: 100%;
  height: 185rpx;
  /* background-color: red; */
  border-bottom: 1rpx solid #e9e9e9;
}
/* 列表商品图片 */
.list_img{
  position: absolute;
  border-radius: 10rpx;
  top: 20rpx;
  left: 40rpx;
  width: 144rpx;
  height: 144rpx;
}
/* 列表规格 */
.cart_g_name{
position: absolute;
left: 235rpx;
font-size: 26rpx;
color: #aaa;
top: 75rpx;
}

/* 列表商品名称 */
.list_name{
position: absolute;
left: 235rpx;
top: 30rpx;
width: 300rpx;
/* background-color: red; */
  font-size: 30rpx;
  overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;
}
/* 列表商品价格 */
.list_price{
position: absolute;
font-size: 32rpx;
color:  #D66058;
left: 235rpx;
bottom: 20rpx;
}
.car_title{
  position: relative;
  width:100%;
  height: 80rpx;
  line-height: 80rpx;
}
.car_title label{
  padding-left: 30rpx;
  font-weight: bold;
  font-size: 30rpx;
}
.car_title text{
  position: absolute;
  right: 30rpx;
  font-size: 30rpx;
  color: #999;
}

 
/* 轮播外层视图 */
 
.section {
  width: 100%;
  height: 350rpx;
  text-align: center;
}
 
/* 轮播视图 */
 
.scroll_view {
  height: 350rpx;
  display: inline-block;
  width: 94%;
  text-align: center;
  white-space: nowrap;
}
 
/* 轮播图片内容视图 */
.cont {
  width: 230rpx;
  margin: 5rpx;
  height: 350rpx;
  display: inline-block;
  text-align: center;
}
 
/* 轮播图片大小 */
 
.cont_img {
  width: 225rpx;
  border-radius: 10rpx;
  height: 225rpx;
  text-align: center;
  display: block;
}
/* 标题昵称 */
.cont_name {
  margin-top: 20rpx;
  display: -webkit-box;
  font-size: 28rpx;
  text-align: center;
  color: rgb(204, 45, 45);
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}
/* title */
.cont_title {
  width: 240rpx;
  text-align: center;
  display: inline-block;
  height: 40rpx;
  font-size: 28rpx;
}
 

//index.js
Page({
  data:{
  imgList: [
      'http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg',
      'http://img3.cheping.com.cn/model/22549/LptmOnVCOVouXCEN.jpg',
      'http://img.xgo-img.com.cn/pics/1865/630/441/1864075.jpg'
    ],
    lists: [{
      id: 1,
      title: '启程250',
      image: 'http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg',
      pro_name: "30ml",
      num: 1,
      price: 180,
      selected: true
    },
    {
      id: 2,
      title: '启程250',
      image: 'http://img3.cheping.com.cn/model/22549/LptmOnVCOVouXCEN.jpg',
      pro_name: "25g",
      num: 1,
      price: 62,
      selected: true
    },
    {
      id: 2,
      title: '启程250',
      image: 'http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg',
      pro_name: "75ml",
      num: 1,
      price: 175,
      selected: true
    }
    ], indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    // 滚动数据
    list: [{
      url: "http://img2.cheping.com.cn/model/22517/OYnUjcSNDRMxxCFy.jpg",
      name: "启辰D60",
      title: "6.98-11.18万",
    },
    {
      url: "http://img3.cheping.com.cn/model/22549/LptmOnVCOVouXCEN.jpg",
      name: "启辰T70",
      title: "8.98-12.78万",
    },
    {
      url: "http://img.xgo-img.com.cn/pics/1865/630/441/1864075.jpg",
      name: "启辰T60",
      title: "8.58-11.88万",
    }
    ],

    //是否采用衔接滑动  
    circular: true,
    //是否显示画板指示点  
    indicatorDots: false,
    //选中点的颜色  
    indicatorcolor: "#000",
    //是否竖直  
    vertical: false,
    //是否自动切换  
    autoplay: true,
    //自动切换的间隔
    interval: 2500,
    //滑动动画时长毫秒  
    duration: 100,
    //所有图片的高度  
    imgheights: [],
    //图片宽度 
    imgwidth: 750,
    //默认  
    current: 0
  },
  imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比  
      ratio = imgwidth / imgheight;
    console.log(imgwidth, imgheight)
    //计算的高度值  
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight;
    var imgheights = this.data.imgheights;
    //把每一张图片的对应的高度记录到数组里  
    imgheights[e.target.dataset.id] = imgheight;
    this.setData({
      imgheights: imgheights+'rpx'
    })
  },
  bindchange: function (e) {
    // console.log(e.detail.current)
    this.setData({ current: e.detail.current })
  },
  // 支付宝小程序支付函数
  payment() {
    // 这里调用支付宝唤起支付
    my.tradePay({
      tradeNO: '201711152100110410533667792', // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
      success: (res) => {
        my.alert({
          content: JSON.stringify(res),
        });
      },
      fail: (res) => {
        my.alert({
          content: JSON.stringify(res),
        });
      }
    });
  },
  // 获取用户信息【注意这里关联应用才可以授权获取】
  getuserInfo(){
    my.getAuthCode({
  scopes: 'auth_user',
  success: (res) => {
    my.getAuthUserInfo({
      success: (userInfo) => {
        my.alert({
		  content: userInfo.nickName
		});
        my.alert({
		  content: userInfo.avatar
		});
      }
    });
  },
});
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    return {
      title: 'My App',
      desc: 'My App description',
      path: 'pages/index/index',
    };
  },
});

猜你喜欢

转载自blog.csdn.net/qq_35695041/article/details/87455444
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022