other_project/mallplus
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

初始项目

Browse Source
This commit is contained in:
liupopo
2023-02-11 12:55:02 +08:00
parent 1748bda84a
commit 0b89e36064
3363 changed files with 506201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

872
mallplusui-uniapp-app/pages/order/createOrder.vue Normal file
View File

@@ -0,0 +1,872 @@
<template>
<view>
<!-- 地址 -->
<navigator url="../../pagesU/address/address?source=1" class="address-section">
<view class="order-content">
<text class="yticon icon-shouhuodizhi"></text>
<view class="cen" v-if="addressData">
<view class="top">
<text class="name">{{ addressData.name }}</text>
<text class="mobile">{{ addressData.phoneNumber }}</text>
</view>
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text>
</view>
<view class="cen" v-else>
<text>请设置收货地址</text>
<!-- <view class="top">
<text class="name">{{ addressData.name }}</text>
<text class="mobile">{{ addressData.phoneNumber }}</text>
</view>
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text> -->
</view>
<text class="yticon icon-you"></text>
</view>
<image
class="a-bg"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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"
></image>
</navigator>
<view class="goods-section">
<view class="g-header b-b">
<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
</view>
<!-- 商品列表 -->
<view class="g-item" v-for="(item, index) in cartPromotionItemList" :key="index">
<image :src="item.productPic"></image>
<view class="right">
<text class="title clamp">{{ item.productName }}</text>
<text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
<view class="price-box">
<text class="price">￥{{ item.price }}</text>
<text class="number">x {{ item.quantity }}</text>
</view>
</view>
</view>
</view>
<view class="hot-floor" v-if="item1.giftsList && item1.giftsList.length > 0" v-for="(item1, index1) in basicGiftsList" :key="index1">
<view class="floor-img-box"> <text class="name">{{ item1.name }}</text></view>
<scroll-view class="floor-list" scroll-x>
<view class="scoll-wrapper">
<view v-for="(item, index) in item1.giftsList" :key="index" class="floor-item" >
<image :src="item.pic" mode="aspectFill"></image>
<text class="title clamp">{{ item.name }}</text>
<text class="price" v-if="item.rule">￥{{ item.price }}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 优惠明细 -->
<view class="yt-list">
<view class="yt-list-cell b-b" v-if="couponList.length > 0" @click="toggleMask('show')">
<view class="cell-icon">券</view>
<text class="cell-tit clamp">优惠券</text>
<text class="cell-tip active">选择优惠券</text>
<text class="cell-more wanjia wanjia-gengduo-d"></text>
</view>
<view class="yt-list-cell b-b" v-if="coupon">
<text class="cell-tit clamp">商家促销</text>
<view class="cell-tip hb" v-if="coupon.minPoint">满{{coupon.minPoint}}减{{coupon.amount}}</view>
<text class="cell-tip disabled" v-if="!coupon">暂无可用优惠</text>
</view>
</view>
<!-- 金额明细 -->
<view class="yt-list">
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">商品金额</text>
<text class="cell-tip">￥{{ calcAmount.totalAmount }}</text>
</view>
<view class="yt-list-cell b-b" v-if="groupActivity">
<text class="cell-tit clamp">活动金额</text>
<text class="cell-tip">￥{{ groupActivity.price }}</text>
</view>
<view class="yt-list-cell b-b" v-if="calcAmount.promotionAmount>0">
<text class="cell-tit clamp">优惠金额</text>
<text class="cell-tip red">-￥{{ calcAmount.promotionAmount }}</text>
</view>
<view class="yt-list-cell b-b" v-if="coupon.amount>0">
<text class="cell-tit clamp">优惠券抵扣</text>
<text class="cell-tip red">-￥{{ coupon.amount }}</text>
</view>
<!-- <view class="yt-list-cell b-b" v-if="memberIntegration>0">
<text class="cell-tit clamp">积分抵扣</text>
<text class="cell-tip red">-￥{{ memberIntegration }}</text>
</view>-->
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">运费</text>
<text class="cell-tip">{{calcAmount.freightAmount}}</text>
</view>
<view class="yt-list-cell desc-cell">
<text class="cell-tit clamp">备注</text>
<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
</view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="price-content">
<text>实付款</text>
<text class="price-tip">￥</text>
<text class="price">{{ calcAmount.payAmount-coupon.amount }}</text>
</view>
<text class="submit" @click="submit">提交订单</text>
</view>
<!-- 优惠券面板 -->
<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
<view class="mask-content" @click.stop.prevent="stopPrevent">
<!-- 优惠券页面，仿mt -->
<view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
<view class="con" @click="selectCoupon(item)">
<view class="left">
<text class="title">{{ item.name }}</text>
<text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
</view>
<view class="right">
<text class="price">{{ item.coupon.amount }}</text>
<text>满{{item.coupon.minPoint}}可用</text>
</view>
<view class="circle l"></view>
<view class="circle r"></view>
</view>
<text class="tips">限新用户使用</text>
</view>
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import { mapState } from 'vuex';
import { formatDate } from '@/common/date';
export default {
components: {
mallplusCopyright
},
data() {
return {
maskState: 0, //优惠券面板显示状态
desc: '', //备注
payType: 1, //1微信 2支付宝
type: 1,
groupType: '',
/* memberIntegration:0, */
groupActivityId:'',
basicGiftsVar:'',
skillId:0,
goodsId: 0,
skuId:0,
mgId: 0,
cartId: '',
cartIds: '',
addressId: '',
couponId: '',
memberCouponId:'',
coupon:{
amount:0,
coupon:{
amount:0
}
},
groupActivity:null,
memberReceiveAddressList: [],
basicGiftsList:[],
cartPromotionItemList: [],
calcAmount: {
totalAmount: 0,
freightAmount: 0,
promotionAmount: 0,
payAmount: 0
},
couponList: [],
addressData: {
name: null,
phoneNumber: '',
detailAddress: '',
region: ''
}
};
},
async onLoad(opt) {
let option = JSON.parse(opt.dataJson);
console.log(option)
this.skuId = option.skuId==undefined?'':option.skuId;
this.goodsId = option.goodsId;
let data;
this.type = option.type;
if (option.groupActivityId) { // 团购
let params = { groupId: option.groupActivityId };
data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
this.groupActivityId=option.groupActivityId;
this.groupActivity=data.groupActivity;
this.type = 1;
}else{
if (option.groupType) { // 拼团
this.groupType = option.groupType;
this.goodsId = option.id;
this.mgId = option.mgid;
this.groupId = option.groupId;
if (this.skuId) {
let params = { orderType:2, groupId: option.groupId, goodsId: option.id, skuId: this.skuId };
data = await Api.apiCall('post', Api.order.addGroup, params);
} else {
let params = { orderType:2, groupId: option.groupId, goodsId: option.id };
data = await Api.apiCall('post', Api.order.addGroup, params);
}
} else {
if (option.type == 1) { // 详情
this.cartId = option.id;
let params = { goodsId: option.goodsId,skuId: this.skuId, type: option.type };
data = await Api.apiCall('get', Api.order.preOrder, params);
} else if (option.type == 2) { // 购物车
let params = { cartIds: option.cartIds, type: option.type };
data = await Api.apiCall('get', Api.order.preOrder, params);
this.cartIds = option.cartIds;
}else if (option.type == 6) { // 秒杀
let params = { skillId: option.skillId, type: option.type };
data = await Api.apiCall('get', Api.order.preOrder, params);
this.skillId = option.skillId;
}
}
}
/* if (!data || !data.cartPromotionItemList){
uni.switchTab({
url: '/pages/index/index'
});
} */
/* this.memberIntegration=data.memberIntegration; */
/* this.basicGiftsList = data.basicGiftsList; */
if (this.basicGiftsList) {
let basicGiftsVar ='';
let basicGiftsVar1 ='';
this.basicGiftsList.forEach(item => {
basicGiftsVar1=basicGiftsVar1+item.id+':';
console.log('1='+item.giftsList);
if (item.giftsList ) {
item.giftsList.forEach(item1 => {
basicGiftsVar1 = basicGiftsVar1 + item1.id + ',';
});
}
basicGiftsVar=basicGiftsVar+basicGiftsVar1.substr(0, basicGiftsVar1.length - 1)+'@';
basicGiftsVar1='';
});
this.basicGiftsVar=basicGiftsVar.substr(0, basicGiftsVar.length - 1);
console.log(this.basicGiftsVar);
}
/* this.cartPromotionItemList = data.cartPromotionItemList; */
this.calcAmount = data.calcAmount;
this.addressData = data.address;
if (this.addressData) {
this.addressId = this.addressData.id;
}
this.couponList = data.couponHistoryDetailList;
this.memberReceiveAddressList = data.memberReceiveAddressListaddress;
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
filters: {
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
getSource(){
let source =Api.source;
return source;
},
selectCoupon(item){
this.coupon=item.coupon;
this.couponId= item.couponId;
this.memberCouponId=item.id;
console.log(this.coupon);
this.toggleMask();
},
//显示优惠券面板
toggleMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.maskState = 2;
setTimeout(() => {
this.maskState = state;
}, timer);
},
numberChange(data) {
this.number = data.number;
},
changePayType(type) {
this.payType = type;
},
async submit() {
console.log('dubmit')
let data;
if (!this.addressId) {
this.$api.msg('请选择收货地址');
return;
}
let params = {};
// 拼团
if (this.groupType) {
if (!this.mgId) {
this.mgId = 1;
}
params = {
mgId: this.mgId,
groupType: this.groupType,
type: 1,
orderType:2,
skuId: this.skuId,
goodsId: this.goodsId,
groupId: this.groupId,
addressId: this.addressId,
couponId: this.couponId,
memberCouponId: this.memberCouponId,
content: this.desc
};
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.acceptGroup, params);
} else {
// detail
if (this.type == 1) {
params = {basicGiftsVar:this.basicGiftsVar,orderType:1, type: 1, goodsId: this.goodsId,skuId: this.skuId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
if (this.groupActivityId) {
params = {groupActivityId:this.groupActivityId,orderType:3, type: 1, goodsId: this.goodsId,skuId: this.skuId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
}
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.bookOrder, params);
}
// 购物车
if (this.type == 2) {
params = {orderType:1, type: 2, cartIds: this.cartIds, addressId: this.addressId, couponId: this.couponId, content: this.desc };
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.bookOrder, params);
}
// 秒杀
if (this.type == 6) {
params = { type: 6, skillId: this.skillId, addressId: this.addressId, couponId: this.couponId, content: this.desc ,orderType:6};
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.bookOrder, params);
}
}
if (data && data.order) {
let id = data.order.id;
// let url = `/pages/money/pay?id=${id}`;
let url = '/pages/order/payment/index?order_id=' + data.order.id + '&type=1' ;
uni.navigateTo({
url: url
});
} else {
this.$api.msg(data);
}
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 100upx;
}
.address-section {
padding: 30upx 0;
background: #fff;
position: relative;
.order-content {
display: flex;
align-items: center;
}
.icon-shouhuodizhi {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 90upx;
color: #888;
font-size: 44upx;
}
.cen {
display: flex;
flex-direction: column;
flex: 1;
font-size: 28upx;
color: $font-color-dark;
}
.name {
font-size: 34upx;
margin-right: 24upx;
}
.address {
margin-top: 16upx;
margin-right: 20upx;
color: $font-color-light;
}
.icon-you {
font-size: 32upx;
color: $font-color-light;
margin-right: 30upx;
}
.a-bg {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 5upx;
}
}
.goods-section {
margin-top: 16upx;
background: #fff;
padding-bottom: 1px;
.g-header {
display: flex;
align-items: center;
height: 84upx;
padding: 0 30upx;
position: relative;
}
.logo {
display: block;
width: 50upx;
height: 50upx;
border-radius: 100px;
}
.name {
font-size: 30upx;
color: $font-color-base;
margin-left: 24upx;
}
.g-item {
display: flex;
margin: 20upx 30upx;
image {
flex-shrink: 0;
display: block;
width: 140upx;
height: 140upx;
border-radius: 4upx;
}
.right {
flex: 1;
padding-left: 24upx;
overflow: hidden;
}
.title {
font-size: 30upx;
color: $font-color-dark;
}
.spec {
font-size: 26upx;
color: $font-color-light;
}
.price-box {
display: flex;
align-items: center;
font-size: 32upx;
color: $font-color-dark;
padding-top: 10upx;
.price {
margin-bottom: 4upx;
}
.number {
font-size: 26upx;
color: $font-color-base;
margin-left: 20upx;
}
}
.step-box {
position: relative;
}
}
}
.yt-list {
margin-top: 16upx;
background: #fff;
}
.yt-list-cell {
display: flex;
align-items: center;
padding: 10upx 30upx 10upx 40upx;
line-height: 70upx;
position: relative;
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30upx;
}
.cell-icon {
height: 32upx;
width: 32upx;
font-size: 22upx;
color: #fff;
text-align: center;
line-height: 32upx;
background: #f85e52;
border-radius: 4upx;
margin-right: 12upx;
&.hb {
background: #ffaa0e;
}
&.lpk {
background: #3ab54a;
}
}
.cell-more {
align-self: center;
font-size: 24upx;
color: $font-color-light;
margin-left: 8upx;
margin-right: -10upx;
}
.cell-tit {
flex: 1;
font-size: 26upx;
color: $font-color-light;
margin-right: 10upx;
}
.cell-tip {
font-size: 26upx;
color: $font-color-dark;
&.disabled {
color: $font-color-light;
}
&.active {
color: $base-color;
}
&.red {
color: $base-color;
}
}
&.desc-cell {
.cell-tit {
max-width: 90upx;
}
}
.desc {
flex: 1;
font-size: $font-base;
color: $font-color-dark;
}
}
/* 支付列表 */
.pay-list {
padding-left: 40upx;
margin-top: 16upx;
background: #fff;
.pay-item {
display: flex;
align-items: center;
padding-right: 20upx;
line-height: 1;
height: 110upx;
position: relative;
}
.icon-weixinzhifu {
width: 80upx;
font-size: 40upx;
color: #6bcc03;
}
.icon-alipay {
width: 80upx;
font-size: 40upx;
color: #06b4fd;
}
.icon-xuanzhong2 {
display: flex;
align-items: center;
justify-content: center;
width: 60upx;
height: 60upx;
font-size: 40upx;
color: $base-color;
}
.tit {
font-size: 32upx;
color: $font-color-dark;
flex: 1;
}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
z-index: 995;
display: flex;
align-items: center;
width: 100%;
height: 90upx;
justify-content: space-between;
font-size: 30upx;
background-color: #fff;
z-index: 998;
color: $font-color-base;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
.price-content {
padding-left: 30upx;
}
.price-tip {
color: $base-color;
margin-left: 8upx;
}
.price {
font-size: 36upx;
color: $base-color;
}
.submit {
display: flex;
align-items: center;
justify-content: center;
width: 280upx;
height: 100%;
color: #fff;
font-size: 32upx;
background-color: $base-color;
}
}
/* 优惠券面板 */
.mask {
display: flex;
align-items: flex-end;
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 9995;
transition: 0.3s;
.mask-content {
width: 100%;
min-height: 30vh;
max-height: 70vh;
background: #f3f3f3;
transform: translateY(100%);
transition: 0.3s;
overflow-y: scroll;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.mask-content {
transform: translateY(0);
}
}
}
/* 优惠券列表 */
.coupon-item {
display: flex;
flex-direction: column;
margin: 20upx 24upx;
background: #fff;
.con {
display: flex;
align-items: center;
position: relative;
height: 120upx;
padding: 0 30upx;
&:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px dashed #f3f3f3;
transform: scaleY(50%);
}
}
.left {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
overflow: hidden;
height: 100upx;
}
.title {
font-size: 32upx;
color: $font-color-dark;
margin-bottom: 10upx;
}
.time {
font-size: 24upx;
color: $font-color-light;
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 26upx;
color: $font-color-base;
height: 100upx;
}
.price {
font-size: 44upx;
color: $base-color;
&:before {
content: '￥';
font-size: 34upx;
}
}
.tips {
font-size: 24upx;
color: $font-color-light;
line-height: 60upx;
padding-left: 30upx;
}
.circle {
position: absolute;
left: -6upx;
bottom: -10upx;
z-index: 10;
width: 20upx;
height: 20upx;
background: #f3f3f3;
border-radius: 100px;
&.r {
left: auto;
right: -6upx;
}
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 220upx;
position: relative;
display: flex;
&:after {
padding: 10 30upx;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.name {
font-size: 30upx;
color: $font-color-base;
margin-left: 24upx;
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
</style>

771
mallplusui-uniapp-app/pages/order/createOrder1.vue Normal file
View File

@@ -0,0 +1,771 @@
<template>
<view>
<!-- 地址 -->
<navigator url="../../pagesU/address/address?source=1" class="address-section">
<view class="order-content">
<text class="yticon icon-shouhuodizhi"></text>
<view class="cen" v-if="addressData">
<view class="top">
<text class="name">{{ addressData.name }}</text>
<text class="mobile">{{ addressData.phoneNumber }}</text>
</view>
<text class="address">{{ addressData.detailAddress }} {{ addressData.region }}</text>
</view>
<text class="yticon icon-you"></text>
</view>
<image
class="a-bg"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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"
></image>
</navigator>
<view class="goods-section">
<view class="g-header b-b">
<image class="logo"
src="http://yjlive160322.oss-cn-beijing.aliyuncs.com/mall/images/20190807/QQ%E5%9B%BE%E7%89%8720190807191952.jpg"></image>
<text class="name">mallplus多租户商城</text>
<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
</view>
<!-- 商品列表 -->
<view class="g-item" v-for="(item, index) in cartPromotionItemList" :key="index">
<image :src="item.productPic"></image>
<view class="right">
<text class="title clamp">{{ item.productName }}</text>
<text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
<view class="price-box">
<text class="price">￥{{ item.price }}</text>
<text class="number">x {{ item.quantity }}</text>
</view>
</view>
</view>
</view>
<!-- 优惠明细 -->
<view class="yt-list">
<view class="yt-list-cell b-b" v-if="couponList.length > 0" @click="toggleMask('show')">
<view class="cell-icon">券</view>
<text class="cell-tit clamp">优惠券</text>
<text class="cell-tip active">选择优惠券</text>
<text class="cell-more wanjia wanjia-gengduo-d"></text>
</view>
<view class="yt-list-cell b-b" v-if="coupon">
<text class="cell-tit clamp">商家促销</text>
<view class="cell-tip hb" v-if="coupon.minPoint">满{{coupon.minPoint}}减{{coupon.amount}}</view>
<text class="cell-tip disabled" v-if="!coupon">暂无可用优惠</text>
</view>
</view>
<!-- 金额明细 -->
<view class="yt-list">
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">商品金额</text>
<text class="cell-tip">￥{{ calcAmount.totalAmount }}</text>
</view>
<view class="yt-list-cell b-b" v-if="groupActivity">
<text class="cell-tit clamp">活动金额</text>
<text class="cell-tip">￥{{ groupActivity.price }}</text>
</view>
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">优惠金额</text>
<text class="cell-tip red">-￥{{ calcAmount.promotionAmount }}</text>
</view>
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">运费</text>
<text class="cell-tip">{{calcAmount.freightAmount}}</text>
</view>
<view class="yt-list-cell desc-cell">
<text class="cell-tit clamp">备注</text>
<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder"/>
</view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="price-content">
<text>实付款</text>
<text class="price-tip">￥</text>
<text class="price">{{ calcAmount.payAmount-coupon.amount }}</text>
</view>
<text class="submit" @click="submit">提交订单</text>
</view>
<!-- 优惠券面板 -->
<view class="mask" :class="maskState === 0 ? 'none' : maskState === 1 ? 'show' : ''" @click="toggleMask">
<view class="mask-content" @click.stop.prevent="stopPrevent">
<!-- 优惠券页面，仿mt -->
<view class="coupon-item" v-if="couponList.length > 0" v-for="(item, index) in couponList" :key="index">
<view class="con" @click="selectCoupon(item)">
<view class="left">
<text class="title">{{ item.name }}</text>
<text class="time">有效期至{{item.coupon.endTime | formatCreateTime}}</text>
</view>
<view class="right">
<text class="price">{{ item.coupon.amount }}</text>
<text>满{{item.coupon.minPoint}}可用</text>
</view>
<view class="circle l"></view>
<view class="circle r"></view>
</view>
<text class="tips">限新用户使用</text>
</view>
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import {mapState} from 'vuex';
export default {
components: {
mallplusCopyright
},
data() {
return {
maskState: 0, //优惠券面板显示状态
desc: '', //备注
payType: 1, //1微信 2支付宝
type: 1,
groupType: '',
groupActivityId: '',
goodsId: 0,
mgId: 1,
cartId: '',
cartIds: '',
addressId: '',
couponId: '',
memberCouponId: '',
coupon: {
amount: 0,
},
groupActivity: null,
memberReceiveAddressList: [],
cartPromotionItemList: [],
calcAmount: {
totalAmount: 0,
freightAmount: 0,
promotionAmount: 0,
payAmount: 0
},
couponList: [],
addressData: {
name: null,
phoneNumber: '',
detailAddress: '',
region: ''
}
};
},
async onLoad(option) {
let data;
this.type = option.type;
if (option.groupActivityId) {
let params = {groupId: option.groupActivityId};
data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
this.groupActivityId = option.groupActivityId;
this.groupActivity = data.groupActivity;
} else {
if (option.groupType) {
this.groupType = option.groupType;
this.goodsId = option.id;
this.mgId = option.mgid;
if (option.skuId) {
let params = {
groupId: option.groupId,
goodsId: option.id,
skuId: option.skuId
};
data = await Api.apiCall('post', Api.order.addGroup, params);
} else {
let params = {groupId: option.groupId, goodsId: option.id};
data = await Api.apiCall('post', Api.order.addGroup, params);
}
} else {
if (option.type == 1) {
this.cartId = option.id;
let params = {cartId: option.id, type: option.type};
data = await Api.apiCall('get', Api.order.preOrder, params);
} else if (option.type == 2) {
let params = {cartIds: option.cartIds, type: option.type};
data = await Api.apiCall('get', Api.order.preOrder, params);
this.cartIds = option.cartIds;
}
}
}
this.cartPromotionItemList = data.cartPromotionItemList;
this.calcAmount = data.calcAmount;
this.addressData = data.address;
if (this.addressData) {
this.addressId = this.addressData.id;
}
this.couponList = data.couponHistoryDetailList;
this.memberReceiveAddressList = data.memberReceiveAddressListaddress;
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
selectCoupon(item) {
this.coupon = item.coupon;
this.couponId = item.couponId;
this.memberCouponId = item.id;
console.log(this.coupon);
this.toggleMask();
},
//显示优惠券面板
toggleMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.maskState = 2;
setTimeout(() => {
this.maskState = state;
}, timer);
},
numberChange(data) {
this.number = data.number;
},
changePayType(type) {
this.payType = type;
},
async submit() {
let data;
if (!this.addressId) {
this.$api.msg('请选择收货地址');
return;
}
// 拼团
if (this.groupType) {
if (!this.mgId) {
this.mgId = 1;
}
let params = {
mgId: this.mgId,
groupType: this.groupType,
type: 1,
orderType: 4,
goodsId: this.goodsId,
addressId: this.addressId,
couponId: this.couponId,
memberCouponId: this.memberCouponId,
content: this.desc
};
data = await Api.apiCall('post', Api.order.acceptGroup, params);
} else {
// detail
if (this.type == 1) {
let params = {
orderType: 1,
type: 1,
cartId: this.cartId,
addressId: this.addressId,
couponId: this.couponId,
memberCouponId: this.memberCouponId,
content: this.desc
};
if (this.groupActivityId) {
params = {
groupActivityId: this.groupActivityId,
orderType: 3,
type: 1,
cartId: this.cartId,
addressId: this.addressId,
couponId: this.couponId,
memberCouponId: this.memberCouponId,
content: this.desc
};
}
data = await Api.apiCall('post', Api.order.bookOrder, params);
}
// 购物车
if (this.type == 2) {
let params = {
orderType: 1,
type: 2,
cartIds: this.cartIds,
addressId: this.addressId,
couponId: this.couponId,
content: this.desc
};
data = await Api.apiCall('post', Api.order.bookOrder, params);
}
// 团购
if (this.type == 5) {
let params = {
type: 2,
cartIds: this.cartIds,
addressId: this.addressId,
couponId: this.couponId,
content: this.desc
};
data = await Api.apiCall('post', Api.order.bookOrder, params);
}
}
if (data && data.order) {
let id = data.order.id;
let url = `/pages/money/pay?id=${id}`;
uni.navigateTo({
url: url
});
} else {
this.$api.msg(data);
}
},
stopPrevent() {
}
}
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 100 upx;
}
.address-section {
padding: 30 upx 0;
background: #fff;
position: relative;
.order-content {
display: flex;
align-items: center;
}
.icon-shouhuodizhi {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 90 upx;
color: #888;
font-size: 44 upx;
}
.cen {
display: flex;
flex-direction: column;
flex: 1;
font-size: 28 upx;
color: $font-color-dark;
}
.name {
font-size: 34 upx;
margin-right: 24 upx;
}
.address {
margin-top: 16 upx;
margin-right: 20 upx;
color: $font-color-light;
}
.icon-you {
font-size: 32 upx;
color: $font-color-light;
margin-right: 30 upx;
}
.a-bg {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 5 upx;
}
}
.goods-section {
margin-top: 16 upx;
background: #fff;
padding-bottom: 1px;
.g-header {
display: flex;
align-items: center;
height: 84 upx;
padding: 0 30 upx;
position: relative;
}
.logo {
display: block;
width: 50 upx;
height: 50 upx;
border-radius: 100px;
}
.name {
font-size: 30 upx;
color: $font-color-base;
margin-left: 24 upx;
}
.g-item {
display: flex;
margin: 20 upx 30 upx;
image {
flex-shrink: 0;
display: block;
width: 140 upx;
height: 140 upx;
border-radius: 4 upx;
}
.right {
flex: 1;
padding-left: 24 upx;
overflow: hidden;
}
.title {
font-size: 30 upx;
color: $font-color-dark;
}
.spec {
font-size: 26 upx;
color: $font-color-light;
}
.price-box {
display: flex;
align-items: center;
font-size: 32 upx;
color: $font-color-dark;
padding-top: 10 upx;
.price {
margin-bottom: 4 upx;
}
.number {
font-size: 26 upx;
color: $font-color-base;
margin-left: 20 upx;
}
}
.step-box {
position: relative;
}
}
}
.yt-list {
margin-top: 16 upx;
background: #fff;
}
.yt-list-cell {
display: flex;
align-items: center;
padding: 10 upx 30 upx 10 upx 40 upx;
line-height: 70 upx;
position: relative;
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30 upx;
}
.cell-icon {
height: 32 upx;
width: 32 upx;
font-size: 22 upx;
color: #fff;
text-align: center;
line-height: 32 upx;
background: #f85e52;
border-radius: 4 upx;
margin-right: 12 upx;
&.hb {
background: #ffaa0e;
}
&.lpk {
background: #3ab54a;
}
}
.cell-more {
align-self: center;
font-size: 24 upx;
color: $font-color-light;
margin-left: 8 upx;
margin-right: -10upx;
}
.cell-tit {
flex: 1;
font-size: 26 upx;
color: $font-color-light;
margin-right: 10 upx;
}
.cell-tip {
font-size: 26 upx;
color: $font-color-dark;
&.disabled {
color: $font-color-light;
}
&.active {
color: $base-color;
}
&.red {
color: $base-color;
}
}
&.desc-cell {
.cell-tit {
max-width: 90 upx;
}
}
.desc {
flex: 1;
font-size: $font-base;
color: $font-color-dark;
}
}
/* 支付列表 */
.pay-list {
padding-left: 40 upx;
margin-top: 16 upx;
background: #fff;
.pay-item {
display: flex;
align-items: center;
padding-right: 20 upx;
line-height: 1;
height: 110 upx;
position: relative;
}
.icon-weixinzhifu {
width: 80 upx;
font-size: 40 upx;
color: #6bcc03;
}
.icon-alipay {
width: 80 upx;
font-size: 40 upx;
color: #06b4fd;
}
.icon-xuanzhong2 {
display: flex;
align-items: center;
justify-content: center;
width: 60 upx;
height: 60 upx;
font-size: 40 upx;
color: $base-color;
}
.tit {
font-size: 32 upx;
color: $font-color-dark;
flex: 1;
}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
z-index: 995;
display: flex;
align-items: center;
width: 100%;
height: 90 upx;
justify-content: space-between;
font-size: 30 upx;
background-color: #fff;
z-index: 998;
color: $font-color-base;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
.price-content {
padding-left: 30 upx;
}
.price-tip {
color: $base-color;
margin-left: 8 upx;
}
.price {
font-size: 36 upx;
color: $base-color;
}
.submit {
display: flex;
align-items: center;
justify-content: center;
width: 280 upx;
height: 100%;
color: #fff;
font-size: 32 upx;
background-color: $base-color;
}
}
/* 优惠券面板 */
.mask {
display: flex;
align-items: flex-end;
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 9995;
transition: 0.3s;
.mask-content {
width: 100%;
min-height: 30vh;
max-height: 70vh;
background: #f3f3f3;
transform: translateY(100%);
transition: 0.3s;
overflow-y: scroll;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.mask-content {
transform: translateY(0);
}
}
}
/* 优惠券列表 */
.coupon-item {
display: flex;
flex-direction: column;
margin: 20 upx 24 upx;
background: #fff;
.con {
display: flex;
align-items: center;
position: relative;
height: 120 upx;
padding: 0 30 upx;
&:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px dashed #f3f3f3;
transform: scaleY(50%);
}
}
.left {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
overflow: hidden;
height: 100 upx;
}
.title {
font-size: 32 upx;
color: $font-color-dark;
margin-bottom: 10 upx;
}
.time {
font-size: 24 upx;
color: $font-color-light;
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 26 upx;
color: $font-color-base;
height: 100 upx;
}
.price {
font-size: 44 upx;
color: $base-color;
&:before {
content: '￥';
font-size: 34 upx;
}
}
.tips {
font-size: 24 upx;
color: $font-color-light;
line-height: 60 upx;
padding-left: 30 upx;
}
.circle {
position: absolute;
left: -6upx;
bottom: -10upx;
z-index: 10;
width: 20 upx;
height: 20 upx;
background: #f3f3f3;
border-radius: 100px;
&.r {
left: auto;
right: -6upx;
}
}
}
</style>

