xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-02 02:06:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

页面优化

Browse Source 
1.添加PC端订单支付 弹出支付二维码
2.添加确认订单的面包屑  从购物车和其他方向进去的不同显示
3.修改移动端按钮和合计样式显示问题
4.添加购物车的全选功能
5.添加支付页面面包屑功能
6.修改订单详情页 添加面包屑和分割线
7.添加购物车数量编辑的保存
This commit is contained in:
lin 2022-03-24 17:05:47 +08:00
parent 9f955a34eb
commit 9f7ce41eac
14 changed files with 1930 additions and 1737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
rc-busness/ajax/getData.js
View File

@ -56,7 +56,8 @@ export const getleckCourse = (name, offset) => {
* 加入购物车 * 加入购物车
*/ */
export const postCourseId = (productCode, buyCount, memberId, mobile, productImg, productName, productPrice, specifications, leftAllotment, basePiont) => { export const postCourseId = (productCode, buyCount, memberId, mobile, productImg, productName, productPrice,
specifications, leftAllotment, basePiont) => {
var data = { var data = {
buyCount: buyCount, buyCount: buyCount,
memberId: memberId, memberId: memberId,
@ -100,7 +101,9 @@ export const deleteCart = ( productCode) => {
* 购物车批量提交 * 购物车批量提交
*/ */
export const mostAddClass = (id) => { export const mostAddClass = (id) => {
return fetch('/api/mostAddClass/', {id}) return fetch('/api/mostAddClass/', {
id
})
} }
/** /**
* 删除购物车 * 删除购物车
@ -221,8 +224,7 @@ export const userque = (goodsName, petType, curPage,curRow) => {
query += '&petType=' + petType; query += '&petType=' + petType;
} }
query += queryTail; query += queryTail;
var data = { var data = {}
}
return fetch('goods' + query, data, 'POST') return fetch('goods' + query, data, 'POST')
} }
@ -429,8 +431,7 @@ export const productQuery = (productCode) => {
if (productCode) { if (productCode) {
url += '?productCode=' + encodeURI(productCode); url += '?productCode=' + encodeURI(productCode);
} }
var data = { var data = {}
}
return fetch(url, data, 'POST') return fetch(url, data, 'POST')
} }
@ -515,8 +516,7 @@ export const getdraw = (paramsObj) => {
} }
//用户所有的优惠券 //用户所有的优惠券
export const allConfig = (memberId, channelSecurity, mobile) => { export const allConfig = (memberId, channelSecurity, mobile) => {
var data = { var data = {}
}
return fetch('couponConfig?type=getAll', data, 'POST') return fetch('couponConfig?type=getAll', data, 'POST')
} }
@ -666,6 +666,13 @@ export const getOrderList = (user, status) => {
return fetch('memberAddress?type=' + type, data, 'POST') return fetch('memberAddress?type=' + type, data, 'POST')
} }
//购物车操作
export const changeCartNumber = (data) => {
return fetch('updateCartCount', data, 'POST')
}
//支付宝支付二维码 //支付宝支付二维码
export const generateOrderAlipay = (orderNo, payType) => { export const generateOrderAlipay = (orderNo, payType) => {
@ -683,4 +690,3 @@ export const getOrderList = (user, status) => {
//ret = JSON.parse(ret); //ret = JSON.parse(ret);
//return ret; //return ret;
} }

2
rc-busness/ajax/util.js
View File

@ -56,7 +56,7 @@ let util = {
message = '请返回支付宝继续当前订单的支付'; message = '请返回支付宝继续当前订单的支付';
break; break;
case "3": case "3":
message = '请返回手机网页端继续当前订单的支付'; message = '请返回手机网页端继续当前订单的支付或扫描二维码进行支付';
break; break;
default: default:
message = '订单已过期，请重新下单'; message = '订单已过期，请重新下单';

7
rc-busness/assets/css/orderquantity.less
View File

@ -463,7 +463,12 @@
} }
.qrcode{
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
} }

48
rc-busness/assets/css/settlement.less
View File

@ -15,7 +15,7 @@ ul li ol li em strong i {
align-items: center; align-items: center;
box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
.rc-left { .rc-left {
margin-left: 0.20rem; margin-left: 0.2rem;
} }
span { span {
font-size: 14px; font-size: 14px;
@ -25,19 +25,18 @@ color: #333333;
em { em {
font-style: normal; font-style: normal;
font-size: 0.18rem; font-size: 0.18rem;
color: #E1001A; color: #e1001a;
} }
strong { strong {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 0.48rem; height: 0.48rem;
background: #E2001A; background: #e2001a;
border-radius: 0.30rem; border-radius: 0.3rem;
color: white; color: white;
width: 1rem; width: 1rem;
margin-right: 0.2rem margin-right: 0.2rem;
;
} }
} }
.rc-main { .rc-main {
@ -68,7 +67,6 @@ color: #333333;
display: block; display: block;
margin-left: 18px; margin-left: 18px;
width: 62%; width: 62%;
} }
} }
.delivery { .delivery {
@ -215,7 +213,6 @@ color: #333333;
} }
} }
.rc-merchandise { .rc-merchandise {
width: 100%; width: 100%;
margin-top: 32px; margin-top: 32px;
@ -241,7 +238,6 @@ color: #333333;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
} }
li:last-child { li:last-child {
@ -258,7 +254,6 @@ color: #333333;
} }
} }
.rc-payment { .rc-payment {
width: 100%; width: 100%;
margin-top: 32px; margin-top: 32px;
@ -269,7 +264,6 @@ color: #333333;
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
margin-right: 16px; margin-right: 16px;
} }
img { img {
width: 8px; width: 8px;
@ -296,18 +290,14 @@ color: #333333;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
} }
} }
} }
} }
} }
//pc端 //pc端
@media screen and (min-width: 768px) and (max-width: 1920px) { @media screen and (min-width: 768px) and (max-width: 1920px) {
.rc-main { .rc-main {
width: 92%; width: 92%;
margin: 0 auto; margin: 0 auto;
@ -316,7 +306,7 @@ color: #333333;
} }
.rc-border { .rc-border {
width: 100%; width: 100%;
border-bottom: 1px solid #D7D7D7; border-bottom: 1px solid #d7d7d7;
margin-top: 32px; margin-top: 32px;
} }
.rc-receiving { .rc-receiving {
@ -326,7 +316,7 @@ color: #333333;
flex-direction: column; flex-direction: column;
em { em {
font-style: normal; font-style: normal;
color: #E1001A; color: #e1001a;
font-size: 26px; font-size: 26px;
} }
span { span {
@ -453,8 +443,6 @@ color: #333333;
width: 100%; width: 100%;
margin-left: 16px; margin-left: 16px;
} }
.rc-userright { .rc-userright {
display: flex; display: flex;
@ -475,7 +463,7 @@ color: #333333;
align-items: center; align-items: center;
margin-left: 119px; margin-left: 119px;
span { span {
color: #E1001A; color: #e1001a;
font-size: 20px; font-size: 20px;
} }
i { i {
@ -504,9 +492,7 @@ color: #333333;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
@ -524,7 +510,6 @@ color: #333333;
i { i {
font-style: normal; font-style: normal;
color: #666666; color: #666666;
} }
li { li {
list-style: none; list-style: none;
@ -533,7 +518,6 @@ color: #333333;
justify-content: space-between; justify-content: space-between;
span { span {
color: #333333; color: #333333;
} }
} }
li:last-child { li:last-child {
@ -546,7 +530,6 @@ color: #333333;
} }
} }
.rc-payment { .rc-payment {
width: 100%; width: 100%;
margin-top: 80px; margin-top: 80px;
@ -557,7 +540,6 @@ color: #333333;
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
margin-right: 16px; margin-right: 16px;
} }
img { img {
width: 8px; width: 8px;
@ -575,7 +557,6 @@ color: #333333;
font-style: normal; font-style: normal;
color: #666666; color: #666666;
display: block; display: block;
} }
li { li {
list-style: none; list-style: none;
@ -583,13 +564,9 @@ color: #333333;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span { span {
color: #333333; color: #333333;
} }
} }
} }
} }
.rc-foot { .rc-foot {
@ -605,19 +582,17 @@ color: #333333;
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
margin-right: 20px; margin-right: 20px;
} }
em { em {
font-style: normal; font-style: normal;
color: #E1001A; color: #e1001a;
font-size: 26px; font-size: 26px;
} }
span { span {
display: block; display: block;
width: 164px; width: 164px;
margin-top: 36px; margin-top: 36px;
background: #E2001A; background: #e2001a;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
color: white; color: white;
@ -627,10 +602,7 @@ height: 48px;
border-radius: 30px; border-radius: 30px;
} }
} }
} }
} }
} }

51
rc-busness/assets/css/usertion.less
View File

@ -39,7 +39,6 @@ ul li ol li em strong i {
margin-left: 1.125rem; margin-left: 1.125rem;
width: 62%; width: 62%;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
} }
.ts-button-container { .ts-button-container {
@ -102,7 +101,7 @@ ul li ol li em strong i {
display: block; display: block;
font-size: 0.87rem; font-size: 0.87rem;
color: #333333; color: #333333;
margin-left: .5rem; margin-left: 0.5rem;
} }
} }
.per-delivery { .per-delivery {
@ -125,7 +124,6 @@ ul li ol li em strong i {
display: none; display: none;
} }
.rc-usermain { .rc-usermain {
display: flex; display: flex;
.rc-image { .rc-image {
@ -213,7 +211,6 @@ ul li ol li em strong i {
} }
} }
.rc-merchandise { .rc-merchandise {
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
@ -240,7 +237,6 @@ ul li ol li em strong i {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
} }
li:last-child { li:last-child {
@ -256,7 +252,6 @@ ul li ol li em strong i {
} }
} }
.rc-payment { .rc-payment {
padding-right: 0.7rem; padding-right: 0.7rem;
padding-left: 0.7rem; padding-left: 0.7rem;
@ -269,7 +264,6 @@ ul li ol li em strong i {
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
margin-right: 16px; margin-right: 16px;
} }
img { img {
width: 8px; width: 8px;
@ -296,21 +290,15 @@ ul li ol li em strong i {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
} }
} }
} }
} }
} }
//pc端 //pc端
@media screen and (min-width: 769px) { @media screen and (min-width: 769px) {
.ts-button-container { .ts-button-container {
.ts-standard-btn { .ts-standard-btn {
&:first-child { &:first-child {
@ -361,14 +349,19 @@ ul li ol li em strong i {
} }
.rc-main { .rc-main {
margin: 0 auto; margin: 0 auto;
margin-top: 90px; // margin-top: 90px;
margin-top: 0;
.notop{
margin-top: 0;
}
.rc-userbottomm { .rc-userbottomm {
display: none; display: none;
} }
.rc-border { .rc-border {
width: 100%; width: 100%;
border-bottom: 1px solid #D7D7D7; border-bottom: 1px solid #d7d7d7;
margin-top: 32px; margin-top: 32px;
} }
.rc-receiving { .rc-receiving {
@ -378,7 +371,7 @@ ul li ol li em strong i {
flex-direction: column; flex-direction: column;
em { em {
font-style: normal; font-style: normal;
color: #E1001A; color: #e1001a;
font-size: 26px; font-size: 26px;
} }
span { span {
@ -507,7 +500,6 @@ ul li ol li em strong i {
width: 100%; width: 100%;
margin-left: 16px; margin-left: 16px;
justify-content: end; justify-content: end;
} }
.rc-userright { .rc-userright {
display: flex; display: flex;
@ -528,7 +520,7 @@ ul li ol li em strong i {
align-items: center; align-items: center;
margin-left: 119px; margin-left: 119px;
span { span {
color: #E1001A; color: #e1001a;
font-size: 20px; font-size: 20px;
} }
i { i {
@ -557,9 +549,7 @@ ul li ol li em strong i {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
@ -577,7 +567,6 @@ ul li ol li em strong i {
i { i {
font-style: normal; font-style: normal;
color: #666666; color: #666666;
} }
li { li {
list-style: none; list-style: none;
@ -586,7 +575,6 @@ ul li ol li em strong i {
justify-content: space-between; justify-content: space-between;
span { span {
color: #333333; color: #333333;
} }
} }
li:last-child { li:last-child {
@ -599,7 +587,6 @@ ul li ol li em strong i {
} }
} }
.rc-payment { .rc-payment {
width: 100%; width: 100%;
margin-top: 80px; margin-top: 80px;
@ -610,7 +597,6 @@ ul li ol li em strong i {
font-size: 18px; font-size: 18px;
font-style: normal; font-style: normal;
margin-right: 16px; margin-right: 16px;
} }
img { img {
width: 8px; width: 8px;
@ -628,7 +614,6 @@ ul li ol li em strong i {
font-style: normal; font-style: normal;
color: #666666; color: #666666;
display: block; display: block;
} }
li { li {
list-style: none; list-style: none;
@ -636,18 +621,17 @@ ul li ol li em strong i {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span { span {
color: #333333; color: #333333;
} }
} }
} }
} }
.rc-foot { .rc-foot {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.online{
margin-bottom: 20px;
}
.rc-foo { .rc-foo {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -658,20 +642,13 @@ ul li ol li em strong i {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
margin-right: 20px; margin-right: 20px;
} }
em { em {
font-style: normal; font-style: normal;
color: #E1001A; color: #e1001a;
font-size: 26px; font-size: 26px;
} }
} }
} }
} }
} }

12
rc-busness/components/tabs.vue
View File

@ -3,7 +3,7 @@
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item to="/" >{{ this.homepageName }}</el-breadcrumb-item> <el-breadcrumb-item to="/" >{{ this.homepageName }}</el-breadcrumb-item>
<el-breadcrumb-item :to=item.path v-for="(item, index) in displayData" <el-breadcrumb-item :to="{ path : item.path , query : item.query || {} }" v-for="(item, index) in displayData"
:key="index">{{ item.title }}</el-breadcrumb-item> :key="index">{{ item.title }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -29,7 +29,9 @@ export default {
'/personal/useraddress/':'我的订单', '/personal/useraddress/':'我的订单',
'/myorder/userrecord/':'购物车', '/myorder/userrecord/':'购物车',
'/useraddress/openaddress/':'收货地址', '/useraddress/openaddress/':'收货地址',
'/personal/discount/':'优惠券' '/personal/discount/':'优惠券',
'/productdetails/producted' : '产品详情',
'/personal/useraddress' : '我的订单'
}, },
}; };
}, },
@ -55,7 +57,7 @@ export default {
if(this.crumbs && this.crumbs.length>0) if(this.crumbs && this.crumbs.length>0)
{ {
this.crumbs.forEach(function(ele,index){ this.crumbs.forEach(function(ele,index){
let displayObj= {path:'',title:''}; let displayObj= {path:'',title:'',query : {}};
if(ele.path) { if(ele.path) {
displayObj.path = ele.path; displayObj.path = ele.path;
for(let path in _self.nameMapping) { for(let path in _self.nameMapping) {
@ -68,6 +70,10 @@ export default {
if(ele.title) { if(ele.title) {
displayObj.title = ele.title; displayObj.title = ele.title;
} }
if(ele.query) {
displayObj.query = ele.query;
}
_self.displayData.push(displayObj); _self.displayData.push(displayObj);
}); });
} }

1
rc-busness/config/async/env.js
View File

@ -8,6 +8,7 @@
let baseUrl = 'http://47.96.75.242:10086/royalcanin/royalcanin/' let baseUrl = 'http://47.96.75.242:10086/royalcanin/royalcanin/'
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
baseUrl = 'http://47.96.75.242:10086/royalcanin/royalcanin/'; baseUrl = 'http://47.96.75.242:10086/royalcanin/royalcanin/';
// baseUrl = 'http://192.168.10.127:10086/royalcanin/royalcanin/';
} else if (process.env.NODE_ENV === 'production') { } else if (process.env.NODE_ENV === 'production') {
baseUrl = 'https://shop.royalcanin.com.cn/royalcanin/royalcanin/royalcanin/'; baseUrl = 'https://shop.royalcanin.com.cn/royalcanin/royalcanin/royalcanin/';
} }

72
rc-busness/pages/myorder/userrecord.vue
View File

@ -35,7 +35,7 @@
</div> </div>
<div class="list" v-for="(item, index) in cartData" :key="index"> <div class="list" v-for="(item, index) in cartData" :key="index">
<div class="list-left"> <div class="list-left">
<label class="check-label"><input type="checkbox" v-model="item.checked" /></label> <label class="check-label"><input type="checkbox" v-model="item.checked" @change="checkRadio(item.checked)" /></label>
<div class="product"> <div class="product">
<div class="product-img"><img :src="item.productImg" alt="" /></div> <div class="product-img"><img :src="item.productImg" alt="" /></div>
<div class="right"> <div class="right">
@ -49,7 +49,7 @@
<li> <li>
<div class="rc-jia"> <div class="rc-jia">
<img src="../../assets/image/userjian.png" alt="" @click="sub(item.buyCount, index)" /> <img src="../../assets/image/userjian.png" alt="" @click="sub(item.buyCount, index)" />
<input type="text" v-model="item.buyCount" /> <input type="text" v-model="item.buyCount" @blur="saveCartNumber(item)" />
<img src="../../assets/image/userjia.png" alt="" @click="plus(item.buyCount, index)" /> <img src="../../assets/image/userjia.png" alt="" @click="plus(item.buyCount, index)" />
</div> </div>
</li> </li>
@ -61,9 +61,12 @@
<div class="rc-footera"> <div class="rc-footera">
<div class="rc-foote"> <div class="rc-foote">
<div class="rc-shop"> <div class="rc-shop">
<label style="visibility: hidden;"> <!-- style="visibility: hidden;" -->
<input type="checkbox" v-model="checkAll" /> <label class="check-all-main">
全选 <!-- <el-checkbox v-model="checkAllFlag">备选项</el-checkbox> -->
<input type="checkbox" v-model="checkAllFlag" @change="toggleCheckAll" />
<span>全选</span>
</label> </label>
</div> </div>
<div class="rc-delete"> <div class="rc-delete">
@ -100,7 +103,7 @@ import Myheader from '~/components/header.vue';
import MyFooter from '~/components/rc-footer.vue'; import MyFooter from '~/components/rc-footer.vue';
import tabs from '@/components/tabs.vue'; import tabs from '@/components/tabs.vue';
import { mapMutations, mapState } from 'vuex'; import { mapMutations, mapState } from 'vuex';
import { isexistCart, generateOrderWX, deleteCart } from '../../ajax/getData'; import { isexistCart, generateOrderWX, deleteCart,changeCartNumber } from '../../ajax/getData';
export default { export default {
middleware: 'metaTitle', middleware: 'metaTitle',
meta: { title: '购物车' }, meta: { title: '购物车' },
@ -171,7 +174,6 @@ export default {
this.carmessage(); this.carmessage();
// this.checkIsLogin(); // this.checkIsLogin();
} }
}, },
watch: { watch: {
userInfo(newVal) { userInfo(newVal) {
@ -186,14 +188,31 @@ export default {
MyFooter MyFooter
}, },
methods: { methods: {
/* 监听全选功能 */
async toggleCheckAll(e){
for (var i = 0; i < this.cartData.length; i++) {
this.$set(this.cartData[i],'checked',this.checkAllFlag);
}
},
/* 监听单选 */
async checkRadio(state){
/* 判断是否全选 */
let checkCart = this.cartData.filter(val=>{
return val.checked;
});
this.checkAllFlag = checkCart.length == this.cartData.length;
},
//请求猫 //请求猫
...mapMutations(['checkIsLogin']), ...mapMutations(['checkIsLogin']),
async carmessage() { async carmessage() {
let user = this.userInfo; let user = this.userInfo;
console.log(user);
this.userid = user.id; this.userid = user.id;
let data = await isexistCart(user.id); let data = await isexistCart(user.id);
console.log(data,'datadata'); for (var i = 0; i < data.length; i++) {
let item = data[i];
data.startBuyCount = item.buyCount;
}
this.cartData = data; this.cartData = data;
// this.goldmedal = data; // this.goldmedal = data;
}, },
@ -280,6 +299,7 @@ export default {
} }
this.cartData[index].buyCount = parseInt(this.cartData[index].buyCount) + 1; this.cartData[index].buyCount = parseInt(this.cartData[index].buyCount) + 1;
this.saveCartNumber(this.cartData[index])
}, },
// 数量减方法 // 数量减方法
sub(num, index) { sub(num, index) {
@ -288,6 +308,26 @@ export default {
} else { } else {
this.cartData[index].buyCount = parseInt(this.cartData[index].buyCount) - 1; this.cartData[index].buyCount = parseInt(this.cartData[index].buyCount) - 1;
} }
this.saveCartNumber(this.cartData[index])
},
/* 保存购物车数量 */
async saveCartNumber(cartInfo){
if(!cartInfo.buyCount || cartInfo.buyCount <= 0){
return this.$messageToast('数量不正确','error');
}
if (cartInfo.buyCount >= cartInfo.leftAllotment) {
cartInfo.buyCount = cartInfo.startBuyCount;
return this.$messageToast('已达到本品最大购买上限','error');
}
let { code } = await changeCartNumber({
buyCount : cartInfo.buyCount,
id : cartInfo.id,
});
if(code == 1){
cartInfo.startBuyCount = cartInfo.buyCount;
}
}, },
// 求总价 // 求总价
@ -354,7 +394,8 @@ export default {
this.$router.push({ this.$router.push({
path: '/personal/settlement', path: '/personal/settlement',
query: { query: {
list: JSON.stringify(list) list: JSON.stringify(list),
type: 'cart'
} }
// params: { test:'222'}, // params: { test:'222'},
}); });
@ -421,7 +462,7 @@ export default {
}, },
...mapState({ ...mapState({
userInfo: state => state.user.userInfo, userInfo: state => state.user.userInfo,
loginState : state => state.login.loginState, loginState: state => state.login.loginState
}) })
} }
}; };
@ -452,6 +493,15 @@ export default {
display: block; display: block;
} }
.check-all-main{
display: flex;
justify-content: center;
align-items: center;
span{
margin-left: 10px;
}
}
span { span {
font-style: normal; font-style: normal;
font-size: 18px; font-size: 18px;

22
rc-busness/pages/myorder/usertion.vue
View File

@ -2,8 +2,11 @@
<div class="user-main"> <div class="user-main">
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<div class="rc-main" v-for="(item, index) in goldmedal" :key="item.id"> <tabs :crumbs="crumbs"></tabs>
<div class="online bold"></div> <!-- <div class="online bold notop"></div> -->
<!-- <div class="rc-top"></div> -->
<div class="rc-max-width--xl rc-main" v-for="(item, index) in goldmedal" :key="item.id">
<div class="online bold notop"></div>
<div class="rc-receiving useruantity"> <div class="rc-receiving useruantity">
<em>{{ item.status == '0' ? '待付款' : item.status == '1' ? '待收货' : item.status == '2' ? '已完成' : item.status == '3' ? '已取消' : '异常订单' }}</em> <em>{{ item.status == '0' ? '待付款' : item.status == '1' ? '待收货' : item.status == '2' ? '已完成' : item.status == '3' ? '已取消' : '异常订单' }}</em>
<span>{{ orderstatus }}</span> <span>{{ orderstatus }}</span>
@ -81,7 +84,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="online bold "></div>
<div class="rc-payment"> <div class="rc-payment">
<div class="rc-payment"> <div class="rc-payment">
<ul> <ul>
@ -113,6 +116,7 @@
<div class="rc-foot"> <div class="rc-foot">
<div class="rc-foo"> <div class="rc-foo">
<div class="online bold "></div>
<div style=""> <div style="">
<i>合计金额:</i> <i>合计金额:</i>
<em>￥{{ usersalesAmount }}</em> <em>￥{{ usersalesAmount }}</em>
@ -146,6 +150,7 @@
<script> <script>
import Myheader from '~/components/header.vue'; import Myheader from '~/components/header.vue';
import tabs from '@/components/tabs.vue';
import { mapMutations, mapState } from 'vuex'; import { mapMutations, mapState } from 'vuex';
import MyFooter from '~/components/rc-footer.vue'; import MyFooter from '~/components/rc-footer.vue';
import Vue from 'vue'; import Vue from 'vue';
@ -194,7 +199,15 @@ export default {
paytypeText: '', paytypeText: '',
distribution: '快递', distribution: '快递',
catimage: require('../../assets/image/rc-left.png') catimage: require('../../assets/image/rc-left.png')
},
crumbs : [
{
path: '/personal/useraddress'
},
{
title : '订单详情'
} }
]
}; };
}, },
methods: { methods: {
@ -405,7 +418,8 @@ export default {
}, },
components: { components: {
Myheader, Myheader,
MyFooter MyFooter,
tabs
}, },
computed : { computed : {
...mapState({ ...mapState({

8
rc-busness/pages/personal/settlement.less
View File

@ -428,11 +428,17 @@ ul li ol li em strong i {
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
text-align: right; text-align: right;
.totalInfo{
display: flex;
justify-content: center;
align-items: center;
}
i { i {
font-style: normal; font-style: normal;
color: #333333; color: #333333;
font-size: 20px; font-size: 19px;
margin-right: 20px; margin-right: 20px;
white-space: nowrap;
} }
em { em {

56
rc-busness/pages/personal/settlement.vue
View File

@ -2,6 +2,7 @@
<div class="settlement"> <div class="settlement">
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top"></div> <div class="rc-top"></div>
<tabs :crumbs="crumbs"></tabs>
<div class="rc_contline"></div> <div class="rc_contline"></div>
<div class="rc-main"> <div class="rc-main">
<div class="address-list"> <div class="address-list">
@ -56,7 +57,9 @@
<li> <li>
<span>活动促销:</span> <span>活动促销:</span>
<i class="ts-right-arr ts-right-arr--two" @click="userget()">{{ isHasChose ? curCoupon.couponName : drawlist.length ? `有${drawlist.length}张优惠券可选择` : '无优惠券' }}</i> <i class="ts-right-arr ts-right-arr--two" @click="userget()">
{{ isHasChose ? curCoupon.couponName : drawlist.length ? `有${drawlist.length}张优惠券可选择` : '无优惠券' }}
</i>
</li> </li>
<li> <li>
@ -75,14 +78,16 @@
<div class="rc-main"> <div class="rc-main">
<div class="rc-foot"> <div class="rc-foot">
<div class="rc-foo"> <div class="rc-foo">
<div> <div class="rc-foo-left">
<div class="discountInfo" v-if="discountAmount"> <div class="discountInfo" v-if="discountAmount">
<i>优惠金额:</i> <i>优惠金额:</i>
<em>{{ discountAmount }}</em> <em>{{ discountAmount }}</em>
</div> </div>
<div class="totalInfo">
<i>合计金额:</i> <i>合计金额:</i>
<em>{{ finalAmount }}</em> <em>{{ finalAmount }}</em>
</div> </div>
</div>
<div style="font-weight: bold"><span @click="preJiesuan()">提交订单</span></div> <div style="font-weight: bold"><span @click="preJiesuan()">提交订单</span></div>
</div> </div>
</div> </div>
@ -147,6 +152,43 @@ import { mapMutations,mapState } from 'vuex';
import itemMixin from '../../../smart-admin-web/src/components/main/components/side-menu/item-mixin'; import itemMixin from '../../../smart-admin-web/src/components/main/components/side-menu/item-mixin';
export default { export default {
middleware: 'metaTitle', middleware: 'metaTitle',
asyncData({ app, $router }) {
const { type = 'cart', list = [{}], pathQuery = {} } = app.router.history.current.query;
let crumbs = [],
product = typeof list == 'string' ? JSON.parse(list)[0] : list[0],
query = typeof pathQuery == 'string' ? JSON.parse(pathQuery) : pathQuery;
/* 处理面包屑 */
switch (type) {
case 'cart': //从购物车进入的
crumbs = [
{
path: '/myorder/userrecord/'
},
{
path: '/personal/settlement/'
}
];
break;
case 'product': //从产品详情进入的
crumbs = [
{
path: '/productdetails/producted',
title: product.productName,
query
},
{
path: '/personal/settlement/'
}
];
break;
default:
break;
}
console.log(crumbs, 'crumbs');
return {
crumbs
};
},
meta: { title: '订单结算' }, meta: { title: '订单结算' },
data() { data() {
return { return {
@ -213,7 +255,7 @@ export default {
// 折扣计算 // 折扣计算
...mapState({ ...mapState({
userInfo: state => state.user.userInfo, userInfo: state => state.user.userInfo,
loginState : state => state.login.loginState, loginState: state => state.login.loginState
}) })
}, },
methods: { methods: {
@ -551,7 +593,9 @@ export default {
if (!userInfo) { if (!userInfo) {
this.$router.push({ this.$router.push({
path: '/userlogin/login', path: '/userlogin/login',
query: {} query: {
}
}); });
return; return;
} }
@ -653,7 +697,8 @@ export default {
this.$router.push({ this.$router.push({
path: '/personal/userpay', path: '/personal/userpay',
query: { query: {
userPayData: JSON.stringify(userPayData) userPayData: JSON.stringify(userPayData),
pathQuery : JSON.stringify(this.$route.query),
} }
}); });
} else { } else {
@ -699,7 +744,6 @@ export default {
} }
// this.checkIsLogin(); // this.checkIsLogin();
// this.addressstype = this.$route.query.stype; // this.addressstype = this.$route.query.stype;
// this.orderNumber = this.$route.query.orderNumber; // this.orderNumber = this.$route.query.orderNumber;
// this.canceldanhao(this.orderNumber); // this.canceldanhao(this.orderNumber);

95
rc-busness/pages/personal/useraddress.vue
View File

@ -102,7 +102,6 @@
<div class="online bold"></div> <div class="online bold"></div>
</div> </div>
</div> </div>
<el-dialog :visible.sync="showPaytypeWarning" :close-on-click-modal="false"> <el-dialog :visible.sync="showPaytypeWarning" :close-on-click-modal="false">
<div class="ts-warning-popup"> <div class="ts-warning-popup">
@ -111,6 +110,7 @@
<h3>温馨提示</h3> <h3>温馨提示</h3>
<span class="">{{ paytypeWarning.message }}</span> <span class="">{{ paytypeWarning.message }}</span>
</div> </div>
<div class="qrcode rc-center"><vue-qr :text="qrtext" :size="200"></vue-qr></div>
</div> </div>
</el-dialog> </el-dialog>
<MyFooter></MyFooter> <MyFooter></MyFooter>
@ -122,8 +122,9 @@ import Myheader from '~/components/header.vue';
import MyFooter from '~/components/rc-footer.vue'; import MyFooter from '~/components/rc-footer.vue';
import tabs from '~/components/tabs.vue'; import tabs from '~/components/tabs.vue';
import util from '@/ajax/util'; import util from '@/ajax/util';
import { customerorders, userindent, canceldanhao, repayOrde } from '../../ajax/getData'; import { customerorders, userindent, canceldanhao, repayOrde, generateOrderWX } from '../../ajax/getData';
import { mapMutations, mapState } from 'vuex'; import { mapMutations, mapState } from 'vuex';
import vueQr from 'vue-qr';
export default { export default {
data() { data() {
return { return {
@ -195,7 +196,8 @@ export default {
userprice: '', userprice: '',
catimage: '' catimage: ''
} }
] ],
qrtext : '', //二维码内容
}; };
}, },
computed: { computed: {
@ -220,7 +222,8 @@ export default {
components: { components: {
Myheader, Myheader,
MyFooter, MyFooter,
tabs tabs,
vueQr
}, },
methods: { methods: {
...mapMutations(['changemessage', 'checkIsLogin']), ...mapMutations(['changemessage', 'checkIsLogin']),
@ -252,13 +255,43 @@ export default {
this.useralllist[y] = {}; this.useralllist[y] = {};
} }
if (!this.goldmedal[y].orderDetailList) continue; if (!this.goldmedal[y].orderDetailList) continue;
// let item = {
// ...this.useralllist[y],
// ...this.goldmedal[y],
// phoneNumber : this.goldmedal[y].addressPhoneNumber,
// lengthnum : this.goldmedal[y].orderDetailList.length
// }
// this.useralllist[y] = item;
this.useralllist[y].orderNumber = this.goldmedal[y].orderNumber; this.useralllist[y].orderNumber = this.goldmedal[y].orderNumber;
this.useralllist[y].status = this.goldmedal[y].status; this.useralllist[y].status = this.goldmedal[y].status;
this.useralllist[y].addressUserName = this.goldmedal[y].addressUserName; this.useralllist[y].addressUserName = this.goldmedal[y].addressUserName;
this.useralllist[y].phoneNumber = this.goldmedal[y].addressPhoneNumber; this.useralllist[y].phoneNumber = this.goldmedal[y].addressPhoneNumber;
this.useralllist[y].paytype = this.goldmedal[y].paytype;
this.useralllist[y].salesAmount = this.goldmedal[y].salesAmount; this.useralllist[y].salesAmount = this.goldmedal[y].salesAmount;
this.useralllist[y].lengthnum = this.goldmedal[y].orderDetailList.length; this.useralllist[y].lengthnum = this.goldmedal[y].orderDetailList.length;
this.useralllist[y].paytype = this.goldmedal[y].paytype; let item = this.goldmedal[y];
let orderDetail = item.orderDetailList[0];
this.useralllist[y].payInfo = [
{
basePoint: item.item,
productName: orderDetail.productName,
buyCount: orderDetail.pcs,
productCode: orderDetail.productCode,
payAmount: orderDetail.ecPrice,
memberId: this.userInfo.id,
phoneNumber: item.phoneNumber,
orderAddress: {
addressPhoneNumber: item.addressPhoneNumber,
addressUserName: item.addressUserName,
addressProvinceName: item.addressProvinceName,
addressCityName: item.addressCityName,
addressCountyName:item.addressCountyName,
addressDetailInfo: item.addressDetailInfo,
}
}
]
} }
if (this.userstype == 1) { if (this.userstype == 1) {
@ -274,6 +307,7 @@ export default {
let filterArr = this.useralllist.filter(val => { let filterArr = this.useralllist.filter(val => {
return val != undefined; return val != undefined;
}); });
console.log(this.useralllist,'2222');
this.useralllist = filterArr; this.useralllist = filterArr;
}, },
//订单立即支付 //订单立即支付
@ -392,14 +426,59 @@ export default {
this.useralllist[i].phoneNumber = this.goldmedal[i].phoneNumber; this.useralllist[i].phoneNumber = this.goldmedal[i].phoneNumber;
this.useralllist[i].salesAmount = this.goldmedal[i].salesAmount; this.useralllist[i].salesAmount = this.goldmedal[i].salesAmount;
this.useralllist[i].lengthnum = this.goldmedal[i].orderDetailList.length; this.useralllist[i].lengthnum = this.goldmedal[i].orderDetailList.length;
let item = this.goldmedal[i];
let orderDetail = item.orderDetailList[0];
this.useralllist[y].payInfo = [
{
basePoint: item.item,
productName: orderDetail.productName,
buyCount: orderDetail.pcs,
productCode: orderDetail.productCode,
payAmount: orderDetail.ecPrice,
memberId: this.userInfo.id,
phoneNumber: item.phoneNumber,
orderAddress: {
addressPhoneNumber: item.addressPhoneNumber,
addressUserName: item.addressUserName,
addressProvinceName: item.addressProvinceName,
addressCityName: item.addressCityName,
addressCountyName:item.addressCountyName,
addressDetailInfo: item.addressDetailInfo,
} }
console.log(list); }
]
}
this.useralllist = list.filter(val => { this.useralllist = list.filter(val => {
return val != undefined; return val != undefined;
});; });
}, },
userfind(item) { async userfind(item) {
// let params = [
// {
// basePoint: 0,
// productName: '幼猫全价粮',
// buyCount: 1,
// productCode: '2003004003',
// payAmount: 90,
// memberId: 886750,
// phoneNumber: '15766132405',
// orderAddress: {
// addressPhoneNumber: '15766132404',
// addressUserName: '测试',
// addressProvinceName: '安徽省',
// addressCityName: '蚌埠市',
// addressCountyName: '怀远县',
// addressDetailInfo: '12123134444'
// }
// }
// ];
// console.log(item,'222');
// return false;
let { msg } = await generateOrderWX(item.payInfo, 1);
this.qrtext = msg;
// return false;
this.paytypeWarning = this.util.checkPaytypeValidated(item.paytype); this.paytypeWarning = this.util.checkPaytypeValidated(item.paytype);
this.showPaytypeWarning = !this.paytypeWarning.result; this.showPaytypeWarning = !this.paytypeWarning.result;
let user = this.userInfo; let user = this.userInfo;

42
rc-busness/pages/personal/userpay.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="page_modules"> <div class="page_modules">
<Myheader></Myheader> <Myheader></Myheader>
<div class="rc-top rc-md-up"></div> <div class="rc-top"></div>
<tabs :crumbs="crumbs"></tabs>
<div class="rc_contline"></div>
<div class="cont_modules"> <div class="cont_modules">
<el-row class="order_info"> <el-row class="order_info">
<el-col :span="6" class="ph_hidden"> <el-col :span="6" class="ph_hidden">
@ -123,10 +125,33 @@ export default {
qrtext: '', qrtext: '',
userData: '', userData: '',
disableAlipay: true, disableAlipay: true,
disableQrcode: false disableQrcode: false,
crumbs: [
{
path: '/personal/settlement/'
},
{
title : '订单支付'
},
]
}; };
}, },
asyncData({app}){
const { type = 'cart', list = [{}], pathQuery = {} } = app.router.history.current.query;
let query = typeof pathQuery == 'string' ? JSON.parse(pathQuery) : pathQuery;
return {
crumbs : [
{
path: '/personal/settlement/',
query,
},
{
title : '订单支付'
},
]
}
},
created() {}, created() {},
mounted() { mounted() {
let isWx = this.util.isWX(); let isWx = this.util.isWX();
@ -287,13 +312,22 @@ export default {
}, },
computed: { computed: {
...mapState({ ...mapState({
userInfo : state => state.user.userInfo, userInfo: state => state.user.userInfo
}) })
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.rc-top {
margin-top: 65px;
}
@media screen and (max-width: 768px){
.rc-top {
margin-top: 15px;
}
}
.sucess_img { .sucess_img {
width: 96px; width: 96px;
height: 96px; height: 96px;

7
rc-busness/pages/productdetails/producted.vue
View File

@ -2,7 +2,6 @@
<div> <div>
<Myheader></Myheader> <Myheader></Myheader>
<div class="user"> <div class="user">
<div class="rc-top"></div> <div class="rc-top"></div>
<tabs :crumbs="crumbs"></tabs> <tabs :crumbs="crumbs"></tabs>
<div class="online rc-margin--none" id="fixed-catbar-seperator"></div> <div class="online rc-margin--none" id="fixed-catbar-seperator"></div>
@ -674,7 +673,6 @@ export default {
}, },
usertanchu(item, orderm) { usertanchu(item, orderm) {
let user = this.userInfo; let user = this.userInfo;
console.log(user,'user');
if (!user) { if (!user) {
this.dialogInfo2 = true; this.dialogInfo2 = true;
return; return;
@ -726,11 +724,12 @@ export default {
product_amount: this.sales_num * this.curItem.ecPrice product_amount: this.sales_num * this.curItem.ecPrice
} }
]); ]);
this.$router.push({ this.$router.push({
path: '/personal/settlement', path: '/personal/settlement',
query: { query: {
list: JSON.stringify(list) list: JSON.stringify(list),
type : 'product',
pathQuery : JSON.stringify(this.$route.query),
} }
}); });
} }