本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/
项目已经做完，
https://github.com/15829238397/CN5E-shop
仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章
前言
上一更我们了解了支付sdk的基本概念，以及支付sdk的集成方法。接下来我们将利用集成的支付SDK进行模拟支付功能的实现。效果图如下：
支付功能实现.gif
内容
页面设计
由于使用第三方的SDK功能已经相当健全，我们只需要自己设计两个页面，一个是新建订单页面，一个是支付结果页面。
新建订单页面
此页面的主要功能为展示新建的订单收货人的所有信息，订单中商品的所有信息，选择支付方式按钮等等等等。展示商品我们使用了一个RecyclerView进行展示商品的图片信息。使用RadioButton，给用户提供单选的付款方式选择框。
详细代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.cne_shop.widget.CnToolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:leftButtonIcon="@drawable/icon_back_32px"
app:title="编辑订单"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
></com.example.cne_shop.widget.CnToolbar>
<View
style="@style/line_mid_vertical"></View>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:background="@color/white"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/userMsg"
android:text="小庄(158*****397)"
android:paddingBottom="5dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/address"
android:text="西安邮电大学长安区西区16栋118"
android:textColor="@color/cardview_shadow_start_color"
android:layout_below="@+id/userMsg"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="40dp"
android:layout_height="60dp"
android:paddingRight="30dp"
android:paddingLeft="10dp"
android:background="@color/white"
android:id="@+id/consigneeMsg"
android:src="@drawable/icon_right_64"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
<View
style="@style/line_mid_vertical"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="订单列表"
android:textSize="16sp" />
<android.support.v7.widget.RecyclerView
android:id="@+id/wareMsg"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:orientation="horizontal" />
</LinearLayout>
<ImageButton
android:layout_width="40dp"
android:layout_height="60dp"
android:paddingRight="30dp"
android:paddingLeft="10dp"
android:background="@color/white"
android:src="@drawable/icon_right_64"
android:id="@+id/toOrderButton"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<View
style="@style/line_mid_vertical"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:background="@color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="支付方式"
android:textSize="16sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/Alipay">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/icon_alipay_72"
android:id="@+id/alipayPhoto"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="支付宝"
android:id="@+id/alipayText1"
android:layout_toRightOf="@+id/alipayPhoto"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:text="支持支付宝用户,网银用户使用"
android:id="@+id/alipayText2"
android:layout_toRightOf="@+id/alipayPhoto"
android:layout_below="@+id/alipayText1"
android:textColor="@color/cardview_shadow_start_color"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:layout_centerVertical="true"
style="@style/RadioButton"
android:clickable="false"
android:id="@+id/checkbox_alipay"/>
</RelativeLayout>
<View
style="@style/line_vertical"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/wechat">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/icon_wechat_72"
android:id="@+id/wechatPhoto"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="微信支付"
android:id="@+id/wechatText1"
android:layout_toRightOf="@+id/wechatPhoto"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:text="用微信支付，方便快捷"
android:layout_toRightOf="@+id/wechatPhoto"
android:layout_below="@+id/wechatText1"
android:textColor="@color/cardview_shadow_start_color"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:layout_centerVertical="true"
android:clickable="false"
style="@style/RadioButton"
android:id="@+id/checkbox_wechat"/>
</RelativeLayout>
<View
style="@style/line_vertical"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bd">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/icon_bd_72"
android:id="@+id/bdPhoto"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="百度钱包"
android:id="@+id/bdText1"
android:layout_toRightOf="@+id/bdPhoto"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:text="百度安全支付服务"
android:layout_toRightOf="@+id/bdPhoto"
android:layout_below="@+id/bdText1"
android:textColor="@color/cardview_shadow_start_color"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:layout_centerVertical="true"
android:clickable="false"
style="@style/RadioButton"
android:id="@+id/check_bd"/>
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_alignParentBottom="true"
android:background="@color/cardview_shadow_start_color">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="实付:"
android:layout_centerVertical="true"
android:id="@+id/text"
android:textColor="@color/white"/>
<TextView
android:layout_width="wrap_content"
android:paddingLeft="20dp"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/text"
android:textColor="@color/white"
android:layout_centerVertical="true"
android:id="@+id/warePrice"
android:text="￥1753.00"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="提交订单"
android:background="@color/red"
android:id="@+id/btn_submit"
android:textColor="@color/white"
android:layout_alignParentRight="true"/>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
支付结果页面
我们得到支付结果后，启动这个页面。利用Intent传输支付结果。布局代码十分简单，如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.cne_shop.widget.CnToolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="支付结果"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
></com.example.cne_shop.widget.CnToolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/white"
android:paddingTop="20dp"
android:paddingBottom="20dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="30dp"
android:id="@+id/resultImg"
android:src="@drawable/icon_success_128" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="支付成功"
android:gravity="center"
android:id="@+id/resultText"
android:layout_gravity="center_horizontal"
android:paddingTop="40dp"
android:textSize="22sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:paddingTop="30dp"
android:paddingRight="20dp">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="@color/material_green"
android:textColor="@color/white"
android:textSize="22sp"
android:id="@+id/backHome"
android:text="返回首页"/>
</LinearLayout>
</LinearLayout>
功能设计
运行逻辑
当点击去结算按钮时，启动编辑订单页面的Activity,并且将选中的购物车商品信息一并传入，并在编辑订单页面的订单列表展示出传来的商品的图片，并显示总价，最上行可供用户点击后选择收货人信息与地址。（此功能后续完成）。选择支付方式后，点击提交订单后进行支付，利用支付SDK的模拟支付页面，我可以自主选择支付结果，并在支付结果页面进行显示。
代码实现
package com.example.cne_shop.activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.cne_shop.R;
import com.example.cne_shop.base.BaseActivity;
import butterknife.BindView;
/**
* Created by 博 on 2017/7/26.
*/
public class PayResultActivity extends BaseActivity {
@BindView(R.id.resultText)
TextView resultText ;
@BindView(R.id.resultImg)
ImageView resultButton ;
@BindView(R.id.backHome)
Button button ;
@Override
protected int getContentViewId() {
return R.layout.pay_result_activity;
}
private void addButtonListener(){
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent( v.getContext() , ShopMainActivity.class));
finish();
}
});
}
protected void initView(){
Intent intent = getIntent() ;
if (intent != null){
int status = intent.getIntExtra("status" , 0) ;
Log.d("", "initView: status" + status + "---------------------------------------------------");
if(status == NewOrderActivity.ORDER_SUCCESS){
resultText.setText("支付成功");
resultButton.setImageResource(R.drawable.icon_success_128);
}else if(status == NewOrderActivity.ORDER_FAIL){
resultText.setText("支付失败");
resultButton.setImageResource(R.drawable.icon_cancel_128);
}else if (status == NewOrderActivity.ORDER_GONE){
resultText.setText("用户已取消支付");
resultButton.setImageResource(R.drawable.icon_cancel_128);
}
}
}
@Override
protected void addListener() {
addButtonListener() ;
}
@Override
protected void beforLayout() {
}
}
- 其中，这段代码即是调用支付SDK的部分。
private void openPaymentAcitivity(String charge){
Intent intent = new Intent();
String packageName = getPackageName() ;
ComponentName componentName = new ComponentName(packageName , packageName + ".wxapi.WXPayEntryActivity") ;
intent.setComponent(componentName) ;
intent.putExtra(PaymentActivity.EXTRA_CHARGE , charge) ;
startActivityForResult(intent , Contents.REQUEST_ORDER_CODE);
Log.d("----" , "-------------------------------------打开了支付页面") ;
}
- 下面代码是处理返回结果部分：
if (requestCode == Contents.REQUEST_ORDER_CODE){
if (resultCode == Activity.RESULT_OK){
String result = data.getExtras().getString("pay_result") ;
Log.d("----" , "-------------------------------------支付返回" + result) ;
if (result.equals("success"))
changeOrderStatus(ORDER_SUCCESS);
else if (result.equals("fail"))
changeOrderStatus(ORDER_FAIL);
else if (result.equals("cancel"))
changeOrderStatus(ORDER_GONE);
else
changeOrderStatus(0);
}
- 展示结果源码如下，太过简单，不予讨论。
package com.example.cne_shop.activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.cne_shop.R;
import com.example.cne_shop.base.BaseActivity;
import butterknife.BindView;
/**
* Created by 博 on 2017/7/26.
*/
public class PayResultActivity extends BaseActivity {
@BindView(R.id.resultText)
TextView resultText ;
@BindView(R.id.resultImg)
ImageView resultButton ;
@BindView(R.id.backHome)
Button button ;
@Override
protected int getContentViewId() {
return R.layout.pay_result_activity;
}
private void addButtonListener(){
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent( v.getContext() , ShopMainActivity.class));
finish();
}
});
}
protected void initView(){
Intent intent = getIntent() ;
if (intent != null){
int status = intent.getIntExtra("status" , 0) ;
Log.d("", "initView: status" + status + "---------------------------------------------------");
if(status == NewOrderActivity.ORDER_SUCCESS){
resultText.setText("支付成功");
resultButton.setImageResource(R.drawable.icon_success_128);
}else if(status == NewOrderActivity.ORDER_FAIL){
resultText.setText("支付失败");
resultButton.setImageResource(R.drawable.icon_cancel_128);
}else if (status == NewOrderActivity.ORDER_GONE){
resultText.setText("用户已取消支付");
resultButton.setImageResource(R.drawable.icon_cancel_128);
}
}
}
@Override
protected void addListener() {
addButtonListener() ;
}
@Override
protected void beforLayout() {
}
}
如此，我们便成功构建了，支付功能，此页面功能还有一些缺失，将在后面几更进行完善。详细代码请戳页首源码。
网友评论