You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 lines
3.5 KiB
Vue
194 lines
3.5 KiB
Vue
<template>
|
|
<view class="page page-box" style="overflow: hidden;">
|
|
<view class="banner_inner"></view>
|
|
|
|
<view class="head">
|
|
<u-icon name="checkmark-circle-fill" size="56" color="#fff"></u-icon>
|
|
<view class="text">支付成功</view>
|
|
<view class="price"><text class="iconPrice">￥</text>{{ `${price} 元` }}</view>
|
|
</view>
|
|
|
|
<view class="icon">
|
|
<image class="logo" :src="info.logo_url"></image>
|
|
|
|
</view>
|
|
|
|
<view class="wancehng" style="padding: 20rpx;margin-top: 20rpx;position: relative;z-index: 999;width: 100%;">
|
|
<view style="line-height: 100rpx;border-radius: 50rpx;background: #19be6b;text-align: center;color: #FFF;"
|
|
@click="toBack">
|
|
支付完成
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="goodsList">
|
|
<view class="goodsTitle">推荐商品</view>
|
|
<twoGoods :list="goodsList"></twoGoods>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import twoGoods from '../compontents/twoGoods.vue';
|
|
export default {
|
|
components: {
|
|
twoGoods
|
|
},
|
|
data() {
|
|
return {
|
|
price: "",
|
|
info: {},
|
|
goodsList: []
|
|
}
|
|
},
|
|
onLoad({
|
|
price,
|
|
mch_id
|
|
}) {
|
|
this.price = price
|
|
this.mch_id = mch_id
|
|
this.init()
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
async init() {
|
|
const res = await this.$api.inPersonToPay.storeInfo({
|
|
mch_id: this.mch_id,
|
|
})
|
|
|
|
this.info = {
|
|
...res.data.store,
|
|
...res.data.shop
|
|
}
|
|
},
|
|
|
|
async fetchData(keyword = "1") {
|
|
const res = await this.$api.goods.searchGoodsList({
|
|
keywords: keyword
|
|
})
|
|
|
|
this.goodsList = res.data.rows
|
|
console.log(res);
|
|
},
|
|
toBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
color: hsla(0, 0%, 100%, .9);
|
|
overflow: auto;
|
|
|
|
.icon {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 60rpx;
|
|
right: 0;
|
|
left: 0;
|
|
|
|
.text {
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.price {
|
|
font-weight: 600;
|
|
font-size: 60rpx;
|
|
font-family: PingFang SC, Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
|
letter-spacing: 4rpx;
|
|
|
|
.iconPrice {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner_inner {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 40vh;
|
|
top: 0;
|
|
width: 150%;
|
|
min-width: 780px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(60deg, #18b566 0%, #71d5a1 100%);
|
|
border-radius: 0 0 65% 65%;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 40vh;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
height: 180rpx;
|
|
width: 180rpx;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50rpx;
|
|
border-radius: 60rpx;
|
|
box-shadow: 0 0.3125rem 1.25rem 0px rgba(166, 199, 251, 0.12);
|
|
}
|
|
|
|
.wancehng {
|
|
position: absolute;
|
|
top: 45vh;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.goodsTitle {
|
|
|
|
position: relative;
|
|
color: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
&::after {
|
|
content: "";
|
|
height: 6px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 6px;
|
|
position: absolute;
|
|
background: linear-gradient(60deg, #ff5740 0%, rgb(252, 143, 76) 100%);
|
|
width: 100rpx;
|
|
margin: 0 auto;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.goodsList {
|
|
margin-top: calc(40vh + 100rpx);
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
</style>
|
|
<style>
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
</style> |