尚品汇（九）

最新推荐文章于 2024-09-21 20:11:59 发布

原创最新推荐文章于 2024-09-21 20:11:59 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

一、商品结算页trade

1.用户地址信息的展示

 computed: {
    ...mapState({
      address: (state) => state.trade.address,
      tradeInfo: (state) => state.trade.tradeInfo,
      orderId:state=>state.trade.payId
    }),
 //默认收件人的信息计算出来
    defaultUser() {
      //find:数组的方法,找到复合条件的元素.回调需要返回布尔值【真|假】，真即为查找结果【如果多个结果都为真，取其中一个】
      return this.address.find((item) => item.isDefault == "1") || {};
    },

<p @click="changeDefault(user)">
          <span class="s1">{{ user.fullAddress }}</span>
          <span class="s2">{{ user.phoneNum }}</span> 
          <span class="s3" v-show="user.isDefault == '1'">默认地址</span>
        </p>

  //修改默认地址
    changeDefault(user) {
      //排他操作
      //全部用户信息isDefault = 0；
      this.address.forEach((item) => {
        item.isDefault = "0";
      });
      user.isDefault = "1";
    },

二、支付页面

1.支付的静态组件
2.提交操作

当点击提交订单的按钮时，应该向服务器发送请求，

  //提交订单
    async submitInfo() {
      //整理参数:交易编码
      let tradeNo = this.tradeInfo.tradeNo;
      let data = {
        consignee: this.defaultUser.consignee, //付款人的名字
        consigneeTel: this.defaultUser.phoneNum, //付款人的手机号
        deliveryAddress: this.defaultUser.fullAddress, //付款人收货地址
        paymentWay: "ONLINE", //支付方式都是在线支付
        orderComment: this.msg, //买家留言
        orderDetailList: this.tradeInfo.detailArrayList, //购物车商品信息
      };

      //发请求:提交订单
      try {
        await this.$store.dispatch("submitInfo", { tradeNo, data });
        //将来提交订单成功【订单ID生成】，路由跳转pay页面，进行支付
        this.$router.push({path:'/pay',query:{orderId:this.orderId}});
        
      } catch (error) {
        alert(error.message);
      }
    },

   //提交订单:tradeNO 交易编码   data:付款人信息
    async submitInfo({ commit, state, dispatch }, { tradeNo, data }) {
        //提交订单的时候：返回一个很重要数据->订单ID【这笔交易唯一标识符:付款人、收款人】
        let result = await reqSubmitOrder(tradeNo, data);
        if (result.code == 200) {
            commit('SUBMITINFO', result.data);
            return 'ok';
        } else {
            return Promise.reject(new Error(result.message));
        }
    }
//请求成功后存储订单号
SUBMITINFO(state,payId){
        state.payId = payId;
    }

三、获取订单号展示支付信息

别在生命周期中使用async

四、立即支付使用ElementUI组件库

React(Vue) antd(PC端) antd-mobile(移动端)
Vue: ElementUI(PC) vant(移动端)

1.组件的按需引入

安装工具

npm install babel-plugin-component -D

配置文件babel.config.js的修改,配置文件修改后需要重启

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk",
      },
    ],
  ],
};

2.二维码生成

main.js

//按需引入
import { Button, Row, Col, MessageBox,Message,Input} from 'element-ui';
//element-ui大多数组件，注册为全局组件Vue.component|Vue.use
Vue.use(Button);
Vue.use(Row);
Vue.use(Col);
Vue.use(Input)
//按需引入写法不同的:MessageBox、Message、Loading、Notification
Vue.prototype.$msgbox = MessageBox;
//消息提示框
Vue.prototype.$alert = MessageBox.alert;

Vue.prototype.$message = Message;

  //立即支付按钮
    async open() {
      //生成一个二维码URL
      let url = await QRCode.toDataURL(this.payInfo.codeUrl);
      //第一个参数:即为内容区域
      //第二个参数:标题
      //第三个参数:组件的配置项
      this.$alert(`<img src=${url}>`, "请你微信扫码支付", {
        dangerouslyUseHTMLString: true, //将字符串转换为标签
        center: true, //居中
        showClose: false, //右上角的关闭按钮不显示
        confirmButtonText: "支付成功", //确定按钮的文本
        showCancelButton: true, //显示取消按钮
        cancelButtonText: "支付遇见问题", //取消按钮的文本
        closeOnClickModal: true, //点击遮罩层关闭messagebox
        beforeClose:(action, instance, done)=>{ //在消息盒子关闭之前会触发
           //action参数:可以区分用户点击的是取消【cancel】、确定【confirm】
           //instance参数:当前消息框组件VC
           //done参数：是一个函数,函数可以关闭消息盒子
           if(action=='confirm' && this.code==200){
              //清除定时器
              clearInterval(this.timer);
              //关闭盒子
              done();
              //路由跳转
              this.$router.push('/paysuccess');
           }else if(action=='cancel' && this.code!=200){
               //清除定时器
              clearInterval(this.timer);
              //关闭盒子
              done();
              this.$message.error('支付遇见问题请联系超管豪哥');
           }
        }
      });
      //查询支付结果,开启定时器每隔一段时间询问支付结果
     this.timer  = setInterval(async () => {
        //发请求获取支付结果
        let result = await this.$http.reqPayResult(this.payInfo.orderId);
        //返回数据当中：code=200代表支付成功  code=205未支付
        if (result.code == 200) {
          //支付成功了
          //存储一下支付成功的code数值，通过他判断支付是否成功
          this.code = result.code;
          //清除定时器
          clearInterval(this.timer);
          //关闭messagebox
          this.$msgbox.close(); 
          //在路由跳转
          this.$router.push('/paySuccess');
        } else {
          //未支付
          this.code = result.code;
        }
      }, 1000);
    },

五、图片懒加载Vue-lazyLoad

下载插件

$ npm i vue-lazyload -S

main.js中

//引入插件
import  VueLazyLoad from 'vue-lazyLoad'
//注册
Vue.use(VueLayzyLoad,{
	//加载默认的图片
	loading:
})

六、自定义指令

七、vee-validate

安装
cnpm i vee-validate@2 --save

引入
注册

八、路由懒加载

打包构建应用时，js包很大，影响页面加载，若把不同路由对应的组件分割为不同的代码块，路由访问时才加载对应组件，就会更高效

  {
        path: '/home',
        name: 'erha',
        // component: home,
        // 路由懒加载 访问时才加载
        component:()=>import('@/pages/home'),
        meta: { show: true },
    }

九、打包上线

npm run build打包
项目打包后，代码经过压缩加密，若运行时出错，无法得出哪里的代码出错，但是有了map就可以准确输出哪里的代码出错

不生成map文件在vue.config.js中配置缩小文件体积

  // 不生成map文件
  // productionSourceMap:false,

十、购买服务器

可以让别人访问
1.阿里云
2.腾讯云

十一、nginx反向代理

为什么访问ip地址就能访问到我们的项目？

nginx配置: 1 : xshel1进入根目录/etc
2:进入etc目录，这个目录下有一个nginx目录，进入到这个目录【已经安装过nginx:如果没有安装过，四五个文件】3:如果想安装nginx:yum
install nginx
4:安装完nginx服务器以后，你会发现在nginx目录下，多了一个nginx.conf文件，在这个文件中进行配器5:vim
nginx.conf进行编辑，主要添加如下两项解决第一个问题: location/ i
root/root/jch/was/shangpinhui/dist;indexindex.html; try_files $uri
$uri/ /index.html; , 1/
解决第二个问题location /api i proxy_pass
http://39.98.123.211;
6:nginx服务器跑起来 service nginx start