Vue Shangpinhui Mall Project-day06 [37. 取引データの取得 + 38. ユーザー住所情報の表示 + 39. 取引情報の表示と取引ページの完了 + 40. 注文の送信 + 41. 注文番号の取得と支払いコンポーネントでの支払い情報の表示]

開発 2023-04-09 15:09:22 訪問数: null

ここに画像の説明を挿入

記事ディレクトリ

37. 取引データを取得する

コードを変更します。

src/store/index.js

import trade from "@/store/trade"

modules:{
	...
    trade
    }

src/store/trade/index.js

import {reqAddressInfo, reqOrderInfo} from "@/api";

//trade交易模块的小仓库
//actions代表一系列动作，可以书写自己的业务逻辑，也可以处理异步
const actions = {
    //获取用户地址信息
    async reqAddressInfo({commit}) {
        let response = await reqAddressInfo();
        console.log("******获取用户地址信息-response:{}", response);
        if (response.code == 200) {
            commit('REQ_ADDRESS_INFO', response.data);
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error(response.message))
        }
    },
    //获取商品清单
    async reqOrderInfo({commit}) {
        let response = await reqOrderInfo();
        console.log("******获取商品清单-response:{}", response);
        if (response.code == 200) {
            commit('REQ_ORDER_INFO', response.data);
            //返回的是成功的标记
            return "OK";
        } else {
            //返回的是失败的标记
            return Promise.reject(new Error(response.message))
        }
    },
}
//mutations代表维护，操作维护的是state中的数据，且state中数据只能在mutations中处理
const mutations = {
    REQ_ADDRESS_INFO(state, addressInfo) {
        state.addressInfo = addressInfo
    },
    REQ_ORDER_INFO(state, orderInfo) {
        state.orderInfo = orderInfo
    },
}
//state代表仓库中的数据
const state = {
    addressInfo: [],
    orderInfo: {},
}
//计算属性
//项目当中getters主要的作用是:简化仓库中的数据(简化数据而生)
//可以把我们将来在组件当中需要用的数据简化一下【将来组件在获取数据的时候就方便了】
const getters = {

}

//创建并暴露store
export default {
    actions,
    mutations,
    state,
    getters
}

src/api/index.js

//获取用户地址信息
//URL:/api/user/userAddress/auth/findUserAddressList  method:get
export const reqAddressInfo = ()=>requests({url:'/user/userAddress/auth/findUserAddressList',method:'get'});
//获取商品清单
//URL:/api/order/auth/trade   method:get
export const reqOrderInfo = ()=>requests({url:'/order/auth/trade',method:'get'});

src/pages/ShopCart/index.vue

<router-link class="sum-btn" to="/trade">结算</router-link>

src/router/routes.js

{
        name: 'trade',
        path: '/trade',
        component: Trade,
        meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
},

src/pages/Trade/index.vue

mounted() {
      this.$store.dispatch('reqAddressInfo');
      this.$store.dispatch('reqOrderInfo');
    }

38. ユーザーアドレス情報表示

由于API接口调不通没有数据，所以临时采用mock模拟接口返回数据！

コードを変更します。

src/pages/Trade/index.vue

<div class="address clearFix" v-for="(address, index) in addressInfo" :key="address.id">
        <span class="username" :class="{ selected: address.isDefault == 1 }">{
   
   {address.consignee}}</span>
        <p @click="changeDefault(address, addressInfo)">
          <span class="s1">{
   
   {address.fullAddress}}</span>
          <span class="s2">{
   
   {address.phoneNum}}</span>
          <span class="s3" v-show="address.isDefault == 1">默认地址</span>
        </p>
</div>
<div class="receiveInfo">
        寄送至:
        <span>{
   
   {userDefaultAddress.fullAddress}}</span>
        收货人：<span>{
   
   {userDefaultAddress.consignee}}</span>
        <span>{
   
   {userDefaultAddress.phoneNum}}</span>
</div>

import {mapState} from 'vuex';
computed: {
      ...mapState({
        addressInfo: (state) => state.trade.addressInfo,
      }),
      //将来提交订单最终选中地址
      userDefaultAddress() {
        //find:查找数组当中符合条件的元素返回，最为最终结果
        return this.addressInfo.find((item) => item.isDefault == 1) || {};
      },
    },
    methods: {
      //修改默认地址
      changeDefault(address, addressInfo) {
        //全部的isDefault为零
        addressInfo.forEach((item) => (item.isDefault = 0));
        address.isDefault = 1;
      },
    }

注意点1：

質問: エラーは図に示されています

ここに画像の説明を挿入

エラーコード：

<span>{
   
   {userDefaultAddress.fullAddress}}</span>

computed: {
	//将来提交订单最终选中地址
      userDefaultAddress() {
        //find:查找数组当中符合条件的元素返回，最为最终结果
        return this.addressInfo.find((item) => item.isDefault == 1);
      },
}

回答: 値がない場合は、代わりに userDefaultAddress が空のオブジェクトを返すようにします。

39. 取引情報の表示と取引ページの完了

由于API接口调不通没有数据，所以临时采用mock模拟接口返回数据！

コードを変更します。

src/pages/Trade/index.vue

<div class="detail">
        <h5>商品清单</h5>
        <ul class="list clearFix" v-for="(order, index) in orderInfo.detailArrayList" :key="order.skuId">
          <li>
            <img :src="order.imgUrl" alt="" style="width:100px;height:100px" >
          </li>
          <li>
            <p>{
   
   { order.skuName }}</p>
            <h4>7天无理由退货</h4>
          </li>
          <li>
            <h3>￥{
   
   { order.orderPrice }}.00</h3>
          </li>
          <li>X{
   
   { order.skuNum }}</li>
          <li>有货</li>
        </ul>