806
mallplusui-uniapp-app/pages/order/createStoreOrder.vue Normal file
View File

@@ -0,0 +1,806 @@
<template>
<view>
<!-- 地址 -->
<navigator url="../../pagesU/address/address?source=1" class="address-section">
<view class="order-content">
<text class="yticon icon-shouhuodizhi"></text>
<view class="cen" v-if="addressData">
<view class="top">
<text class="name">{{ addressData.name }}</text>
<text class="mobile">{{ addressData.phoneNumber }}</text>
</view>
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text>
</view>
<view class="cen" v-else>
<text>请设置收货地址</text>
<!-- <view class="top">
<text class="name">{{ addressData.name }}</text>
<text class="mobile">{{ addressData.phoneNumber }}</text>
</view>
<text class="address">{{ addressData.province }}-{{ addressData.city }}-{{ addressData.region }}-{{ addressData.detailAddress }}</text> -->
</view>
<text class="yticon icon-you"></text>
</view>
<image
class="a-bg"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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"
></image>
</navigator>
<view class="goods-section" v-for="(item1, index1) in confirmOrderResultList" :key="index1">
<view class="g-header b-b">
<image class="logo" src="http://yjlive160322.oss-cn-beijing.aliyuncs.com/mall/images/20190807/QQ%E5%9B%BE%E7%89%8720190807191952.jpg"></image>
<text class="name"> 共{{ item1.cartPromotionItemList.length }}件商品,店铺 【{{item1.storeName }}】</text>
<text class="name" v-if="groupActivity">团购-{{groupActivity.name}}</text>
</view>
<!-- 商品列表 -->
<view class="g-item" v-for="(item, index) in item1.cartPromotionItemList" :key="index">
<image :src="item.productPic"></image>
<view class="right">
<text class="title clamp">{{ item.productName }}</text>
<text class="spec" v-if="item.productAttr">{{ item.productAttr }}</text>
<view class="price-box">
<text class="price">￥{{ item.price }}</text>
<text class="number">x {{ item.quantity }}</text>
</view>
</view>
</view>
<!-- 金额明细 -->
<view class="yt-list">
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">商品金额</text>
<text class="cell-tip">￥{{ item1.calcAmount.totalAmount }}</text>
</view>
<view class="yt-list-cell b-b" v-if="item1.calcAmount.promotionAmount>0">
<text class="cell-tit clamp">优惠金额</text>
<text class="cell-tip red">-￥{{ item1.calcAmount.promotionAmount }}</text>
</view>
<!-- <view class="yt-list-cell b-b" v-if="memberIntegration>0">
<text class="cell-tit clamp">积分抵扣</text>
<text class="cell-tip red">-￥{{ memberIntegration }}</text>
</view>-->
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">运费</text>
<text class="cell-tip">{{item1.calcAmount.freightAmount}}</text>
</view>
<view class="yt-list-cell desc-cell">
<text class="cell-tit clamp">备注</text>
<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
</view>
</view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="price-content">
<text>实付款</text>
<text class="price-tip">￥</text>
<text class="price">{{ totalPayAmount }}</text>
</view>
<text class="submit" @click="submit">提交订单</text>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import { mapState } from 'vuex';
export default {
components: {
mallplusCopyright
},
data() {
return {
maskState: 0, //优惠券面板显示状态
desc: '', //备注
payType: 1, //1微信 2支付宝
type: 1,
groupType: '',
memberIntegration:0,
groupActivityId:'',
totalPayAmount: 0,
basicGiftsVar:'',
skillId:0,
goodsId: 0,
mgId: 1,
cartId: '',
cartIds: '',
addressId: '',
couponId: '',
memberCouponId:'',
coupon:{
amount:0,
coupon:{
amount:0
}
},
groupActivity:null,
memberReceiveAddressList: [],
basicGiftsList:[],
cartPromotionItemList: [],
confirmOrderResultList: [],
calcAmount: {
totalAmount: 0,
freightAmount: 0,
promotionAmount: 0,
payAmount: 0
},
couponList: [],
addressData: {
name: null,
phoneNumber: '',
detailAddress: '',
region: ''
}
};
},
async onLoad(opt) {
let option = JSON.parse(opt.dataJson);
let data;
this.type = option.type;
if (option.groupActivityId) { // 团购
let params = { groupId: option.groupActivityId };
data = await Api.apiCall('get', Api.order.preGroupActivityOrder, params);
this.groupActivityId=option.groupActivityId;
this.groupActivity=data.groupActivity;
this.type = 1;
}else{
if (option.groupType) { // 拼团
this.groupType = option.groupType;
this.goodsId = option.id;
this.mgId = option.mgid;
if (option.skuId) {
let params = { groupId: option.groupId, goodsId: option.id, skuId: option.skuId };
data = await Api.apiCall('post', Api.order.addGroup, params);
} else {
let params = { groupId: option.groupId, goodsId: option.id };
data = await Api.apiCall('post', Api.order.addGroup, params);
}
} else {
if (option.type == 1) { // 详情
this.cartId = option.id;
let params = { goodsId: option.goodsId,skuId: option.goodsId, type: option.type };
data = await Api.apiCall('get', Api.order.submitStorePreview, params);
} else if (option.type == 2) { // 购物车
let params = { cartIds: option.cartIds, type: option.type };
data = await Api.apiCall('get', Api.order.submitStorePreview, params);
this.cartIds = option.cartIds;
}else if (option.type == 6) { // 秒杀
let params = { skillId: option.skillId, type: option.type };
data = await Api.apiCall('get', Api.order.submitStorePreview, params);
this.skillId = option.skillId;
}
}
}
this.totalPayAmount = data.totalPayAmount;
/* this.memberIntegration=data.memberIntegration; */
this.basicGiftsList = data.basicGiftsList;
this.confirmOrderResultList = data.confirmOrderResultList;
this.calcAmount = data.calcAmount;
if (this.basicGiftsList) {
let basicGiftsVar ='';
let basicGiftsVar1 ='';
this.basicGiftsList.forEach(item => {
basicGiftsVar1=basicGiftsVar1+item.id+':';
console.log('1='+item.giftsList);
if (item.giftsList ) {
item.giftsList.forEach(item1 => {
basicGiftsVar1 = basicGiftsVar1 + item1.id + ',';
});
}
basicGiftsVar=basicGiftsVar+basicGiftsVar1.substr(0, basicGiftsVar1.length - 1)+'@';
basicGiftsVar1='';
});
this.basicGiftsVar=basicGiftsVar.substr(0, basicGiftsVar.length - 1);
console.log(this.basicGiftsVar);
}
this.addressData = data.address;
if (this.addressData) {
this.addressId = this.addressData.id;
}
this.couponList = data.couponHistoryDetailList;
this.memberReceiveAddressList = data.memberReceiveAddressListaddress;
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
getSource(){
let source =Api.source;
return source;
},
selectCoupon(item){
this.coupon=item.coupon;
this.couponId= item.couponId;
this.memberCouponId=item.id;
console.log(this.coupon);
this.toggleMask();
},
//显示优惠券面板
toggleMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.maskState = 2;
setTimeout(() => {
this.maskState = state;
}, timer);
},
numberChange(data) {
this.number = data.number;
},
changePayType(type) {
this.payType = type;
},
async submit() {
console.log('dubmit')
let data;
if (!this.addressId) {
this.$api.msg('请选择收货地址');
return;
}
let params = {};
// 拼团
if (this.groupType) {
if (!this.mgId) {
this.mgId = 1;
}
params = {
mgId: this.mgId,
groupType: this.groupType,
type: 1,
orderType:2,
goodsId: this.goodsId,
addressId: this.addressId,
couponId: this.couponId,
memberCouponId: this.memberCouponId,
content: this.desc
};
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.acceptGroup, params);
} else {
// detail
if (this.type == 1) {
params = {basicGiftsVar:this.basicGiftsVar,orderType:1, type: 1, goodsId: option.goodsId,skuId: option.goodsId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
if (this.groupActivityId) {
params = {groupActivityId:this.groupActivityId,orderType:3, type: 1, goodsId: option.goodsId,skuId: option.goodsId, addressId: this.addressId, couponId: this.couponId,memberCouponId: this.memberCouponId, content: this.desc };
}
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
}
// 购物车
if (this.type == 2) {
params = {orderType:1, type: 2, cartIds: this.cartIds, addressId: this.addressId, couponId: this.couponId, content: this.desc };
params.source = this.getSource();
console.log(params)
console.log(params.source)
data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
console.log("data=======:"+data)
}
// 秒杀
if (this.type == 6) {
params = { type: 6, skillId: this.skillId, addressId: this.addressId, couponId: this.couponId, content: this.desc ,orderType:6};
params.source = this.getSource();
data = await Api.apiCall('post', Api.order.generateStoreOrder, params);
}
}
if (data && data.order) {
let id = data.order.id;
// let url = `/pages/money/pay?id=${id}`;
let url = '/pages/order/payment/index?order_id=' + data.order.id + '&type=1' ;
uni.navigateTo({
url: url
});
} else {
this.$api.msg(data);
}
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 100upx;
}
.address-section {
padding: 30upx 0;
background: #fff;
position: relative;
.order-content {
display: flex;
align-items: center;
}
.icon-shouhuodizhi {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 90upx;
color: #888;
font-size: 44upx;
}
.cen {
display: flex;
flex-direction: column;
flex: 1;
font-size: 28upx;
color: $font-color-dark;
}
.name {
font-size: 34upx;
margin-right: 24upx;
}
.address {
margin-top: 16upx;
margin-right: 20upx;
color: $font-color-light;
}
.icon-you {
font-size: 32upx;
color: $font-color-light;
margin-right: 30upx;
}
.a-bg {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 5upx;
}
}
.goods-section {
margin-top: 16upx;
background: #fff;
padding-bottom: 1px;
.g-header {
display: flex;
align-items: center;
height: 84upx;
padding: 0 30upx;
position: relative;
}
.logo {
display: block;
width: 50upx;
height: 50upx;
border-radius: 100px;
}
.name {
font-size: 30upx;
color: $font-color-base;
margin-left: 24upx;
}
.g-item {
display: flex;
margin: 20upx 30upx;
image {
flex-shrink: 0;
display: block;
width: 140upx;
height: 140upx;
border-radius: 4upx;
}
.right {
flex: 1;
padding-left: 24upx;
overflow: hidden;
}
.title {
font-size: 30upx;
color: $font-color-dark;
}
.spec {
font-size: 26upx;
color: $font-color-light;
}
.price-box {
display: flex;
align-items: center;
font-size: 32upx;
color: $font-color-dark;
padding-top: 10upx;
.price {
margin-bottom: 4upx;
}
.number {
font-size: 26upx;
color: $font-color-base;
margin-left: 20upx;
}
}
.step-box {
position: relative;
}
}
}
.yt-list {
margin-top: 16upx;
background: #fff;
}
.yt-list-cell {
display: flex;
align-items: center;
padding: 10upx 30upx 10upx 40upx;
line-height: 70upx;
position: relative;
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30upx;
}
.cell-icon {
height: 32upx;
width: 32upx;
font-size: 22upx;
color: #fff;
text-align: center;
line-height: 32upx;
background: #f85e52;
border-radius: 4upx;
margin-right: 12upx;
&.hb {
background: #ffaa0e;
}
&.lpk {
background: #3ab54a;
}
}
.cell-more {
align-self: center;
font-size: 24upx;
color: $font-color-light;
margin-left: 8upx;
margin-right: -10upx;
}
.cell-tit {
flex: 1;
font-size: 26upx;
color: $font-color-light;
margin-right: 10upx;
}
.cell-tip {
font-size: 26upx;
color: $font-color-dark;
&.disabled {
color: $font-color-light;
}
&.active {
color: $base-color;
}
&.red {
color: $base-color;
}
}
&.desc-cell {
.cell-tit {
max-width: 90upx;
}
}
.desc {
flex: 1;
font-size: $font-base;
color: $font-color-dark;
}
}
/* 支付列表 */
.pay-list {
padding-left: 40upx;
margin-top: 16upx;
background: #fff;
.pay-item {
display: flex;
align-items: center;
padding-right: 20upx;
line-height: 1;
height: 110upx;
position: relative;
}
.icon-weixinzhifu {
width: 80upx;
font-size: 40upx;
color: #6bcc03;
}
.icon-alipay {
width: 80upx;
font-size: 40upx;
color: #06b4fd;
}
.icon-xuanzhong2 {
display: flex;
align-items: center;
justify-content: center;
width: 60upx;
height: 60upx;
font-size: 40upx;
color: $base-color;
}
.tit {
font-size: 32upx;
color: $font-color-dark;
flex: 1;
}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
z-index: 995;
display: flex;
align-items: center;
width: 100%;
height: 90upx;
justify-content: space-between;
font-size: 30upx;
background-color: #fff;
z-index: 998;
color: $font-color-base;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
.price-content {
padding-left: 30upx;
}
.price-tip {
color: $base-color;
margin-left: 8upx;
}
.price {
font-size: 36upx;
color: $base-color;
}
.submit {
display: flex;
align-items: center;
justify-content: center;
width: 280upx;
height: 100%;
color: #fff;
font-size: 32upx;
background-color: $base-color;
}
}
/* 优惠券面板 */
.mask {
display: flex;
align-items: flex-end;
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 9995;
transition: 0.3s;
.mask-content {
width: 100%;
min-height: 30vh;
max-height: 70vh;
background: #f3f3f3;
transform: translateY(100%);
transition: 0.3s;
overflow-y: scroll;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.mask-content {
transform: translateY(0);
}
}
}
/* 优惠券列表 */
.coupon-item {
display: flex;
flex-direction: column;
margin: 20upx 24upx;
background: #fff;
.con {
display: flex;
align-items: center;
position: relative;
height: 120upx;
padding: 0 30upx;
&:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px dashed #f3f3f3;
transform: scaleY(50%);
}
}
.left {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
overflow: hidden;
height: 100upx;
}
.title {
font-size: 32upx;
color: $font-color-dark;
margin-bottom: 10upx;
}
.time {
font-size: 24upx;
color: $font-color-light;
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 26upx;
color: $font-color-base;
height: 100upx;
}
.price {
font-size: 44upx;
color: $base-color;
&:before {
content: '￥';
font-size: 34upx;
}
}
.tips {
font-size: 24upx;
color: $font-color-light;
line-height: 60upx;
padding-left: 30upx;
}
.circle {
position: absolute;
left: -6upx;
bottom: -10upx;
z-index: 10;
width: 20upx;
height: 20upx;
background: #f3f3f3;
border-radius: 100px;
&.r {
left: auto;
right: -6upx;
}
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 220upx;
position: relative;
display: flex;
&:after {
padding: 10 30upx;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.name {
font-size: 30upx;
color: $font-color-base;
margin-left: 24upx;
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
</style>

761
mallplusui-uniapp-app/pages/order/createStoreOrder1.vue Normal file
View File

@@ -0,0 +1,761 @@
<template>
<view>
<!-- 地址 -->
<navigator url="../../pagesU/address/address?source=1" class="address-section">
<view class="order-content">
<text class="yticon icon-shouhuodizhi"></text>
<view class="cen">
<view class="top">
<text class="name">{{orderInfo.address.user_name}}</text>
<text class="mobile">{{orderInfo.address.user_phone}}</text>
</view>
<text class="address">
{{ orderInfo.address.area_province_name ? orderInfo.address.area_province_name : '' }} {{ orderInfo.address.area_city_name ? orderInfo.address.area_city_name : '' }}{{ orderInfo.address.area_county_name ? orderInfo.address.area_county_name : '' }}{{ orderInfo.address.area_town_name ? orderInfo.address.area_town_name : '' }}{{ orderInfo.address.area_village_name ? orderInfo.address.area_village_name : '' }}{{ orderInfo.address.address ? orderInfo.address.address : '' }}
</text>
</view>
<text class="yticon icon-you"></text>
</view>
<image class="a-bg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAAAFCAYAAAAaAWmiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Rjk3RjkzMjM2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Rjk3RjkzMjQ2NzMxMTFFOUI4RkU4OEZGMDcxQzgzOEYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTdGOTMyMTY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTdGOTMyMjY3MzExMUU5QjhGRTg4RkYwNzFDODM4RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrEOZlQAAAiuSURBVHjazJp7bFvV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"></image>
</navigator>
<view class="goods-section">
<block v-for="(item, index) in orderInfo.goods_data" :key="index">
<view class="g-header b-b">
<image class="logo" :src="domainHost + item.shop_info.shop_logo"></image>
<text class="name">{{item.shop_info.shop_name}}</text>
</view>
<!-- 商品列表 -->
<view class="g-item" v-for="(goodsItem, goodsIndex) in item.goods_list" :key="goodsIndex">
<image :src="domainHost + (goodsItem.sku_picture_info==null?goodsItem.goods_picture_info.pic_cover_small:goodsItem.sku_picture_info.pic_cover_small)"></image>
<view class="right">
<text class="title clamp">{{goodsItem.goods_info.goods_name}}</text>
<text class="spec">{{goodsItem.sku_info.sku_name==''?'标准版':goodsItem.sku_info.sku_name}}</text>
<view class="price-box">
<text class="price">￥{{goodsItem.total_price}}</text>
<block v-if="goodsItem.sale_area.code==1">
<uni-number-box
class="step number"
:min="1"
:max="goodsItem.goods_info.max_buy==0?goodsItem.goods_info.stock:goodsItem.goods_info.max_buy"
:value="goodsItem.num"
:goodsId="goodsItem.goods_info.Id"
:skuId="goodsItem.sku_info.sku_id"
@eventChange="amountChange"
></uni-number-box>
</block>
<block v-else>
<text class="store_none disabled">此区域已售罄</text>
</block>
</view>
</view>
</view>
</block>
</view>
<!-- 优惠明细 -->
<view class="yt-list">
<!--
<view class="yt-list-cell b-b" @click="toggleMask('show')">
<view class="cell-icon">
券
</view>
<text class="cell-tit clamp">优惠券</text>
<text class="cell-tip active">
选择优惠券
</text>
<text class="cell-more wanjia wanjia-gengduo-d"></text>
</view>
-->
<view class="yt-list-cell b-b">
<view class="cell-icon hb">
减
</view>
<text class="cell-tit clamp">商家促销</text>
<text class="cell-tip disabled">暂无优惠</text>
</view>
</view>
<!-- 金额明细 -->
<view class="yt-list">
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">商品金额</text>
<text class="cell-tip">￥{{orderInfo.total_money}}</text>
</view>
<view class="yt-list-cell b-b">
<text class="cell-tit clamp" style="width: 200px;">金币抵扣</text>
<text class="cell-tip">-￥{{orderInfo.total_max_use_coin}}</text>
<!--
<view class="con">
<uni-number-box
class="use_coin"
:min="0"
:max="orderInfo.total_max_use_coin"
:value="use_coin"
@eventChange="coinChange"
></uni-number-box>
</view>
-->
</view>
<view class="yt-list-cell b-b">
<text class="cell-tit clamp">运费</text>
<text class="cell-tip">{{orderInfo.shipping_money==0?'包邮':'￥'+orderInfo.shipping_money}}</text>
</view>
<view class="yt-list-cell desc-cell">
<text class="cell-tit clamp">备注</text>
<input class="desc" type="text" v-model="member_message" placeholder="请填写备注信息" placeholder-class="placeholder" />
</view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="price-content">
<text>实付款</text>
<text class="price-tip">￥</text>
<text class="price">{{orderInfo.pay_money}}</text>
</view>
<text class="submit" @click="submit">提交订单</text>
</view>
<!-- 优惠券面板 -->
<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
<view class="mask-content" @click.stop.prevent="stopPrevent">
<!-- 优惠券页面，仿mt -->
<view class="coupon-item" v-for="(item,index) in couponList" :key="index">
<view class="con">
<view class="left">
<text class="title">{{item.title}}</text>
<text class="time">有效期至2019-06-30</text>
</view>
<view class="right">
<text class="price">{{item.price}}</text>
<text>满30可用</text>
</view>
<view class="circle l"></view>
<view class="circle r"></view>
</view>
<text class="tips">限新用户使用</text>
</view>
</view>
</view>
</view>
</template>
<script>
import uniNumberBox from '@/components/uni-number-box.vue'
export default {
components: {
mallplusCopyright,
uniNumberBox
},
data() {
return {
domainHost:'',
orderInfo:[],
queryInfo:[],
maskState: 0, //优惠券面板显示状态
member_message: '', //备注
payType: 1, //1微信 2支付宝
couponList: [
{
title: '新用户专享优惠券',
price: 5,
},
{
title: '庆五一发一波优惠券',
price: 10,
},
{
title: '优惠券优惠券优惠券优惠券',
price: 15,
}
],
use_coin:0,
}
},
onLoad(option){
//商品数据
//let data = JSON.parse(option.data);
this.domainHost = this.$http.Config.baseUrl
this.queryInfo = JSON.parse(decodeURIComponent(this.$Route.query.list))
this.queryInfo = JSON.stringify({goods_data:this.queryInfo})
this.order_Calculate()
},
onShow() {
//this.order_Calculate()
},
methods: {
//显示优惠券面板
toggleMask(type){
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.maskState = 2;
setTimeout(()=>{
this.maskState = state;
}, timer)
},
coinChange(data)
{
this.use_coin = data.number
},
amountChange(data) {
let tempInfo = JSON.parse(this.queryInfo)
let goodsList = tempInfo.goods_data
for(var i=0;i<goodsList.length;i++)
{
if(goodsList[i].goods_id== data.goodsId && goodsList[i].sku_id==data.skuId)
{
goodsList[i].num = data.number;
break;
}
}
tempInfo.goods_data = goodsList
this.queryInfo = JSON.stringify(tempInfo)
this.order_Calculate()
},
changePayType(type){
this.payType = type;
},
submit(){
uni.showLoading({
title: '请稍候'
});
let data = JSON.parse(this.queryInfo)
data.address_id = this.orderInfo.address.Id
data.member_message = this.member_message
data = JSON.stringify(data)
this.$http.orderCreate(data).then(res => {
uni.hideLoading();
if(res.data.status==1)
{
this.$Router.push({
name: 'pay',
params: res.data.content
})
}
else
{
uni.showToast({
title:res.data.message,icon:'none'
})
}
});
},
stopPrevent(){}
,order_Calculate()
{
let _this = this
let data = this.queryInfo
uni.showLoading({
title: '加载中'
});
if(this.orderInfo)
{
if(this.orderInfo.address)
{
let tempInfo = JSON.parse(this.queryInfo)
tempInfo.address_id = this.orderInfo.address.Id
data = JSON.stringify(tempInfo)
}
}
this.$http.order_Calculate(data).then(res => {
uni.hideLoading();
if(res.data.status==1)
{
res.data.content.total_max_use_coin = parseFloat(res.data.content.total_max_use_coin)
this.orderInfo = res.data.content
if(this.orderInfo.address==null)
{
uni.showModal({
title:'提示',
content:'请先添加收货地址才可以购买商品！',
success(res) {
if (res.confirm)
{
_this.$Router.push({name:'address'})
}
else
{
_this.$Router.back()
}
}
})
}
}
else
{
uni.showToast({
title:res.data.message,icon:'none'
})
}
});
}
}
}
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 100upx;
}
.address-section {
padding: 30upx 0;
background: #fff;
position: relative;
.order-content {
display: flex;
align-items: center;
}
.icon-shouhuodizhi {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 90upx;
color: #888;
font-size: 44upx;
}
.cen {
display: flex;
flex-direction: column;
flex: 1;
font-size: 28upx;
color: $font-color-dark;
}
.name {
font-size: 34upx;
margin-right: 24upx;
}
.address {
margin-top: 16upx;
margin-right: 20upx;
color: $font-color-light;
}
.icon-you {
font-size: 32upx;
color: $font-color-light;
margin-right: 30upx;
}
.a-bg {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 5upx;
}
}
.goods-section {
margin-top: 16upx;
background: #fff;
padding-bottom: 1px;
.g-header {
display: flex;
align-items: center;
height: 84upx;
padding: 0 30upx;
position: relative;
}
.logo {
display: block;
width: 50upx;
height: 50upx;
border-radius: 100px;
}
.name {
font-size: 30upx;
color: $font-color-base;
margin-left: 24upx;
}
.g-item {
display: flex;
margin: 20upx 30upx;
image {
flex-shrink: 0;
display: block;
width: 140upx;
height: 140upx;
border-radius: 4upx;
}
.right {
flex: 1;
padding-left: 24upx;
overflow: hidden;
}
.title {
font-size: 30upx;
color: $font-color-dark;
}
.spec {
font-size: 26upx;
color: $font-color-light;
}
.price-box {
display: flex;
align-items: center;
font-size: 32upx;
color: $font-color-dark;
padding-top: 10upx;
.price {
margin-bottom: 4upx;
width: 100upx;
}
.number{
/* #ifdef APP-PLUS */
margin-top: 40upx;
/* #endif */
margin-left: 160upx;
position: relative;
}
}
.step-box {
position: relative;
}
}
}
.yt-list {
margin-top: 16upx;
background: #fff;
}
.yt-list-cell {
display: flex;
align-items: center;
padding: 10upx 30upx 10upx 40upx;
line-height: 70upx;
position: relative;
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30upx;
}
.cell-icon {
height: 32upx;
width: 32upx;
font-size: 22upx;
color: #fff;
text-align: center;
line-height: 32upx;
background: #f85e52;
border-radius: 4upx;
margin-right: 12upx;
&.hb {
background: #ffaa0e;
}
&.lpk {
background: #3ab54a;
}
}
.cell-more {
align-self: center;
font-size: 24upx;
color: $font-color-light;
margin-left: 8upx;
margin-right: -10upx;
}
.cell-tit {
flex: 1;
font-size: 26upx;
color: $font-color-light;
margin-right: 10upx;
}
.cell-tip {
font-size: 26upx;
color: $font-color-dark;
&.disabled {
color: $font-color-light;
}
&.active {
color: $base-color;
}
&.red{
color: $base-color;
}
}
&.desc-cell {
.cell-tit {
max-width: 90upx;
}
}
.desc {
flex: 1;
font-size: $font-base;
color: $font-color-dark;
}
}
/* 支付列表 */
.pay-list{
padding-left: 40upx;
margin-top: 16upx;
background: #fff;
.pay-item{
display: flex;
align-items: center;
padding-right: 20upx;
line-height: 1;
height: 110upx;
position: relative;
}
.icon-weixinzhifu{
width: 80upx;
font-size: 40upx;
color: #6BCC03;
}
.icon-alipay{
width: 80upx;
font-size: 40upx;
color: #06B4FD;
}
.icon-xuanzhong2{
display: flex;
align-items: center;
justify-content: center;
width: 60upx;
height: 60upx;
font-size: 40upx;
color: $base-color;
}
.tit{
font-size: 32upx;
color: $font-color-dark;
flex: 1;
}
}
.footer{
position: fixed;
left: 0;
bottom: 0;
z-index: 995;
display: flex;
align-items: center;
width: 100%;
height: 90upx;
justify-content: space-between;
font-size: 30upx;
background-color: #fff;
z-index: 998;
color: $font-color-base;
box-shadow: 0 -1px 5px rgba(0,0,0,.1);
.price-content{
padding-left: 30upx;
}
.price-tip{
color: $base-color;
margin-left: 8upx;
}
.price{
font-size: 36upx;
color: $base-color;
}
.submit{
display:flex;
align-items:center;
justify-content: center;
width: 280upx;
height: 100%;
color: #fff;
font-size: 32upx;
background-color: $base-color;
}
}
/* 优惠券面板 */
.mask{
display: flex;
align-items: flex-end;
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0,0,0,0);
z-index: 9995;
transition: .3s;
.mask-content{
width: 100%;
min-height: 30vh;
max-height: 70vh;
background: #f3f3f3;
transform: translateY(100%);
transition: .3s;
overflow-y:scroll;
}
&.none{
display: none;
}
&.show{
background: rgba(0,0,0,.4);
.mask-content{
transform: translateY(0);
}
}
}
/* 优惠券列表 */
.coupon-item{
display: flex;
flex-direction: column;
margin: 20upx 24upx;
background: #fff;
.con{
display: flex;
align-items: center;
position: relative;
height: 120upx;
padding: 0 30upx;
&:after{
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px dashed #f3f3f3;
transform: scaleY(50%);
}
}
.left{
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
overflow: hidden;
height: 100upx;
}
.title{
font-size: 32upx;
color: $font-color-dark;
margin-bottom: 10upx;
}
.time{
font-size: 24upx;
color: $font-color-light;
}
.right{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 26upx;
color: $font-color-base;
height: 100upx;
}
.price{
font-size: 44upx;
color: $base-color;
&:before{
content: '￥';
font-size: 34upx;
}
}
.tips{
font-size: 24upx;
color: $font-color-light;
line-height: 60upx;
padding-left: 30upx;
}
.circle{
position: absolute;
left: -6upx;
bottom: -10upx;
z-index: 10;
width: 20upx;
height: 20upx;
background: #f3f3f3;
border-radius: 100px;
&.r{
left: auto;
right: -6upx;
}
}
}
.con{
flex: 1;
}
.use_coin{
position:relative;
/* #ifndef APP-PLUS */
left: 100upx;
/* #endif */
/* #ifdef APP-PLUS */
top: 30upx;
left: 80upx;
/* #endif */
}
.store_none{
font-size: 26upx;
color: $font-color-dark;
&.disabled {
color: $font-color-light;
}
&.active {
color: $base-color;
}
&.red{
color: $base-color;
}
position:relative;
left: 250upx;
}
</style>

