本項目來自菜鳥窩，有興趣者點擊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() {
}
}
如此，我們便成功構建了，支付功能，此頁面功能還有一些缺失，將在后面幾更進行完善。詳細代碼請戳頁首源碼。