</div>
<b><i>{
   
   { orderInfo.totalNum }}</i>件商品，总商品金额</b>
<span>¥{
   
   { orderInfo.totalAmount }}.00</span>
<div class="price">应付金额:　<span>¥{
   
   { orderInfo.totalAmount }}.00</span></div>

data() {
    return {
      //收集买家的留言信息
      msg: "",
    };
  },
computed: {
	...mapState({
        orderInfo: (state) => state.trade.orderInfo,
      }),
}

40. 注文を送信する

ポイントと難点

  1. 注文を送信

  2. QRコードを支払う

  3. 注文状況を取得する

从这里开始就不再写vuex了，改为直接掉接口使用返回数据，这里要开始练习不使用vuex情况下也能写代码功能！

コードを変更します。

src/api/index.js

//提交订单的接口
//URL:/api/order/auth/submitOrder?tradeNo={tradeNo}  method:post
export const reqSubmitOrder = (tradeNo,data)=>requests({url:`/order/auth/submitOrder?tradeNo=${tradeNo}`,data,method:'post'});

src/router/routes.js

import Pay from '@/pages/Pay'
{
        name: 'pay',
        path: '/pay',
        component: Pay,
        meta:{"isShow": true}   //自定义元数据属性，判断Footer组件在底部是否显示
},

src/pages/Trade/index.vue

<a class="subBtn" @click="submitOrder">提交订单</a>

src/pages/Trade/index.vue

data() {
      return {
        //订单号
        orderId: "",
      };
    },
    
methods: {
	//提交订单
      async submitOrder() {
        //交易编码
        let { tradeNo } = this.orderInfo;
        //其余的六个参数
        let data = {
          consignee: this.userDefaultAddress.consignee, //最终收件人的名字
          consigneeTel: this.userDefaultAddress.phoneNum, //最终收件人的手机号
          deliveryAddress: this.userDefaultAddress.fullAddress, //收件人的地址
          paymentWay: "ONLINE", //支付方式
          orderComment: this.msg, //买家的留言信息
          orderDetailList: this.orderInfo.detailArrayList, //商品清单
        };
        //需要带参数的：tradeNo
        let result = await this.$API.reqSubmitOrder(tradeNo, data);
        console.log("******提交订单结果result:{}", result);
        //提交订单成功
        // if (result.code == 200) {
        //   this.orderId = result.data;
        //   //路由跳转 + 路由传递参数
        //   this.$router.push('/pay?orderId='+this.orderId);
        //   //提交的订单失败
        // } else {
        //   alert(result.message);
        // }
        this.orderId = "10552";
          //路由跳转 + 路由传递参数
          this.$router.push('/pay?orderId='+this.orderId);
      },
}

注意点1：

質問: すべてのインターフェースが src/api/index.js パスの下にあるようになりました。一度だけインポートして、すべてのコンポーネントで使用したいのですが、どうすればよいですか?

回答: main.js のメイン エントリに一度導入し、$API に割り当てて、グローバル イベント バスのように使用できるようにします。

//统一接口api文件夹里面全部请求函数
//统一引入
import * as API from '@/api';

new Vue({
	...
	beforeCreate() {
    	Vue.prototype.$API = API;
  },
}）

ここに画像の説明を挿入

注意点2：

問題: router-link タグにクリック イベントを追加すると、.native で変更しても無効になります。

回答: 理由はわかりませんが、オンライン ブログでははいと言われましたが、試してみたところうまくいかなかったので、タグに変更することしかできません。

41. 注文番号を取得し、支払いコンポーネントに支払い情報を表示する

コードを変更します。

src/pages/Pay/index.vue

<span class="fl">请您在提交订单<em class="orange time">4小时</em>之内完成支付，超时订单会自动取消。订单号：<em>{
   
   {orderId}}</em></span>
<span class="fr"><em class="lead">应付金额：</em><em class="orange money">￥{
   
   { payInfo.totalFee }}</em></span>

data() {
      return {
        payInfo: {},
      };
    },
    computed: {
      orderId() {
        return this.$route.query.orderId;
      },
    },
    //工作的时候：尽量别再生命周期函数中async|await
    mounted() {
      this.getPayInfo();
    },
    methods: {
      //获取支付信息
      async getPayInfo() {
        let result = await this.$API.reqPayInfo(this.orderId);
        //如果成功：组件当中存储支付信息
        if (result.code == 200) {
          this.payInfo = result.data;
        }
      },
    }

私の他の関連記事へのリンク

1. Vue Shangpinhui Mall Project-day06 [37. 取引データの取得 + 38. ユーザー住所情報の表示 + 39. 取引情報の表示と取引ページの完了 + 40. 注文の送信 + 41. 注文番号の取得と支払いコンポーネントでの支払いの表示 情報】
2. vue 上品匡モール project-day06【vue プラグイン-42. 決済ページで ElementUI を使用し、オンデマンドでインポート】
3. Vue 上品匡モール project-day06【43. WeChat 決済事業】

おすすめ

転載: blog.csdn.net/a924382407/article/details/129921394
おすすめ
ランキング
Python 描画 3D 動的ヒストグラム コード チュートリアル
[vue3 共通エラー 5] Uncaught (in Promise) TypeError: xxx は関数ではありません
シンプルアップロードExcelファイルやデータベースにデータを追加
springboot における import アノテーションの役割
numpy 多维矩阵的维度交换
WMS システム - ウェーブ管理
Redis（7）マスター/スレーブレプリケーション
三北斗七星星座コアグローバルシステムの導入は完了です！グローバルネットワークを推進するために、
sql server语法——排序查询
続行することはできません立ち往生
アーカイブ
もっと
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)

コードワールド

© 2018 codetd.com