291
mallplusui-uniapp-app/pages/order/evaluate.vue Normal file
View File

@@ -0,0 +1,291 @@
<template>
<view class="content">
<view class="content-top">
<view class="img-list">
<view class="img-list-item" v-for="item in info.orderItemList" :key="item.id">
<view class="img-list-item-gray">
<image class="img-list-item-l small-img" :src="item.productPic" mode="aspectFill"></image>
<view class="img-list-item-r small-right" @click="goodsDetail(item.productId)">
<view class="little-right-t">
<view class="goods-name list-goods-name">{{ item.productName }}</view>
</view>
</view>
</view>
<view class="evaluate-num">
<view class="evaluate-num-t">商品评分</view>
<view class="evaluate-num-b">
<uni-rate value="2"></uni-rate>
<uniRate size="18" :id="item.productId" :value="score[item.productId]" @change="changeScore"></uniRate>
</view>
</view>
<view class="evaluate-content">
<view class="evaluate-c-t"><textarea v-model="textarea[item.productId]" placeholder="宝贝满足你的期待吗? 说说你的使用心得" /></view>
<view class="evaluate-c-b">
<view class="goods-img-item" v-if="images[item.productId].length" v-for="(img, key) in images[item.productId]" :key="key">
<image class="del" mode="" @click="removeImg(item.productId, key)"></image>
<image class="" :src="img.url" mode="" @click="clickImg(img.url)"></image>
</view>
<view class="upload-img" v-show="isupload[item.productId]">
<image class="icon" mode="" @click="uploadImg(item.productId)"></image>
<view class="">上传照片</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="button-bottom">
<button class="btn btn-square btn-b" hover-class="btn-hover" @click="toEvaluate" :disabled="submitStatus" :loading="submitStatus">提交评论</button>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import { goods } from '@/config/mixins.js';
export default {
mixins: [goods],
components: {
mallplusCopyright,
uniRate
},
data() {
return {
orderId: 0,
info: {}, // 订单详情
images: [],
score: [], // 商品评价
textarea: [], // 商品评价信息
isupload: [], // 启/禁用 图片上传按钮
rate: 5,
submitStatus: false
};
},
onLoad(options) {
this.orderId = options.order_id;
this.orderId
? this.orderInfo()
: this.$common.errorToShow('获取失败', () => {
uni.navigateBack({
delta: 1
});
});
},
computed: {
// 获取vuex中状态
maxUploadImg() {
return 1;
}
},
methods: {
// 获取订单详情
async orderInfo() {
let params = { id: this.orderId };
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
let images = [];
let textarea = [];
let upload = [];
let score = [];
this.orderInfo.orderItemList.forEach(item => {
if (item.type == 1) {
images[item.productId] = [];
textarea[item.productId] = '';
upload[item.productId] = true;
score[item.productId] = 5;
}
});
this.info = this.orderInfo;
this.images = images;
this.textarea = textarea;
this.score = score;
this.isupload = upload;
},
// 上传图片
uploadImg(key) {
this.$otherApi.uploadFiles(res => {
if (res.code == 200) {
let img = {
url: res.data,
id: res.data
};
this.images[key].push(img);
this.$common.successToShow(res.msg);
} else {
this.$common.errorToShow(res.msg);
}
});
},
// 删除图片
removeImg(id, key) {
this.images[id].splice(key, 1);
},
// 图片点击放大
clickImg(img) {
// 预览图片
uni.previewImage({
urls: img.split()
});
},
// 改变评分
changeScore(e) {
this.score[e.id] = e.value;
},
// 提交评价
async toEvaluate() {
this.submitStatus = true;
var myArray = new Array();
this.images.forEach((item, key) => {
let itemmm = {
goodsId: key,
images: item.url,
score: this.score[key],
textarea: this.textarea[key]
};
myArray.push(itemmm);
});
let params = {
orderId: this.orderId,
items: JSON.stringify(myArray)
};
uni.showLoading({
title: '请稍后'
});
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: '评价成功'
});
}, 600);
let data = await Api.apiCall('post', Api.order.orderevaluate, params);
console.log(data);
if (data) {
// 更改订单列表页的订单状态
let pages = getCurrentPages(); // 当前页
let beforePage = pages[pages.length - 2]; // 上个页面
if (beforePage !== undefined && beforePage.route === 'pages/order/order') {
// #ifdef MP-WEIXIN
beforePage.$vm.isReload = true;
// #endif
// #ifdef H5
beforePage.isReload = true;
// #endif
// #ifdef MP-ALIPAY
beforePage.rootVM.isReload = true;
// #endif
}
this.submitStatus = false;
uni.navigateBack({
delta: 1
});
}
uni.hideLoading();
}
},
watch: {
images: {
handler() {
this.images.forEach((item, key) => {
this.isupload[key] = item.length > this.maxUploadImg ? false : true;
});
},
deep: true
}
}
};
</script>
<style>
.img-list-item {
padding: 30upx 20upx;
}
.img-list-item-gray {
background-color: #f7f7f7;
overflow: hidden;
padding: 18upx 20upx;
}
.small-right {
width: 520upx;
}
.evaluate-content {
background-color: #fff;
padding: 20upx 0upx;
}
.evaluate-c-t {
width: 100%;
height: 240upx;
}
.evaluate-c-t textarea {
width: 100%;
height: 100%;
font-size: 26upx;
padding: 10upx;
}
.evaluate-c-b {
overflow: hidden;
}
.upload-img {
width: 146upx;
height: 146upx;
margin: 14upx;
text-align: center;
color: #999999;
font-size: 22upx;
border: 2upx solid #e1e1e1;
/* #ifdef MP-ALIPAY */
border-top: 8upx solid #e1e1e1;
/* #endif */
border-radius: 4upx;
display: inline-block;
float: left;
padding: 24upx 0;
}
.goods-img-item {
width: 174upx;
height: 174upx;
padding: 14upx;
float: left;
position: relative;
}
.goods-img-item:nth-child(4n) {
margin-right: 0;
}
.goods-img-item image {
width: 100%;
height: 100%;
}
.del {
width: 30upx !important;
height: 30upx !important;
position: absolute;
right: 0;
top: 0;
z-index: 999;
}
.evaluate-num {
padding: 20upx 26upx;
background-color: #fff;
margin-top: 20upx;
}
.evaluate-num-t {
color: #333;
font-size: 28upx;
margin-bottom: 20upx;
}
.button-bottom .btn {
width: 100%;
}
</style>

