一、商品结算页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