karlcarlo
a5c5d753b6
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
539 lines
16 KiB
Vue
539 lines
16 KiB
Vue
<template>
|
||
<view :style="colorStyle">
|
||
<view class="w-full relative z-99 bg-gradient" :style="{ 'padding-top': sysHeight + 'px' }">
|
||
<view class="w-full px-20 pl-20 h-80 flex-between-center" @tap="goIndex()">
|
||
<text class="iconfont icon-ic_leftarrow fs-40 text--w111-fff"></text>
|
||
<text class="fs-34 fw-500 text--w111-fff">订单支付</text>
|
||
<text></text>
|
||
</view>
|
||
<view class="flex-col flex-center mt-50">
|
||
<view class="flex-y-center">
|
||
<text class="iconfont icon-ic-complete1 fs-52 text--w111-fff" v-if="order_pay_info.paid || order_pay_info.pay_type == 'offline'"></text>
|
||
<view v-else class="iconfont icon-ic_close1 fs-52 text--w111-fff"></view>
|
||
<text class="fs-40 fw-500 text--w111-fff pl-16" v-if="order_pay_info.pay_type == 'offline' && !order_pay_info.paid">订单创建成功</text>
|
||
<text class="fs-40 fw-500 text--w111-fff pl-16" v-else>{{ order_pay_info.paid ? '订单支付成功' : '等待支付...' }}</text>
|
||
</view>
|
||
<view class="flex-center mt-30">
|
||
<view class="w-192 h-64 rd-40rpx flex-center fs-24 text--w111-fff white-border" @tap="goIndex">返回首页</view>
|
||
<view v-if="!order_pay_info.is_send_gift || !order_pay_info.paid" class="w-192 h-64 rd-40rpx flex-center fs-24 text--w111-fff white-border ml-48" @tap="goOrderDetails">
|
||
查看订单
|
||
</view>
|
||
<view v-else-if="order_pay_info.paid" @click="giftModalShow = true" class="w-192 h-64 rd-40rpx flex-center fs-24 text--w111-fff white-border ml-48">送给好友</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-216"></view>
|
||
</view>
|
||
<view class="relative content bg--w111-fff w-full pt-32 pl-20 pr-20 z-100">
|
||
<view
|
||
class="card bg--w111-fff rd-24rpx h-484 pt-32 pl-20 pr-20"
|
||
v-if="order_pay_info.paid && order_pay_info.pay_type != 'offline' && prize.length && loading && lotteryLoading"
|
||
>
|
||
<gridsLottery
|
||
:prizeData="prize"
|
||
@get_winingIndex="getWiningIndex"
|
||
@luck_draw_finish="luck_draw_finish"
|
||
:lotteryNum="lottery_num"
|
||
:lotteryType="1"
|
||
:datatime="datatime"
|
||
></gridsLottery>
|
||
</view>
|
||
<view class="card bg--w111-fff rd-24rpx px-32" v-if="showGift">
|
||
<view class="cell flex-between-center py-32" v-for="(item, index) in couponList" :key="index + 'n'" @click="goPage(1, '/pages/users/user_coupon/index')">
|
||
<view class="flex-y-center">
|
||
<image :src="imgHost + '/statics/images/order/prize_coupon_icon.png'" class="w-76 h-76 rd-40rpx"></image>
|
||
<view class="ml-24">
|
||
<view class="fs-28 text--w111-333 lh-38rpx">下单得{{ item.coupon_price }}元优惠券</view>
|
||
<view class="fs-22 text--w111-999 lh-30rpx mt-8" v-if="parseInt(item.use_min_price > 0)">满{{ item.use_min_price }}元可用</view>
|
||
<view class="fs-22 text--w111-999 lh-30rpx mt-8" v-else>无门槛优惠券</view>
|
||
</view>
|
||
</view>
|
||
<view class="card_btn flex-center font-color fs-22">去使用</view>
|
||
</view>
|
||
<view class="cell flex-between-center py-32" v-for="(item, index) in giftList" :key="index + 'o'">
|
||
<view class="flex-y-center">
|
||
<image :src="imgHost + '/statics/images/order/prize_gift_icon.png'" class="w-76 h-76 rd-40rpx"></image>
|
||
<view class="ml-24">
|
||
<view class="fs-28 text--w111-333 line2 w-400">{{ item.store_name }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="card_btn flex-center font-color fs-22" @tap="goOrderDetails">去使用</view>
|
||
</view>
|
||
<view class="cell flex-between-center py-32" v-if="prize_integral > 0" @click="goPage(1, '/pages/users/user_integral/index')">
|
||
<view class="flex-y-center">
|
||
<image :src="imgHost + '/statics/images/order/prize_integral_icon.png'" class="w-76 h-76 rd-40rpx"></image>
|
||
<view class="ml-24">
|
||
<view class="fs-28 text--w111-333 line2 w-400">获得{{ prize_integral }}积分</view>
|
||
<view class="fs-22 text--w111-999 lh-30rpx mt-8">下单即可抵扣</view>
|
||
</view>
|
||
</view>
|
||
<view class="card_btn flex-center font-color fs-22" @tap="goOrderDetails">去使用</view>
|
||
</view>
|
||
<view class="cell flex-between-center py-32" v-if="prize_exp > 0">
|
||
<view class="flex-y-center">
|
||
<image :src="imgHost + '/statics/images/order/prize_exp_icon.png'" class="w-76 h-76 rd-40rpx"></image>
|
||
<view class="ml-24">
|
||
<view class="fs-28 text--w111-333 line2 w-400">获得{{ prize_exp }}经验</view>
|
||
<view class="fs-22 text--w111-999 lh-30rpx mt-8">下单即可抵扣</view>
|
||
</view>
|
||
</view>
|
||
<view class="card_btn flex-center font-color fs-22" @tap="goOrderDetails">去使用</view>
|
||
</view>
|
||
</view>
|
||
<recommend :hostProduct="hostProduct" :title="recommendTitle"></recommend>
|
||
</view>
|
||
<lotteryAleart :aleartStatus="aleartStatus" :alData="alData" theme :aleartType="aleartType" @close="closeLottery"></lotteryAleart>
|
||
<view class="mask z-8000" v-if="aleartStatus || addressModel" @touchmove.stop.prevent="moveHandle"></view>
|
||
<giftModal :aleartStatus="giftModalShow" :giftData="giftData" @shareH5="shareH5" @close="giftModalShow = false"></giftModal>
|
||
<view class="mask z-101" v-if="giftModalShow"></view>
|
||
<canvas class="canvas" canvas-id="posterCanvas"></canvas>
|
||
<activityModal :pageIndex="5"></activityModal>
|
||
<home></home>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let sysHeight = uni.getWindowInfo().statusBarHeight;
|
||
// import lotteryModel from './payLottery.vue'
|
||
import gridsLottery from '../components/lottery/payLottery.vue';
|
||
import lotteryAleart from '../components/lotteryAleart/index.vue';
|
||
import recommend from '@/components/recommend';
|
||
import { getOrderDetail, orderCoupon, getOrderPrizeApi } from '@/api/order.js';
|
||
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
|
||
import giftModal from '../components/sendGiftPoster/index.vue';
|
||
import activityModal from "@/components/activityModal/index.vue";
|
||
import { getLotteryData, startLottery, receiveLottery } from '@/api/lottery.js';
|
||
import { getProductHot, postCartAdd } from '@/api/store.js';
|
||
import { toLogin } from '@/libs/login.js';
|
||
import { mapGetters } from 'vuex';
|
||
import colors from '@/mixins/color';
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
import Cache from '@/utils/cache';
|
||
import { userShare } from '@/api/user.js';
|
||
export default {
|
||
components: {
|
||
gridsLottery,
|
||
lotteryAleart,
|
||
recommend,
|
||
giftModal,
|
||
activityModal
|
||
},
|
||
mixins: [colors],
|
||
data() {
|
||
return {
|
||
imgHost: HTTP_REQUEST_URL,
|
||
sysHeight: sysHeight,
|
||
loading: false,
|
||
lotteryLoading: false,
|
||
orderLottery: false,
|
||
orderId: '',
|
||
order_pay_info: {
|
||
paid: 1,
|
||
_status: {}
|
||
},
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false, //是否隐藏授权
|
||
status: 0,
|
||
msg: '',
|
||
couponsHidden: true,
|
||
couponList: [],
|
||
giftList: [],
|
||
options: {},
|
||
prize: [],
|
||
datatime: 0,
|
||
totalPrice: 0,
|
||
type: '',
|
||
lottery_draw_param: {
|
||
startIndex: 3, //开始抽奖位置，从0开始
|
||
totalCount: 3, //一共要转的圈数
|
||
winingIndex: 1, //中奖的位置，从0开始
|
||
speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
|
||
},
|
||
aleartType: 0,
|
||
aleartStatus: false,
|
||
addressModel: false,
|
||
lottery_num: 0,
|
||
alData: {},
|
||
hostProduct: [],
|
||
hotScroll: false,
|
||
hotPage: 1,
|
||
hotLimit: 10,
|
||
prize_integral: 0,
|
||
prize_exp: 0,
|
||
giftModalShow: false,
|
||
giftData: {
|
||
image: '',
|
||
title: '',
|
||
message: '',
|
||
id: 0,
|
||
avatar: '',
|
||
nickname: '',
|
||
code: ''
|
||
},
|
||
userInfo: Cache.get('USER_INFO') || {},
|
||
mpGiftImg: HTTP_REQUEST_URL + '/statics/images/gift_share.jpg',
|
||
recommendTitle: ""
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin', 'cartNum']),
|
||
showGift() {
|
||
if (!this.couponList.length && !this.giftList.length && this.prize_integral == 0 && this.prize_exp == 0) {
|
||
return false;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
isLogin: {
|
||
handler: function (newV, oldV) {
|
||
if (newV) {
|
||
//#ifndef MP
|
||
this.getOrderPayInfo();
|
||
//#endif
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
onLoad: function (options) {
|
||
this.options = options;
|
||
if (!options.order_id)
|
||
return this.$util.Tips(
|
||
{
|
||
title: '缺少参数无法查看订单支付状态'
|
||
},
|
||
{
|
||
tab: 3,
|
||
url: 1
|
||
}
|
||
);
|
||
this.orderId = options.order_id;
|
||
this.status = options.status || 0;
|
||
this.msg = options.msg || '';
|
||
this.type = this.options.type;
|
||
this.totalPrice = this.options.totalPrice;
|
||
this.getLotteryData(this.type);
|
||
this.getHostProduct();
|
||
},
|
||
onShow() {
|
||
uni.setStorageSync('form_type_cart', 1);
|
||
if (this.isLogin) {
|
||
this.getOrderPayInfo();
|
||
} else {
|
||
toLogin();
|
||
}
|
||
},
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
// #ifdef MP
|
||
onShareAppMessage: function () {
|
||
let that = this;
|
||
userShare();
|
||
return {
|
||
title: that.giftData.message || '',
|
||
imageUrl: that.mpGiftImg || '',
|
||
path: '/pages/goods/receive_gift/index?id=' + this.giftData.id + '&spid=' + this.$store.state.app.uid
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
let that = this;
|
||
userShare();
|
||
return {
|
||
title: that.giftData.message,
|
||
query: {
|
||
id: that.id,
|
||
spid: that.uid || 0
|
||
},
|
||
imageUrl: that.mpGiftImg
|
||
};
|
||
},
|
||
// #endif
|
||
methods: {
|
||
// #ifdef H5
|
||
setOpenShare() {
|
||
let that = this;
|
||
if (that.$wechat.isWeixin()) {
|
||
let configAppMessage = {
|
||
desc: this.giftData.message,
|
||
title: this.giftData.title,
|
||
link: window.location.protocol + '//' + window.location.host + '/pages/goods/receive_gift/index?id=' + this.giftData.id + '&spid=' + that.$store.state.app.uid,
|
||
imgUrl: that.mpGiftImg
|
||
};
|
||
that.$wechat
|
||
.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configAppMessage)
|
||
.then((res) => {})
|
||
.catch((res) => {
|
||
if (res.is_ready) {
|
||
res.wx.updateAppMessageShareData(configAppMessage);
|
||
res.wx.updateTimelineShareData(configAppMessage);
|
||
res.wx.onMenuShareAppMessage(configAppMessage);
|
||
res.wx.onMenuShareTimeline(configAppMessage);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// #endif
|
||
moveHandle() {
|
||
return false;
|
||
},
|
||
// 授权关闭
|
||
authColse: function (e) {
|
||
this.isShowAuth = e;
|
||
},
|
||
openTap() {
|
||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||
},
|
||
onLoadFun: function () {
|
||
this.getOrderPayInfo();
|
||
this.isShowAuth = false;
|
||
},
|
||
/**
|
||
*
|
||
* 支付完成查询支付状态
|
||
*
|
||
*/
|
||
getOrderPayInfo: function () {
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '正在加载中'
|
||
});
|
||
getOrderDetail(that.orderId)
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
that.$set(that, 'order_pay_info', res.data);
|
||
uni.setNavigationBarTitle({
|
||
title: res.data.paid ? '支付成功' : '未支付'
|
||
});
|
||
uni.$emit('newCartNum', res.data.cartInfo);
|
||
if (parseInt(uni.getStorageSync('news')) === 0) {
|
||
let colNum = this.cartNum - res.data.total_num;
|
||
this.$store.commit('indexData/setCartNum', colNum + '');
|
||
uni.removeStorageSync('news');
|
||
}
|
||
this.giftData = {
|
||
image: res.data.cartInfo[0].productInfo.image,
|
||
title: res.data.cartInfo[0].productInfo.store_name,
|
||
message: res.data.send_gift_mark,
|
||
id: res.data.id,
|
||
avatar: res.data.avatar,
|
||
nickname: res.data.nickname,
|
||
code: res.data.send_gift_code
|
||
};
|
||
// #ifdef H5
|
||
if (this.order_pay_info.is_send_gift) this.setOpenShare();
|
||
// #endif
|
||
if(!this.order_pay_info.is_send_gift){
|
||
uni.hideShareMenu()
|
||
}
|
||
this.loading = true;
|
||
setTimeout(function () {
|
||
that.getOrderPrize();
|
||
}, 1000);
|
||
})
|
||
.catch((err) => {
|
||
this.loading = true;
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
getOrderPrize() {
|
||
getOrderPrizeApi(this.orderId).then((res) => {
|
||
this.couponList = res.data.coupons;
|
||
this.giftList = res.data.gift;
|
||
this.prize_integral = res.data.integral;
|
||
this.prize_exp = res.data.exp;
|
||
});
|
||
},
|
||
/**
|
||
* 去首页关闭当前所有页面
|
||
*/
|
||
goIndex: function (e) {
|
||
let identity = this.$store.state.app.identity;
|
||
let styleType = this.$store.state.app.system_channel_style;
|
||
if(identity == 1){
|
||
uni.redirectTo({
|
||
url: this.styleType == 1 ? "/pages/merchant/index/index" : "/pages/merchant/index/goods"
|
||
})
|
||
}else{
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
|
||
},
|
||
/**
|
||
*
|
||
* 去订单详情页面
|
||
*/
|
||
goOrderDetails: function (e) {
|
||
let that = this;
|
||
// #ifdef MP
|
||
uni.showLoading({
|
||
title: '正在加载'
|
||
});
|
||
openOrderSubscribe()
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
uni.navigateTo({
|
||
url: '/pages/goods/order_details/index?order_id=' + that.orderId
|
||
});
|
||
})
|
||
.catch(() => {
|
||
uni.hideLoading();
|
||
});
|
||
// #endif
|
||
// #ifndef MP
|
||
uni.navigateTo({
|
||
url: '/pages/goods/order_details/index?order_id=' + that.orderId
|
||
});
|
||
// #endif
|
||
},
|
||
getLotteryData(type) {
|
||
getLotteryData(type)
|
||
.then((res) => {
|
||
this.factor_num = res.data.lottery.factor_num;
|
||
this.id = res.data.lottery.id;
|
||
this.prize = res.data.lottery.prize;
|
||
if (this.prize.length) {
|
||
this.prize.push({ name: 1 });
|
||
}
|
||
this.lottery_num = res.data.lottery_num;
|
||
this.lotteryLoading = true;
|
||
this.datatime = parseInt(res.data.cache_time);
|
||
if (res.data.lottery.type == 6) {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/lottery/grids/record'
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.lotteryLoading = false;
|
||
});
|
||
},
|
||
getWiningIndex(callback) {
|
||
this.aleartType = 0;
|
||
startLottery({
|
||
id: this.id
|
||
})
|
||
.then((res) => {
|
||
this.prize.forEach((item, index) => {
|
||
if (res.data.id === item.id) {
|
||
this.alData = res.data;
|
||
this.lottery_draw_param.winingIndex = index;
|
||
callback(this.lottery_draw_param);
|
||
}
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
// 抽奖完成
|
||
luck_draw_finish(param) {
|
||
this.aleartType = 2;
|
||
this.aleartStatus = true;
|
||
},
|
||
closeLottery(status) {
|
||
this.aleartStatus = false;
|
||
if (this.alData.type === 6) {
|
||
postCartAdd({
|
||
cartNum: 1,
|
||
new: 1,
|
||
is_new: 1,
|
||
productId: this.alData.product_id,
|
||
uniqueId: this.alData.unique,
|
||
luckRecordId: this.alData.lottery_record_id
|
||
})
|
||
.then((res) => {
|
||
uni.navigateTo({
|
||
url: `/pages/goods/order_confirm/index?new=1&luckRecordId=${this.alData.lottery_record_id}&cartId=${res.data.cartId}`
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
this.$util.Tips({
|
||
title: `${err},请联系客服`
|
||
});
|
||
});
|
||
}
|
||
this.getLotteryData(this.type);
|
||
},
|
||
getHostProduct: function () {
|
||
let that = this;
|
||
if (that.hotScroll) return;
|
||
getProductHot({
|
||
page:that.hotPage,
|
||
limit:that.hotLimit,
|
||
type:2
|
||
}).then((res) => {
|
||
that.hotPage++;
|
||
that.hotScroll = res.data.list.length < that.hotLimit;
|
||
that.hostProduct = that.hostProduct.concat(res.data.list);
|
||
that.recommendTitle = res.data.title ? res.data.title : '猜你喜欢';
|
||
});
|
||
},
|
||
goPage(type, url) {
|
||
if (type == 1) {
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
} else if (type == 2) {
|
||
uni.switchTab({
|
||
url
|
||
});
|
||
} else if (type == 3) {
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
uni.$emit('scroll');
|
||
},
|
||
onReachBottom() {
|
||
this.getHostProduct();
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.white-border {
|
||
border: 1rpx solid #fff;
|
||
}
|
||
.h-484 {
|
||
height: 484rpx;
|
||
}
|
||
.content {
|
||
background: #f5f5f5;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
left: 0;
|
||
top: -164rpx;
|
||
min-height: 500rpx;
|
||
}
|
||
.card ~ .card {
|
||
margin-top: 20rpx;
|
||
}
|
||
.cell ~ .cell {
|
||
border-top: 1px solid #eee;
|
||
}
|
||
.card_btn {
|
||
width: 114rpx;
|
||
height: 52rpx;
|
||
border-radius: 26rpx;
|
||
border: 1px solid #e93323;
|
||
}
|
||
.z-8000 {
|
||
z-index: 8000;
|
||
}
|
||
.z-1000 {
|
||
z-index: 1000;
|
||
}
|
||
.canvas {
|
||
width: 750rpx;
|
||
height: 1108rpx;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
bottom: 40000rpx;
|
||
right: 30000rpx;
|
||
}
|
||
</style>
|