230
mallplusui-uniapp-app/pages/order/logistics.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<div class="div-bg bg-white" >
<div style="height: 0.5rem;width: 100%;background-color:#f7f7f7"></div>
<!--物流跟踪-->
<div style="padding-bottom: 0.5rem;">
<div class="bg-white" style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;">
<div style="font-size: 1rem;color: #111111;">物流跟踪<!--物流跟踪--></div>
<div>
<div class="track-rcol">
<div class="track-list">
<ul>
<div v-for="(item,index) in logisticsList" :key="index">
<li class="first" v-if="index===0">
<div></div>
<i class="node-icon"></i>
<span class="txt">{{item.AcceptStation}}</span>
<span class="time">{{item.AcceptTime}}</span>
</li>
<li v-if="index > 0 && index !== logisticsList.length-1">
<i class="node-icon"></i>
<span class="txt">{{item.AcceptStation}}</span>
<span class="time">{{item.AcceptTime}}</span>
</li>
<li v-if="index === logisticsList.length-1" class="finall">
<i class="div-spilander"></i>
<i class="node-icon"></i>
<span class="txt">{{item.AcceptStation}}</span>
<span class="time">{{item.AcceptTime}}</span>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Api from '@/common/api';
export default {
name: 'Logic',
data () {
return {
logisticsList: []
}
},
async onLoad(options) {
let params = { orderId: options.order_id };
let returnLogisticby = await Api.apiCall('get', Api.order.logisticbyapi, params);
this.logisticsList = returnLogisticby.Traces;
},
methods: {
},
/**
* 加载时执行
*/
mounted: function () {
}
}
</script>
<style scoped>
.message-text{
font-family: MicrosoftYaHei;
font-size: 1rem;
font-weight: normal;
font-stretch: normal;
line-height: 3rem;
letter-spacing: 0rem;
color: #333333;
width: 50%;
}
.fontblack{
color:#999999
}
.img2{
width: .81rem;
height: .8rem;
float: right;
}
.addressshow2{
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
width: 75%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
font-size: 1rem;
}
.addressshow1{
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
width: 75%;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
font-size: 1rem;
}
.orderTitle{
font-size: 1rem;
color: #333333;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
height: 2.5rem;
}
.orderDetail{
font-size: 0.8rem;
color: #666666;
text-align:left;
}
.border-ceter{
width: 92%;
padding-left: 15px;
padding-right: 15px;
}
.pay-button{
width: 88%;
height: 2.6rem;
position:relative;
background-color: red;
color: white;
margin-left: 6%;
}
ul li{
list-style:none;
font-size: 0.7rem;
}
ul {
padding-left: 1.5rem
}
.track-rcol{}
.track-list{
position:relative;
}
.track-list li{
position:relative;
padding:0px 0 1.5rem 25px;
line-height:1rem;
border-left:1px solid #d9d9d9;
color: #999;
}
.track-list li.first{
color:red;
padding-top:0;
width: 100%;
text-align: left;
border-left:1px solid #d9d9d9;
}
.track-list li .node-icon{
position: absolute;
left: -5.5px;
border-radius: 0.25rem;
width: 0.5rem;
height: 0.5rem;
top:4px;
background-color: #999999;
}
.track-list li.first .node-icon{
background-position:0-72px;
background-color: red;
width: 1rem;
z-index: 2;
height: 1rem;
position: absolute;
left: -9px;
top: 0;
border-radius: 0.5rem;
}
.track-list li .time{
margin-right:20px;
position:relative;
top:4px;
display:inline-block;
vertical-align:middle;
background-color: white;
color: #999;
width: 100%;
text-align: left;
}
.track-list li .txt{
position:relative;
display:inline-block;
vertical-align:top;
color: #999;
}
.track-list li.first .time{
text-align: left;
width: 94%;
color:red;
}
.track-list li.first .txt{
color: red;
text-align: left;
width: 94%;
}
.track-list li.finall{
position:relative;
padding:0px 0 1.5rem 25px;
line-height:18px;
border-color: white;
border-left:1px solid #ffffff;
color: #999;
}
.track-list li.finall .div-spilander{
width: 1px;
position: absolute;
position: absolute;
left: -1.5px;
height: 0.5rem;
background-color: #d9d9d9;
}
</style>

