Skip to content

M
mayi-mp-shop
Commit eeeef0f4 by 李嘉林
Options

电子卡券支付成功原生页

parent 414d762f
Showing with 491 additions and 45 deletions
config/dev.env.js
......@@ -18,6 +18,7 @@ module.exports = merge(prodEnv, {//zjgyl
// BASE_URL:"'http://172.16.1.18:3000'",
BASE_URL:"'https://test-m-shop.mayi888.cn'",
ADMIN_URL:"'https://test-ant.mayi888.cn'",
GUIDE_URL:"'https://guide-m.mayi888.cn'",
// BASE_URL:"'http://192.168.137.1:3004'",
OLSHOP_URL:'"https://test-m-shop.mayi888.cn/innerApi/shopApiService"',
......
config/prod.env.js
......@@ -3,6 +3,7 @@ module.exports = {
SHOP_MIXID:"'ant'",
NODE_ENV: '"production"',
BASE_URL:"'https://shop.mayi888.com'",
GUIDE_URL:"'https://m-guide.mayi888.com'",
ADMIN_URL:"'https://admin.mayi888.com'",
OLSHOP_URL:'"https://shop.mayi888.com/innerApi/shopApiService"',
......
src/api/order.js
......@@ -12,5 +12,9 @@ export default {
// 查询订单详情
orderDetail(data) {
return requestPOST(`${process.env.OLSHOP_URL}/order/detail?orderSn=${data.orderSn}`)
},
},
//获取电子卡券订单卡券
getElectronicCardRedeemCode(data){
return requestGET(`${process.env.OLSHOP_URL}/order/getElectronicCardRedeemCode?orderSn=${data}`)
}
}
src/components/paySuccess/PayElectronCard.vue 0 → 100644
<template>
<!-- 购买电子卡券支付完成 -->
<div class="PayElectronCard">
<div class="top">
<div class="bgImg">
<image
src="https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/X87KGrY8GP.png"
alt=""
></image>
</div>
<div class="info flex">
<div class="infoTop flex">
<van-icon name="checked" />
<p class="success">购买成功</p>
</div>
<p class="infoBottom">向商家出示</p>
</div>
</div>
<div class="goodsInfo" v-for="(item,index) in orderDetail.orderItems" :key="index">
<div class="shopName">{{item.terminalProductGoodsOrgName}}</div>
<div class="info flex">
<div class="goodsImg">
<image
:src="item.specificationPictureUrl"
alt=""
></image>
</div>
<div class="right">
<p class="goodsName line-clamp2">{{item.productName}}</p>
<p class="goodsSpa">{{item.specifications | spaToStr}}</p>
<div class="bottom flex">
<p class="goodsPrice">￥ <span>{{item.dealPrice | keepTwoNum}}</span></p>
<p class="goodsNum">x <span>{{item.qty | keepIntNum}}</span></p>
</div>
</div>
</div>
</div>
<div class="useCard">
<div class="useTop">
<p class="available">
可使用 (<span>{{ available }}</span
>张)
</p>
<p class="endTime">
有效期至<span>{{ firstCard.effectiveDateEndStr }}</span>
</p>
</div>
<div class="code">
<div class="topText">向商家出示二维码或券号即可消费</div>
<!-- <div class="PayElectronCardQrCode" id="PayElectronCardQrCode"></div> -->
<div class="qrCode flex">
<canvas
class="canvas-code"
canvas-id="PayElectronCardQrCode"
:style="{ background: '#fff', width: '308rpx', height: '308rpx' }"
/>
</div>
</div>
<div class="cardInfo">
<div class="topText">券码信息</div>
<div class="borderLine"></div>
<div class="cardList">
<div class="cardItem flex" v-for="(item, index) in cardList" :key="index">
<div class="cardItemL flex">
<div class="dot"></div>
<div class="cardCode">{{item.redeemCodeCardNumber}}</div>
</div>
<p class="cardItemR">{{item.writeoffStatus | getWriteoffStatus}}</p>
</div>
</div>
</div>
</div>
<div style="height: 40px"></div>
<div class="toDetail flex">
<div class="btn flex" @click="toDetail">查看详情</div>
<div class="btn flex" @click="toIndex">回首页</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import order from "@/api/order"
import QRCode from "@/utils/weapp-qrcode.js";
export default {
name: "PayElectronCard",
props:{
orderDetail:{
type: Object,
default:{},
}
},
data() {
return {
cardList:[],
firstCard:{},
available:0,//可用
routeQuery: {},
qrCodeImg: "",
};
},
filters:{
// 过滤规格
spaToStr(val){
let newVal=JSON.parse(val);
if(Object.keys(newVal).length>0){
let val=[];
for(let i in newVal){
val.push(newVal[i]);
}
return val?val.join(","):"";
}
return ""
},
getWriteoffStatus(val){
let list=['未购买','未核销','已核销','退款中','已退款'];
return list[val];
}
},
components: {},
computed: {},
created() {},
mounted() {},
onLoad(options){
console.log(options,'--PayElectronCard--onLoad')
this.routeQuery = options;
this.init();
},
methods: {
init() {
this.getList();
},
getList(){
order.getElectronicCardRedeemCode(this.routeQuery.orderSn).then(res1 => {
let res = res1.data;
if(res.code==200 && res.data && res.data.length>0){
this.cardList=res.data;
this.cardList.forEach((item,index)=>{
item.effectiveDateEndStr=item.effectiveDateEnd.replace(/-/g,'/').split(" ")[0];
// 核销状态（0：未购买；1：未核销；2：已核销；3：退款中；4：已退款）
if(item.writeoffStatus==1){
this.available++;
}
})
this.firstCard=this.cardList[0];
this.qrcode();
}
})
},
toDetail(){
let url = `/pages/index/main?from=home&backpath=${encodeURIComponent(`/order/orderDetail?orderSn=${this.routeQuery.orderSn}&isReplace=true`)}}`
wx.redirectTo({
url,
});
},
toIndex(){
wx.reLaunch({
url: "/pages/home/main",
});
},
qrcode() {
let _this = this;
const systemInfo = wx.getSystemInfoSync();
const width = (154 * systemInfo.windowWidth) / 375;
const height = width;
new QRCode("PayElectronCardQrCode", {
width,
height,
text: `${process.env.GUIDE_URL}/login?codeNumber=${this.firstCard.redeemCodeCardNumber}&mixid=${this.$store.state.mixid}`, // 二维码地址
colorDark: "#000",
colorLight: "#fff",
correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
callback: (res) => {
console.log(res.path, "---res.path");
_this.qrCodeImg = res.path;
// 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
},
});
},
},
};
</script>
<style lang="scss" scoped>
.block {
width: calc(100vw - 20px);
margin: 10px;
padding: 12px;
background: #fff;
border-radius: 6px;
}
.cardDot {
content: "";
position: absolute;
top: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: #f5f5f5;
}
.PayElectronCard {
width: 100vw;
height: calc(100vh - 49px);
overflow-y: auto;
background: #f3f3f3;
position: fixed;
top: 0;
.top {
position: relative;
height: 98px;
color: #fff;
padding-top: 40px;
overflow: hidden;
.bgImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
image {
width: 100%;
}
}
.info {
position: relative;
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
.infoTop {
align-items: center;
font-size: 16px;
.success {
font-weight: bold;
margin-left: 4px;
}
}
.infoBottom {
margin-top: 10px;
}
}
}
.goodsInfo {
box-sizing: border-box;
@extend .block;
.shopName {
font-size: 14px;
color: #333;
font-weight: bold;
}
.info {
margin-top: 10px;
.goodsImg {
width: 90px;
height: 90px;
background: #f5f5f5;
overflow: hidden;
border-radius: 4px;
flex-shrink: 0;
image {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.right {
flex: 1;
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
.goodsName {
font-size: 14px;
color: #333;
}
.goodsSpa {
font-size: 12px;
color: #999;
}
.bottom {
align-items: center;
justify-content: space-between;
margin-top: 4px;
.goodsPrice {
font-size: 14px;
color: var(--main-color);
}
.goodsNum {
font-size: 12px;
color: #999;
}
}
}
}
}
.useCard {
@extend .block;
padding: 0;
.useTop {
padding: 12px;
background: #fafafa;
.available {
font-size: 14px;
color: #333;
}
.endTime {
font-size: 12px;
margin-top: 4px;
color: #999;
}
}
.code {
padding: 12px;
flex-direction: column;
align-items: center;
.topText {
text-align: center;
color: #999;
}
.qrCode{
margin: 28px auto 0;
width: 308rpx;
height: 308rpx;
border: 1px solid #F3F3F3;
padding: 16px;
justify-content: center;
align-items: center;
}
}
}
.cardInfo {
position: relative;
&::before {
@extend .cardDot;
left: -7px;
}
&::after {
@extend .cardDot;
right: -7px;
}
padding: 12px;
.topText {
font-size: 14px;
color: #333;
padding-bottom: 6px;
}
.borderLine {
width: calc(100vw - 70px);
margin: 0 auto;
border-bottom: 1px dashed #979797;
}
.cardList {
.cardItem {
padding: 8px 0;
justify-content: space-between;
align-items: center;
.cardItemL {
align-items: center;
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #333;
}
.cardCode {
margin-left: 4px;
font-size: 12px;
color: #333;
}
}
.cardItemR {
font-size: 12px;
color: #333;
}
}
}
}
.toDetail {
position: fixed;
bottom: 0;
background: #f5f5f5;
width: 100%;
height: 50px;
justify-content: space-around;
align-items: center;
.btn {
width: 46%;
height: 36px;
border-radius: 36px;
background: var(--main-color);
color: #fff;
font-size: 14px;
justify-content: center;
align-items: center;
}
}
}
</style>
src/pages/paySuccess/index.vue
<template>
<!-- 支付成功页 -->
<div class="paySuccess" v-show="showPage">
<div class="paySuccess" v-if="showPage" :style="{'--main-color':themeColor['--main-color'],'--minor-color':themeColor['--minor-color']}">
<ThemeDataPlant :pageCode="11"></ThemeDataPlant>
<div style="margin-top: 60px;"></div>
<div v-for="(item, index) in pageData" :key="index">
<!-- 其他组件 -->
<div
v-if="item.componentCode == 'text-text' && item.componentInfo.visible == 1"
>
<text-text :datas="item"></text-text>
<PayElectronCard v-if="orderDetail.orderType==15" :orderDetail="orderDetail"></PayElectronCard>
<div v-else>
<div style="margin-top: 60px;"></div>
<div v-for="(item, index) in pageData" :key="index">
<!-- 其他组件 -->
<div
v-if="item.componentCode == 'text-text' && item.componentInfo.visible == 1"
>
<text-text :datas="item"></text-text>
</div>
<div
v-if="item.componentCode == 'rich-text' && item.componentInfo.visible == 1"
>
<rich-text :datas="item"></rich-text>
</div>
<div
v-if="item.componentCode == 'photo-gallery' &&item.componentInfo.visible == 1"
>
<photo-gallery :datas="item"></photo-gallery>
</div>
<div
v-if="item.componentCode == 'interval' && item.componentInfo.visible == 1"
>
<interval :datas="item"></interval>
</div>
<div
v-if="item.componentCode == 'partition' && item.componentInfo.visible == 1"
>
<partition :datas="item"></partition>
</div>
<div
v-if="item.componentCode == 'notice' && item.componentInfo.visible == 1"
>
<notice :datas="item"></notice>
</div>
<pay-success-info
v-if="item.componentCode=='pay-success-info' && item.componentInfo.visible==1"
:render="true"
:datas="item"
:giftsKey="giftsKey"
:routeQuery="routeQuery"
:orderDetail="orderDetail"
:totalMoney="totalMoney"
/>
</div>
<div
v-if="item.componentCode == 'rich-text' && item.componentInfo.visible == 1"
>
<rich-text :datas="item"></rich-text>
</div>
<div
v-if="item.componentCode == 'photo-gallery' &&item.componentInfo.visible == 1"
>
<photo-gallery :datas="item"></photo-gallery>
</div>
<div
v-if="item.componentCode == 'interval' && item.componentInfo.visible == 1"
>
<interval :datas="item"></interval>
</div>
<div
v-if="item.componentCode == 'partition' && item.componentInfo.visible == 1"
>
<partition :datas="item"></partition>
</div>
<div
v-if="item.componentCode == 'notice' && item.componentInfo.visible == 1"
>
<notice :datas="item"></notice>
</div>
<pay-success-info
v-if="item.componentCode=='pay-success-info' && item.componentInfo.visible==1"
:render="true"
:datas="item"
:giftsKey="giftsKey"
:routeQuery="routeQuery"
:orderDetail="orderDetail"
:totalMoney="totalMoney"
/>
</div>
<!-- 分销员弹框入口 -->
<van-popup
......@@ -76,9 +79,10 @@ import order from "@/api/order";
import spokesman from "@/api/spokesman";
import { getMiniProgram, query_isEntry } from "@/utils/mayi_fenxiao";
import { serialize } from "@/utils/index";
import { checkTabbarPage, checkShowConditionIds } from "@/utils/mayi";
import { checkTabbarPage, checkShowConditionIds, themeColor } from "@/utils/mayi";
import ThemeDataPlant from "../../components/ThemeDataPlant";
import paySuccessInfo from "../../components/paySuccess/paySuccessInfo";
import PayElectronCard from "../../components/paySuccess/PayElectronCard";
import text from "@/components/content/text";
import richText from "../../components/basicTool/rich-text";
import interval from "@/components/basicTool/interval/index.vue";
......@@ -112,6 +116,12 @@ export default {
pageInfo: {},
pageData: {},
showPage: false,
systemInfo : {},
tabbarHeight : 0,
themeColor:{
'--main-color':"",
'--minor-color':"",
},
};
},
components: {
......@@ -121,6 +131,7 @@ export default {
interval,
partition,
paySuccessInfo,
PayElectronCard
},
computed: {},
onLoad(options) {
......@@ -142,6 +153,19 @@ export default {
that.init(params);
};
}
this.systemInfo = wx.getSystemInfoSync()
console.log(this.systemInfo,'-----------systemInfo')
let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo,'menuButtonInfo')
this.tabbarHeight = (menuButtonInfo.top - this.systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + this.systemInfo.statusBarHeight
console.log(this.tabbarHeight,'-----------tabbarHeight')
if(themeColor['--main-color']!='#ffffff'){
this.themeColor = themeColor
}else {
this.mpApp.themeColorCallBack=(res)=>{
this.themeColor = res
}
}
},
onShow() {
console.log("--paySuccess-onShow");
......@@ -161,6 +185,7 @@ export default {
this.title = "拼团详情"
}else {
this.title = "支付成功"
this.showPage = true;
}
this.splitStatus=res.data.splitStatus;
this.orderId = res.data.orderId;
......@@ -169,7 +194,6 @@ export default {
this.goodsId =
res.data.noShipmentOrderItems[0].terminalProductGoodsId;
}
this.showPage = true;
//查询是否是分销员
getMiniProgram().then(res1 => {
......@@ -443,6 +467,25 @@ export default {
<style lang="scss" scoped>
.paySuccess {
position: relative;
width: 100vw;
height: 100vh;
overflow-y: auto;
.tabbar{
position: sticky;
top: 0;
z-index: 9999;
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
padding-left: 12px;
.tab-back{
/deep/.van-icon-arrow-left{
font-size: 22px;
}
}
}
}
.spokemanEntry {
/deep/.van-popup{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment