OtherProject
/
Unipay-H5
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加详情接口

This commit is contained in:
zhangds 2024-05-31 13:48:10 +08:00
parent 7362cb9d18
commit fb88961c02
5 changed files with 143 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
detail-style.css
View File

@ -60,7 +60,6 @@
.goods-info-box > img { .goods-info-box > img {
width: 0.64rem; width: 0.64rem;
height: 0.64rem; height: 0.64rem;
outline: 1px solid red;
} }
.goods-info-box .name { .goods-info-box .name {

99
detail.html
View File

@ -25,26 +25,27 @@
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144999"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/axios.js?v=1367936144999"></script>
<script src="./dof-api.js"></script> <script src="./dof-api.js"></script>
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/vue.global.js"></script> <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/vue.global.js"></script>
<link rel="stylesheet" href="https://gw.alipayobjects.com/as/g/antui/antui/10.1.10/rem/widget/toast.css">
<link rel="stylesheet" href="./detail-style.css"> <link rel="stylesheet" href="./detail-style.css">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="header"> <div class="header" v-if="state.showPage">
<img src="https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/detail-bg.png" <img src="https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/detail-bg.png"
alt=""> alt="">
<div class="detail-box"> <div class="detail-box">
<p class="order-status">充值成功</p> <p class="order-status">{{ orderState(state.order.state) }}</p>
<div class="goods-info"> <div class="goods-info">
<p class="goods-title">商品信息</p> <p class="goods-title">商品信息</p>
<div class="goods-info-box"> <div class="goods-info-box">
<img src="" alt=""> <img :src="state.product.icon" alt="">
<div style="padding-left: 0.09rem;"> <div style="padding-left: 0.09rem;">
<p class="name">爱奇艺黄金VIP会员月卡</p> <p class="name">{{ sliceStr(state.order.prize_name)[0] }}</p>
<p class="type">VIP会员 1个月</p> <p class="type">{{ sliceStr(state.order.prize_name)[1] }}</p>
</div> </div>
<p class="num">x1</p> <p class="num">x1</p>
</div> </div>
@ -56,33 +57,109 @@
<div class="order-list"> <div class="order-list">
<span>订单编号</span> <span>订单编号</span>
<span>20249990000999909</span> <span>{{ state.order.order_no }}</span>
</div> </div>
<div class="order-list"> <div class="order-list">
<span>充值账号</span> <span>充值账号</span>
<span>13556666999</span> <span>{{ state.order.mobile }}</span>
</div> </div>
<div class="order-list"> <div class="order-list">
<span>充值时间</span> <span>充值时间</span>
<span>2024-05-29 09:37</span> <span>{{ state.order.create_time }}</span>
</div> </div>
<div class="order-list"> <div class="order-list">
<span>充值状态</span> <span>充值状态</span>
<span>充值成功</span> <span>{{ orderState(state.order.state) }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="am-toast text" v-show="state.showToast">
<div class="am-toast-text">
{{ state.toastText }}
</div>
</div>
</div> </div>
</body> </body>
<script> <script>
const { createApp, ref } = Vue const { createApp, reactive, onMounted } = Vue
createApp({ createApp({
setup() { } setup() {
const state = reactive({
showToast: false,
toastText: "",
product: {},
order: {},
showPage: false
})
// 状态
const orderState = (status) => {
switch (status) {
case 1:
return "兑换中";
case 2:
return "已兑换"
case 3:
return "兑换失败"
case 4:
return "充值异常"
default:
return ""
}
}
const sliceStr = (str) => {
if (str) {
return str.split("|")
}
return []
}
// toast
const openToast = (msg) => {
if (state.showToast) return;
state.toastText = msg;
state.showToast = true;
setTimeout(() => {
state.showToast = false;
}, 1500);
};
// 获取订单详情
const getOrderDetail = () => {
try {
req.axiosGet("/front/order/list").then(res => {
if (res.code === 200) {
state.product = res.data.data[0].product;
state.order = res.data.data[0];
state.showPage = true;
} else {
openToast(res.message);
}
})
} catch (err) {
}
}
onMounted(() => {
getOrderDetail();
})
return {
orderState,
state,
sliceStr
}
}
}).mount('#app') }).mount('#app')
</script> </script>

4
index-style.css
View File

@ -204,3 +204,7 @@
.ok-btn { .ok-btn {
background: linear-gradient(180deg, #88def0 0%, #69b5d8 100%); background: linear-gradient(180deg, #88def0 0%, #69b5d8 100%);
} }
.grayscale-image {
filter: grayscale(100%);
}

55
index.html
View File

@ -40,16 +40,17 @@
<h2 class="goods-title">兑换商品列表</h2> <h2 class="goods-title">兑换商品列表</h2>
<div class="goods-main"> <div class="goods-main">
<div class="goods-info" v-for="item in state.goodsList" :key="item.id"> <div class="goods-info" v-for="item in state.goodsList" :key="item.id">
<img :src="item.icon" alt=""> <img :src="item.icon" alt=""
:class="state.isExchange !== -1 && state.isExchange !== item.id ? 'grayscale-image' : ''">
<div class="goods-info-text"> <div class="goods-info-text">
<p class="goods-name">{{ sliceStr(item.name)[0] }}</p> <p class="goods-name">{{ sliceStr(item.name)[0] }}</p>
<p class="goods-type">{{ sliceStr(item.name)[1] }}</p> <p class="goods-type">{{ sliceStr(item.name)[1] }}</p>
</div> </div>
<div class="goods-checked" :style="`border-color: ${selectColor(item.name)};`" <div class="goods-checked"
@click="selectGoods(item.id)"> v-show="state.isExchange !== -1 && state.isExchange !== item.id ? false : true"
:style="`border-color: ${selectColor(item.name)};`" @click="selectGoods(item.id)">
<svg v-show="state.isChecked === item.id" xmlns="http://www.w3.org/2000/svg" <svg v-show="state.isChecked === item.id" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="11" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="11"
height="8" viewBox="0 0 11 8"> height="8" viewBox="0 0 11 8">
@ -65,8 +66,8 @@
</div> </div>
<div class="goods-btn"> <div class="goods-btn" @click="exchangeBtn()">
立即兑换 {{ state.isExchange === -1 ? '立即兑换' : '查询详情' }}
</div> </div>
</div> </div>
@ -120,7 +121,9 @@
showToast: false, showToast: false,
toastText: "", toastText: "",
goodsList: [], goodsList: [],
isChecked: -1 isChecked: -1,
isExchange: -1,
userPhone: ""
}) })
// toast // toast
@ -143,6 +146,7 @@
// 选中颜色 // 选中颜色
const selectGoods = (id) => { const selectGoods = (id) => {
if (state.isExchange !== -1) return
state.isChecked = id; state.isChecked = id;
} }
@ -196,11 +200,9 @@
// 获取用户信息 // 获取用户信息
const getUserInfo = () => { const getUserInfo = () => {
try { try {
req.axiosGet("/front/getAccountInfo", { req.axiosGet("/front/getAccountInfo").then(res => {
token: state.token
}).then(res => {
if (res.code === 200) { if (res.code === 200) {
state.showPage = true; state.userPhone = res.data.phone;
} else { } else {
openToast(res.message); openToast(res.message);
} }
@ -220,6 +222,7 @@
let el = res.data.prizes.find(item => item.is_receive === 1); let el = res.data.prizes.find(item => item.is_receive === 1);
if (el) { if (el) {
state.isChecked = el.id; state.isChecked = el.id;
state.isExchange = el.id;
} }
} else { } else {
openToast(res.message); openToast(res.message);
@ -230,6 +233,31 @@
} }
} }
// 兑换
const exchangeBtn = () => {
// 判断是否被选中
if (state.isExchange !== -1) {
console.log("去详情")
window.location.href = "./detail.html";
} else {
if (state.isChecked !== -1) {
state.showPop = true;
return
req.axiosPost("/front/order/create", { prize_id: state.isChecked }).then(res => {
if (res.code === 200) {
} else {
openToast(res.message);
}
})
} else {
openToast("请选择兑换商品");
}
}
}
onMounted(() => { onMounted(() => {
const url = new URL(window.location.href); const url = new URL(window.location.href);
const searchParams = new URLSearchParams(url.search); const searchParams = new URLSearchParams(url.search);
@ -240,15 +268,16 @@
state.showPage = true; state.showPage = true;
getGoodsList(); getGoodsList();
return
getUserInfo(); getUserInfo();
return
} else { } else {
openToast("未登录"); openToast("未登录");
} }
}) })
return { return {
exchangeBtn,
selectGoods,
selectColor, selectColor,
sliceStr, sliceStr,
state state

9
readme.md
View File

@ -4,3 +4,12 @@ https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/im
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/ele-box-icon.png 饿了么 https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/ele-box-icon.png 饿了么
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/aqy-box-icon.png 爱奇艺 https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/aqy-box-icon.png 爱奇艺
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/wyy-box-icon.png 网易云 https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/img/wyy-box-icon.png 网易云
logo
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/logo/aiqiyi.png 爱奇艺
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/logo/eleme.png 饿了么
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/logo/keep.png keep
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/logo/qju.png 青橘
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/logo/txsp.png 腾讯视频
https://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/department-of-finance/logo/wyy.png 网易云