671
mallplusui-uniapp-app/pages/order/order.vue Normal file
View File

@@ -0,0 +1,671 @@
<template>
<view class="content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<!-- 空白页 -->
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<!-- 订单列表 -->
<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
<view class="i-top b-b">
<text class="time" @click="navToDetailPage(item)">{{ item.createTime }}</text>
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.id }}--</text>
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.stateTip }}</text>
<!-- <text v-if="item.status === 12" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text> -->
</view>
<scroll-view v-if="item.orderItemList.length > 1" class="goods-box" scroll-y>
<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" class="goods-item">
<img class="goods-img" :src="goodsItem.productPic" @click="navToDetailPage(item)" mode="aspectFill" />
</view>
</scroll-view>
<view v-if="item.orderItemList.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex">
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill" />
<view class="right" @click="navToDetailPage(item)">
<text class="title clamp">{{ goodsItem.productName }}</text>
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
<text class="price">{{ goodsItem.productPrice }}</text><br/>
<text class="title clamp" v-if="item.status === 5">{{ item.deliveryCompany }}:{{ item.deliverySn }}</text>
<text class="title clamp" v-if="item.status === 3">{{ item.deliveryCompany }}:{{ item.deliverySn }}</text>
</view>
</view>
<view class="price-box">
共
<text class="num">{{ item.orderItemList.length }}</text>
件商品 实付款
<text class="price">{{ item.payAmount }}</text>
</view>
<view class="action-box b-t">
<text class="state" :style="{ color: item.stateTipColor }" v-if="item.orderType == 6">秒杀订单</text>
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 2">拼团订单</text>
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 3">团购订单</text>
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 4">砍价订单</text>
<text class="state" :style="{ color: item.stateTipColor }" v-else-if="item.orderType == 5">积分订单</text>
<button v-if="item.status == 12" class="action-btn" @click="cancelOrder(item)">取消订单</button>
<button v-if="item.status == 12" class="action-btn recom" @click="payOrder(item)">立即支付</button>
<button v-if="item.status > 2 && item.status < 10" class="action-btn recom" @click="lookLogistics(item.id)">物流追踪</button>
<button v-if="item.status < 5" class="action-btn recom" @click="applyRefund(item.id)">申请售后</button>
<button v-if="item.status == 3" class="action-btn recom" @click="confimDelivery(item)">确认收货</button>
<button class="action-btn recom" hover-class="btn-hover" v-if="item.status === 4" @click="toEvaluate(item.id)">立即评价</button>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { mapState } from 'vuex';
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { formatDate } from '@/common/date';
export default {
components: {
mallplusCopyright,
uniLoadMore,
empty
},
data() {
return {
tabCurrentIndex: 0,
pageNum: 1,
orderList: [],
headerPosition: 'fixed',
headerTop: '0px',
loadingType: 'loading', //加载更多状态
navList: [
{
status: 0,
text: '全部',
loadingType: 'loading',
orderList: []
},
{
status: 12,
text: '待付款',
loadingType: 'loading',
orderList: []
},
{
status: 2,
text: '待发货',
loadingType: 'loading',
orderList: []
},
{
status: 3,
text: '已发货',
loadingType: 'loading',
orderList: []
},
{
status: 5,
text: '已完成',
loadingType: 'loading',
orderList: []
}
]
};
},
onLoad(options) {
/**
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
* 替换onLoad下代码即可
*/
this.tabCurrentIndex = +options.status;
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum+1;
this.loadData('refresh');
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `/pages/order/orderDetail?id=${id}`
});
},
//获取订单列表
async loadData(type = 'add', loading) {
//这里是将订单挂载到tab列表下
let index = this.tabCurrentIndex;
let navItem = this.navList[index];
console.log(navItem);
let status = navItem.status;
let url;
let params = { pageNum: this.pageNum, status: status };
let data = await Api.apiCall('get', Api.order.orderList, params);
console.log("data:------"+JSON.stringify(data))
let goodsList = data.records;
let goodsListJson = JSON.stringify(goodsList)
console.log("goodsList:"+goodsListJson)
let orderList = goodsList.filter(item => {
//添加不同状态下订单的表现形式
item = Object.assign(item, this.orderStateExp(item.status));
item.createTime = this.dateFormat(item.createTime);
//演示数据所以自己进行状态筛选
if (status === 0) {
//0为全部订单
return item;
}
return item.status === status;
});
if (type === 'refresh') {
this.orderList = [];
}
this.orderList = this.orderList.concat(orderList);
console.log("this.orderList.length======:"+this.orderList.length)
console.log("data.total======:"+data.total)
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.orderList.length >= data.total ? 'nomore' : 'loading';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
navItem.orderList = [];
console.log(JSON.stringify(orderList))
orderList.forEach(item => {
console.log("item-----:"+item)
navItem.orderList.push(item);
});
},
//swiper 切换
changeTab(e) {
this.tabCurrentIndex = e.target.current;
//this.pageNum = 1;
this.loadData('refresh');
},
//顶部tab点击
tabClick(index) {
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = index;
},
//删除订单
async deleteOrder(index) {
uni.showLoading({
title: '请稍后'
});
setTimeout(() => {
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
uni.showToast({
title: '删除成功'
});
}, 600);
},
async payOrder(item) {
let url = '/pages/order/payment/index?order_id=' + item.id + '&type=1';
this.$common.navigateTo(url);
},
//取消订单
async cancelOrder(item) {
let params = { orderId: item.id };
let data = await Api.apiCall('post', Api.order.closeOrder, params);
console.log(data)
if (data) {
this.$api.msg(data);
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 4;
}
},
//订单确认收货
async confimDelivery(item) {
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.confimDelivery, params);
console.log(data);
if (data) {
this.$api.msg(data);
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 4;
}
},
lookLogistics(orderId) {
this.$common.navigateTo('/pages/order/logistics?order_id=' + orderId);
},
// 申请售后
applyRefund(orderId) {
this.$common.navigateTo('../../pagesA/after_sale/index?order_id=' + orderId);
},
//订单申请退款
async applyRefund1(item) {
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.applyRefund, params);
if (data) {
console.log(data);
this.$api.msg(data);
}
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 5;
},
// 去评价
toEvaluate(orderId) {
this.$common.navigateTo('/pages/order/evaluate?order_id=' + orderId);
},
//订单状态文字和颜色
orderStateExp(value) {
let stateTip = '',
stateTipColor = '#fa436a';
if (value === 12) {
stateTipColor = '#909399';
stateTip = '待付款';
}
if (value === 1) {
stateTipColor = '#909399';
stateTip = '支付成功，没有回掉';
}
if (value === 2) {
stateTip = '待发货';
} else if (value === 3) {
stateTip = '待收货';
} else if (value === 4) {
stateTip = '待评价';
} else if (value === 5) {
stateTip = '已完成';
} else if (value === 6) {
stateTipColor = '#909399';
stateTip = '维权中';
} else if (value === 7) {
stateTip = ' 维权已完成';
} else if (value === 8) {
stateTip = '待分享';
} else if (value === 13) {
stateTip = '申请退款';
} else if (value === 14) {
stateTip = '已退款';
} else if (value === 15) {
stateTip = '已关闭';
} else if (value === 16) {
stateTip = '无效订单';
} else if (value === 18) {
stateTip = '拼团下单';
} else {
stateTip = '待付款';
}
return { stateTip, stateTipColor };
},
dateFormat(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.list-scroll-content {
height: 100%;
}
.navbar {
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 15px;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $base-color;
}
}
}
}
.uni-swiper-item {
height: auto;
}
.order-item {
display: flex;
flex-direction: column;
padding-left: 30upx;
background: #fff;
margin-top: 16upx;
.i-top {
display: flex;
align-items: center;
height: 80upx;
padding-right: 30upx;
font-size: $font-base;
color: $font-color-dark;
position: relative;
.time {
flex: 1;
}
.state {
color: $base-color;
}
.del-btn {
padding: 10upx 0 10upx 36upx;
font-size: $font-lg;
color: $font-color-light;
position: relative;
&:after {
content: '';
width: 0;
height: 30upx;
border-left: 1px solid $border-color-dark;
position: absolute;
left: 20upx;
top: 50%;
transform: translateY(-50%);
}
}
}
/* 多条商品 */
.goods-box {
height: 160upx;
padding: 20upx 0;
white-space: nowrap;
.goods-item {
width: 120upx;
height: 120upx;
display: inline-block;
margin-right: 24upx;
}
.goods-img {
display: block;
width: 100%;
height: 100%;
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
}
/* load-more */
.uni-load-more {
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 28upx;
color: #999;
}
.uni-load-more__img {
height: 24px;
width: 24px;
margin-right: 10px;
}
.uni-load-more__img > view {
position: absolute;
}
.uni-load-more__img > view view {
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: 0.2;
transform-origin: 50%;
animation: load 1.56s ease infinite;
}
.uni-load-more__img > view view:nth-child(1) {
transform: rotate(90deg);
top: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(2) {
transform: rotate(180deg);
top: 11px;
right: 0;
}
.uni-load-more__img > view view:nth-child(3) {
transform: rotate(270deg);
bottom: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(4) {
top: 11px;
left: 0;
}
.load1,
.load2,
.load3 {
height: 24px;
width: 24px;
}
.load2 {
transform: rotate(30deg);
}
.load3 {
transform: rotate(60deg);
}
.load1 view:nth-child(1) {
animation-delay: 0s;
}
.load2 view:nth-child(1) {
animation-delay: 0.13s;
}
.load3 view:nth-child(1) {
animation-delay: 0.26s;
}
.load1 view:nth-child(2) {
animation-delay: 0.39s;
}
.load2 view:nth-child(2) {
animation-delay: 0.52s;
}
.load3 view:nth-child(2) {
animation-delay: 0.65s;
}
.load1 view:nth-child(3) {
animation-delay: 0.78s;
}
.load2 view:nth-child(3) {
animation-delay: 0.91s;
}
.load3 view:nth-child(3) {
animation-delay: 1.04s;
}
.load1 view:nth-child(4) {
animation-delay: 1.17s;
}
.load2 view:nth-child(4) {
animation-delay: 1.3s;
}
.load3 view:nth-child(4) {
animation-delay: 1.43s;
}
@-webkit-keyframes load {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
</style>

590
mallplusui-uniapp-app/pages/order/orderDetail.vue Normal file
View File

@@ -0,0 +1,590 @@
<template>
<view class="content">
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content">
<scroll-view class="list-scroll-content" scroll-y>
<!-- 订单列表 -->
<view class="order-item">
<view class="i-top b-b">
<text class="time">{{ orderInfo.createTime }}</text>
<text class="state" :style="{ color: orderInfo.stateTipColor }" @click="navToDetailPage(item)">{{ orderInfo.id }}--</text>
<text class="state" :style="{ color: orderInfo.stateTipColor }">{{ orderInfo.stateTip }}</text>
<text v-if="orderInfo.status === 9" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text>
</view>
<view class="i-top b-b">
<text class="state" :style="{ color: orderInfo.stateTipColor }">订单商品</text>
</view>
<view v-if="goodsItem.type === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex">
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img>
<view class="right">
<text class="title clamp">{{ goodsItem.productName }}</text>
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
<text class="price">{{ goodsItem.productPrice }} </text>
</view>
</view>
<view class="i-top b-b">
<text class="state" :style="{ color: orderInfo.stateTipColor }">订单赠品</text>
</view>
<view v-if="goodsItem.type === 2" class="goods-box-single" v-for="(goodsItem, goodsIndex) in orderInfo.orderItemList" :key="goodsIndex">
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img>
<view class="right">
<text class="title clamp">{{ goodsItem.productName }}</text>
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
<text class="price">{{ goodsItem.productPrice }} </text>
</view>
</view>
<view class="price-box">
共
<text class="num">{{ orderInfo.orderItemList.length }}</text>
件商品, 会员折扣
<text class="price">{{ orderInfo.vipAmount }}</text>
优惠券抵扣
<text class="price">{{ orderInfo.couponAmount }}</text>
</view>
<view class="price-box">
积分抵扣
<text class="price">{{ orderInfo.integrationAmount }}</text>
,运费
<text class="price">{{ orderInfo.freightAmount }}</text>
<view class="yt-list-cell b-b" v-if="groupActivity">
<text class="cell-tit clamp">活动金额</text>
<text class="cell-tip">￥{{ groupActivity.price }}</text>
</view>
,实付款
<text class="price">{{ orderInfo.payAmount }}</text>
</view>
<view class="action-box b-t">
<button v-if="orderInfo.status == 12" class="action-btn" @click="cancelOrder(orderInfo)">取消订单</button>
<button v-if="orderInfo.status == 12" class="action-btn recom" @click="payOrder(orderInfo)">立即支付</button>
<button v-if="orderInfo.status <7" class="action-btn recom" @click="applyRefund(orderInfo.id)">申请售后</button>
<button v-if="orderInfo.status == 3" class="action-btn recom" @click="confimDelivery(orderInfo)">确认收货</button>
<button class='action-btn recom'
hover-class="btn-hover"
v-if="orderInfo.status === 4"
@click="toEvaluate(orderInfo.id)"
>立即评价</button>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { mapState } from 'vuex';
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import Json from '@/Json';
import { formatDate } from '@/common/date';
export default {
components: {
mallplusCopyright,
uniLoadMore,
empty
},
data() {
return {
tabCurrentIndex: 0,
orderInfo: [],
navList: [
{
status: 0,
text: '全部',
loadingType: 'more',
orderList: []
},
{
status: 12,
text: '待付款',
loadingType: 'more',
orderList: []
},
{
status: 2,
text: '待发货',
loadingType: 'more',
orderList: []
},
{
status: 3,
text: '已发货',
loadingType: 'more',
orderList: []
},
{
status: 4,
text: '已完成',
loadingType: 'more',
orderList: []
}
]
};
},
async onLoad(options) {
let params = { id: options.id };
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
this.orderInfo = Object.assign(this.orderInfo, this.orderStateExp(this.orderInfo.status));
this.orderInfo.createTime = this.dateFormat(this.orderInfo.createTime);
},
methods: {
//swiper 切换
changeTab(e) {
this.tabCurrentIndex = e.target.current;
this.loadData('tabChange');
},
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
},
//删除订单
async deleteOrder(index) {
uni.showLoading({
title: '请稍后'
});
setTimeout(() => {
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
}, 600);
},
async payOrder(item) {
let url = '/pages/order/payment/index?order_id=' + item.id + '&type=1' ;
this.$common.navigateTo(
url
)
},
//取消订单
async cancelOrder(item) {
uni.showLoading({
title: '请稍后'
});
let params = { orderId: item.id };
let data = await Api.apiCall('post', Api.order.closeOrder, params);
if (data) {
this.$api.msg(data.data);
}
uni.hideLoading();
},
//订单确认收货
async confimDelivery(item) {
uni.showLoading({
title: '请稍后'
});
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.confimDelivery, params);
if (data) {
this.$api.msg(data);
}
uni.hideLoading();
},
// 申请售后
applyRefund(orderId) {
this.$common.navigateTo(
'../../pagesA/after_sale/index?order_id=' + orderId
)
},
//订单申请退款
async applyRefund1(item) {
uni.showLoading({
title: '请稍后'
});
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.applyRefund, params);
console.log(data);
if (data) {
this.$api.msg(data.data);
}
uni.hideLoading();
},
// 去评价
toEvaluate(orderId) {
this.$common.navigateTo(
'/pages/order/evaluate?order_id=' + orderId
)
},
//订单状态文字和颜色
orderStateExp(value) {
let stateTip = '',
stateTipColor = '#fa436a';
if (value === 12) {
stateTipColor = '#909399';
return '待付款';
}if (value === 1) {
stateTipColor = '#909399';
return '支付成功，没有回掉';
}if (value === 2) {
stateTip = '待发货';
} else if (value === 3) {
stateTip = '待收货';
} else if (value === 4) {
stateTip = '待评价';
} else if (value === 5) {
stateTip = '已完成';
} else if (value === 6) {
stateTipColor = '#909399';
stateTip = '维权中';
} else if (value === 7) {
stateTip = ' 维权已完成';
} else if (value === 8) {
stateTip = '待分享';
} else if (value === 13) {
stateTip = '申请退款';
} else if (value === 14) {
stateTip = '已退款';
} else if (value === 15) {
stateTip = '已关闭';
} else if (value === 16) {
stateTip = '无效订单';
} else {
stateTip = '待付款';
}
return { stateTip, stateTipColor };
},
dateFormat(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.list-scroll-content {
height: 100%;
}
.navbar {
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 15px;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $base-color;
}
}
}
}
.uni-swiper-item {
height: auto;
}
.order-item {
display: flex;
flex-direction: column;
padding-left: 30upx;
background: #fff;
margin-top: 16upx;
.i-top {
display: flex;
align-items: center;
height: 80upx;
padding-right: 30upx;
font-size: $font-base;
color: $font-color-dark;
position: relative;
.time {
flex: 1;
}
.state {
color: $base-color;
}
.del-btn {
padding: 10upx 0 10upx 36upx;
font-size: $font-lg;
color: $font-color-light;
position: relative;
&:after {
content: '';
width: 0;
height: 30upx;
border-left: 1px solid $border-color-dark;
position: absolute;
left: 20upx;
top: 50%;
transform: translateY(-50%);
}
}
}
/* 多条商品 */
.goods-box {
height: 160upx;
padding: 20upx 0;
white-space: nowrap;
.goods-item {
width: 120upx;
height: 120upx;
display: inline-block;
margin-right: 24upx;
}
.goods-img {
display: block;
width: 100%;
height: 100%;
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
}
/* load-more */
.uni-load-more {
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 28upx;
color: #999;
}
.uni-load-more__img {
height: 24px;
width: 24px;
margin-right: 10px;
}
.uni-load-more__img > view {
position: absolute;
}
.uni-load-more__img > view view {
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: 0.2;
transform-origin: 50%;
animation: load 1.56s ease infinite;
}
.uni-load-more__img > view view:nth-child(1) {
transform: rotate(90deg);
top: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(2) {
transform: rotate(180deg);
top: 11px;
right: 0;
}
.uni-load-more__img > view view:nth-child(3) {
transform: rotate(270deg);
bottom: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(4) {
top: 11px;
left: 0;
}
.load1,
.load2,
.load3 {
height: 24px;
width: 24px;
}
.load2 {
transform: rotate(30deg);
}
.load3 {
transform: rotate(60deg);
}
.load1 view:nth-child(1) {
animation-delay: 0s;
}
.load2 view:nth-child(1) {
animation-delay: 0.13s;
}
.load3 view:nth-child(1) {
animation-delay: 0.26s;
}
.load1 view:nth-child(2) {
animation-delay: 0.39s;
}
.load2 view:nth-child(2) {
animation-delay: 0.52s;
}
.load3 view:nth-child(2) {
animation-delay: 0.65s;
}
.load1 view:nth-child(3) {
animation-delay: 0.78s;
}
.load2 view:nth-child(3) {
animation-delay: 0.91s;
}
.load3 view:nth-child(3) {
animation-delay: 1.04s;
}
.load1 view:nth-child(4) {
animation-delay: 1.17s;
}
.load2 view:nth-child(4) {
animation-delay: 1.3s;
}
.load3 view:nth-child(4) {
animation-delay: 1.43s;
}
@-webkit-keyframes load {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
</style>

159
mallplusui-uniapp-app/pages/order/payment/auth.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<view class="content">
<view class="content-c">
<view class="load-text color-9">信息加载中.....</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: '',
openid: '',
orderId: '',
state: ''
}
},
onLoad(options) {
this.orderId = options.order_id
this.money = Number(options.money)
this.type = Number(options.type)
this.uid = Number(options.uid)
this.state = this.$common.getQueryString('state')
this.getCode()
},
methods: {
getCode() {
var code = this.$common.getQueryString('code')
code && this.getOpenId(code)
},
async getOpenId(code) {
console.log(code)
let params = {
code: code,
scope: 2,
state: this.state
}
//模拟接口
let res = await Api.apiCall('get',Api.order.authCodeToOpenid,params);
console.log(res);
if (res) {
this.login(data);
console.log(data);
this.$db.set('userInfos', data.userInfo);
this.$db.set('token', data.tokenHead+data.token);
uni.switchTab({
url: '/pages/index/index'
});
//this.openid = res.data
// this.toPayHandler('wechatpay')
} else {
this.$common.errorToShow(res)
}
},
checkWXJSBridge(data) {
let that = this
let interval = setInterval(() => {
if (typeof window.WeixinJSBridge != 'undefined') {
clearTimeout(interval)
that.onBridgeReady(data)
}
}, 200)
},
onBridgeReady(data) {
var _this = this
window.WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: data.appid, // 公众号名称，由商户传入
timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
nonceStr: data.nonceStr, // 随机串
package: data.package,
signType: data.signType, // 微信签名方式：
paySign: data.paySign // 微信签名
},
function(res) {
if (res.err_msg === 'get_brand_wcpay_request:ok') {
_this.$common.successToShow('支付成功')
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
_this.$common.errorToShow('取消支付')
} else {
_this.$common.errorToShow('支付失败')
}
setTimeout(() => {
_this.$common.redirectTo(
'/pages/order/payment/result?id=' + data.id
)
},1000)
}
)
},
toPayHandler(code) {
let data = {
payment_code: code,
payment_type: this.type
}
data['ids'] = (this.type == 1 || this.type == 5 || this.type == 6) ? this.orderId : this.uid
//data['ids'] = this.type == 1 ? this.orderId : this.uid
if (this.type == 1 && this.orderId) {
// 微信jsapi支付
if (this.openid) {
data['params'] = {
trade_type: 'JSAPI_OFFICIAL',
openid: this.openid
}
}
} else if (this.type == 2 && this.money) {
if (this.openid) {
data['params'] = {
trade_type: 'JSAPI_OFFICIAL',
money: this.money,
openid: this.openid
}
}
}else if ((this.type == 5 || this.type == 6) && this.recharge) {
data['params'] = {
trade_type: 'JSAPI_OFFICIAL',
openid: this.openid,
formid: this.orderId
}
}
this.$api.pay(data, res => {
if (res.code == 200) {
const data = res.data
this.checkWXJSBridge(data)
} else {
this.$common.errorToShow(res.msg)
}
})
}
}
}
</script>
<style>
.content {
position: relative;
height: 80vh;
}
.content-c {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.load-img {
width: 100upx;
height: 100upx;
}
.load-text {
font-size: 26upx;
}
</style>

231
mallplusui-uniapp-app/pages/order/payment/index.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<view class="app">
<view class="price-box">
<text>支付金额</text>
<text class="price">{{orderInfo.payAmount}}</text>
</view>
<!-- #ifdef H5 -->
<payments-by-h5
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-h5>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<payments-by-wx
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-wx>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<payments-by-ali
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-ali>
<!-- #endif -->
<!-- #ifdef APP-PLUS||APP-PLUS-NVUE -->
<payments-by-app
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-app>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import paymentsByH5 from '@/components/payments/paymentsByH5.vue'
// #endif
// #ifdef MP-WEIXIN
import paymentsByWx from '@/components/payments/paymentsByWx.vue'
// #endif
// #ifdef MP-ALIPAY
import paymentsByAli from '@/components/payments/paymentsByAli.vue'
// #endif
// #ifdef APP-PLUS||APP-PLUS-NVUE
import paymentsByApp from '@/components/payments/paymentsByApp.vue'
// #endif
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
export default {
data () {
return {
orderId: 0,
recharge: 0,
type: 1, // 订单类型 1商品订单 2充值订单
orderInfo: {}, // 订单详情
userInfo: {}, // 用户信息
form_id:0
}
},
components: {
// #ifdef H5
paymentsByH5,
// #endif
// #ifdef MP-WEIXIN
paymentsByWx,
// #endif
// #ifdef MP-ALIPAY
paymentsByAli,
// #endif
// #ifdef APP-PLUS||APP-PLUS-NVUE
paymentsByApp,
// #endif
},
onLoad (options) {
this.orderId = options.order_id
this.recharge = Number(options.recharge)
this.type = Number(options.type)
this.form_id = Number(options.form_id)
if (this.orderId && this.type == 1) {
// 商品订单
this.getOrderInfo()
} else if (this.recharge && this.type == 2) {
// 充值订单 获取用户id
this.getUserInfo()
} else if (this.form_id && (this.type == 5 || this.type == 6)) {
// 表单订单 id传到订单上
this.orderId = ''+this.form_id;
} else {
this.$common.errorToShow('订单支付参数错误', () => {
uni.navigateBack({
delta: 1
})
})
}
},
methods: {
// 获取订单详情
async getOrderInfo () {
let params = {'id':this.orderId};
this.orderInfo = await Api.apiCall('get',Api.order.orderDetail,params);
if(this.orderInfo.pay_status == 2){
this.$common.redirectTo(
'/pages/order/payment/result?order_id=' + this.orderInfo.id
)
}
},
// 获取用户信息
getUserInfo () {
this.$api.userInfo({}, res => {
if (res.code == 200) {
this.userInfo = res.data
} else {
this.$common.errorToShow(res.msg)
}
})
},
// 跳转我的余额页面
toRecharge () {
this.$common.navigateTo('/pages/member/balance/index')
}
}
}
</script>
<style lang='scss'>
.app {
width: 100%;
}
.price-box {
background-color: #fff;
height: 265upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28upx;
color: #909399;
.price{
font-size: 50upx;
color: #303133;
margin-top: 12upx;
&:before{
content: '￥';
font-size: 40upx;
}
}
}
.pay-type-list {
margin-top: 20upx;
background-color: #fff;
padding-left: 60upx;
.type-item{
height: 120upx;
padding: 20upx 0;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 60upx;
font-size: 30upx;
position:relative;
}
.icon{
width: 100upx;
font-size: 52upx;
}
.icon-erjiye-yucunkuan {
color: #fe8e2e;
}
.icon-weixinzhifu {
color: #36cb59;
}
.icon-alipay {
color: #01aaef;
}
.tit{
font-size: $font-lg;
color: $font-color-dark;
margin-bottom: 4upx;
}
.con{
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-sm;
color: $font-color-light;
}
}
.mix-btn {
display: flex;
align-items: center;
justify-content: center;
width: 630upx;
height: 80upx;
margin: 80upx auto 30upx;
font-size: $font-lg;
color: #fff;
background-color: $base-color;
border-radius: 10upx;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>

210
mallplusui-uniapp-app/pages/order/payment/index1.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<view class="content">
<view class='cell-group margin-cell-group'>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>订单类型</view>
</view>
<view class='cell-item-ft'>
<text class="cell-ft-p" v-if="type == 1" @click="orderDetail(orderId)">商品订单</text>
<text class="cell-ft-p" v-if="type == 2" @click="toRecharge()">充值订单</text>
<text class="cell-ft-p" v-if="type == 5" >快捷下单</text>
<text class="cell-ft-p" v-if="type == 6" >付款码</text>
</view>
</view>
<view v-if="type == 1">
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>订单编号</view>
</view>
<view class='cell-item-ft'>
<text class="cell-ft-p" @click="orderDetail(orderId)">{{ orderId }}</text>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>订单金额</view>
</view>
<view class='cell-item-ft'>
<text class="cell-ft-p red-price">￥{{ orderInfo.payAmount }}</text>
</view>
</view>
</view>
<view v-else-if="type == 2">
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>充值金额</view>
</view>
<view class='cell-item-ft'>
<text class="cell-ft-p red-price">￥ {{ recharge }}</text>
</view>
</view>
</view>
</view>
<!-- #ifdef H5 -->
<payments-by-h5
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-h5>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<payments-by-wx
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-wx>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<payments-by-ali
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-ali>
<!-- #endif -->
<!-- #ifdef APP-PLUS||APP-PLUS-NVUE -->
<payments-by-app
:orderId="orderId"
:recharge="recharge"
:type="type"
:uid="userInfo.id"
></payments-by-app>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import paymentsByH5 from '@/components/payments/paymentsByH5.vue'
// #endif
// #ifdef MP-WEIXIN
import paymentsByWx from '@/components/payments/paymentsByWx.vue'
// #endif
// #ifdef MP-ALIPAY
import paymentsByAli from '@/components/payments/paymentsByAli.vue'
// #endif
// #ifdef APP-PLUS||APP-PLUS-NVUE
import paymentsByApp from '@/components/payments/paymentsByApp.vue'
// #endif
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
export default {
data () {
return {
orderId: 0,
recharge: 0,
type: 1, // 订单类型 1商品订单 2充值订单
orderInfo: {}, // 订单详情
userInfo: {}, // 用户信息
form_id:0
}
},
components: {
// #ifdef H5
paymentsByH5,
// #endif
// #ifdef MP-WEIXIN
paymentsByWx,
// #endif
// #ifdef MP-ALIPAY
paymentsByAli,
// #endif
// #ifdef APP-PLUS||APP-PLUS-NVUE
paymentsByApp,
// #endif
},
onLoad (options) {
this.orderId = options.order_id
this.recharge = Number(options.recharge)
this.type = Number(options.type)
this.form_id = Number(options.form_id)
if (this.orderId && this.type == 1) {
// 商品订单
this.getOrderInfo()
} else if (this.recharge && this.type == 2) {
// 充值订单 获取用户id
this.getUserInfo()
} else if (this.form_id && (this.type == 5 || this.type == 6)) {
// 表单订单 id传到订单上
this.orderId = ''+this.form_id;
} else {
this.$common.errorToShow('订单支付参数错误', () => {
uni.navigateBack({
delta: 1
})
})
}
},
methods: {
// 获取订单详情
async getOrderInfo () {
let params = {'id':this.orderId};
this.orderInfo = await Api.apiCall('get',Api.order.orderDetail,params);
if(this.orderInfo.pay_status == 2){
this.$common.redirectTo(
'/pages/order/payment/result?order_id=' + this.orderInfo.id
)
}
},
// 获取用户信息
getUserInfo () {
this.$api.userInfo({}, res => {
if (res.code == 200) {
this.userInfo = res.data
} else {
this.$common.errorToShow(res.msg)
}
})
},
// 跳转我的余额页面
toRecharge () {
this.$common.navigateTo('/pages/member/balance/index')
}
}
}
</script>
<style>
.margin-cell-group{
margin-bottom: 20upx;
}
.cell-hd-title{
color: #999;
}
.payment-method .cell-item-hd{
min-width: 70upx;
}
.payment-method .cell-hd-icon{
width: 70upx;
height: 70upx;
}
.payment-method .cell-item-bd{
border-left: 2upx solid #F0F0F0;
padding-left: 30upx;
}
.payment-method .cell-bd-text{
font-size: 28upx;
color: #666;
}
.payment-method .address{
font-size: 24upx;
color: #999;
}
</style>

75
mallplusui-uniapp-app/pages/order/payment/result.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<view class="content">
<text class="success-icon yticon icon-xuanzhong2"></text>
<text class="tit">支付成功</text>
<view class="result-mid red-price">
{{ paymentInfo.payAmount }}
</view>
<view class="btn-group">
<navigator url="/pages/order/order?status=0" open-type="redirect" class="mix-btn">查看订单</navigator>
<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
export default {
data() {
return {
paymentId: 0,
paymentInfo: {}, // 支付单详情
orderId: 0,
status: false
}
},
onLoad(options) {
if (options.order) {
let order = JSON.parse(options.order)
this.orderId = order.id
this.paymentInfo = order
}
},
methods: {}
};
</script>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.success-icon {
font-size: 160upx;
color: #fa436a;
margin-top: 100upx;
}
.tit {
font-size: 38upx;
color: #303133;
}
.btn-group {
padding-top: 100upx;
}
.mix-btn {
margin-top: 30upx;
display: flex;
align-items: center;
justify-content: center;
width: 600upx;
height: 80upx;
font-size: $font-lg;
color: #fff;
background-color: $base-color;
border-radius: 10upx;
&.hollow {
background: #fff;
color: #303133;
border: 1px solid #ccc;
}
}
</style>