修改无限赏支付，修改福利页面
This commit is contained in:
zpc
parent
a1397f0aa1
commit
7369ea2ce2
136
components/banner/README.md
Normal file
136
components/banner/README.md
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
# Banner 组件使用说明
|
||||
|
||||
这是一个通用的轮播图(Banner)组件，可以在应用的任何页面轻松集成。
|
||||
|
||||
## 特点
|
||||
|
||||
- 支持配置不同类型的banner（通过type_id参数）
|
||||
- 自动从后端接口获取数据
|
||||
- 支持可选的指示器显示
|
||||
- 处理点击事件跳转到对应页面
|
||||
- 自动轮播图片
|
||||
- **支持通过插槽在轮播图上方添加自定义内容**
|
||||
- **支持自定义轮播图高度**
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 引入组件
|
||||
|
||||
项目已经在 `pages.json` 的 `easycom` 中配置了自动引入规则，因此您无需手动导入组件。
|
||||
|
||||
### 2. 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<!-- 基本用法 -->
|
||||
<banner :type-id="1"></banner>
|
||||
|
||||
<!-- 显示指示器 -->
|
||||
<banner :type-id="2" :show-indicator="true"></banner>
|
||||
|
||||
<!-- 使用插槽添加自定义内容 -->
|
||||
<banner :type-id="3">
|
||||
<view class="custom-content">
|
||||
<text class="title">热门活动</text>
|
||||
</view>
|
||||
</banner>
|
||||
|
||||
<!-- 自定义高度 -->
|
||||
<banner :type-id="4" :height="400"></banner>
|
||||
|
||||
<!-- 组合使用多个属性 -->
|
||||
<banner :type-id="5" :height="500" :show-indicator="true">
|
||||
<view class="custom-title">限时活动</view>
|
||||
</banner>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 3. 参数说明
|
||||
|
||||
| 参数名 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| typeId | Number/String | 1 | banner类型ID，对应接口的type_id参数 |
|
||||
| showIndicator | Boolean | false | 是否显示轮播图指示器 |
|
||||
| height | Number/String | 300 | 轮播图高度，单位rpx |
|
||||
|
||||
### 4. 插槽
|
||||
|
||||
组件提供了一个默认插槽，可以用来在轮播图上方添加自定义内容。插槽内容会被定位在轮播图的顶部，并且会保持在最上层。
|
||||
|
||||
示例：
|
||||
```vue
|
||||
<banner :type-id="1">
|
||||
<!-- 这里的内容会显示在轮播图上方 -->
|
||||
<view class="banner-title">热门推荐</view>
|
||||
</banner>
|
||||
```
|
||||
|
||||
### 5. 接口数据
|
||||
|
||||
组件通过调用 `api/getAdvert` 接口获取数据，传入 `type_id` 参数。
|
||||
|
||||
接口返回数据格式示例：
|
||||
```json
|
||||
{
|
||||
"status": 1,
|
||||
"msg": "请求成功",
|
||||
"data": [
|
||||
{
|
||||
"imgurl": "https://example.com/image1.png",
|
||||
"ttype": 1,
|
||||
"coupon_id": 123,
|
||||
"goods_id": 0
|
||||
},
|
||||
{
|
||||
"imgurl": "https://example.com/image2.png",
|
||||
"ttype": 2,
|
||||
"coupon_id": 0,
|
||||
"goods_id": 456
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 6. 点击跳转逻辑
|
||||
|
||||
根据返回数据中的 `ttype` 和 `goods_id` 属性，组件会自动处理点击跳转：
|
||||
|
||||
- ttype=1: 跳转到"领券中心"
|
||||
- ttype=2: 跳转到"一番赏"详情页
|
||||
- ttype=3: 跳转到"无限赏"详情页
|
||||
- ttype=4: 跳转到"连击赏"页面
|
||||
|
||||
## 示例
|
||||
|
||||
### 首页banner
|
||||
```vue
|
||||
<banner :type-id="1"></banner>
|
||||
```
|
||||
|
||||
### 商城页banner带标题和自定义高度
|
||||
```vue
|
||||
<banner :type-id="3" :show-indicator="true" :height="400">
|
||||
<view class="mall-title">精选商品</view>
|
||||
</banner>
|
||||
```
|
||||
|
||||
### 活动页banner
|
||||
```vue
|
||||
<banner :type-id="5" :height="350"></banner>
|
||||
```
|
||||
176
components/banner/banner.vue
Normal file
176
components/banner/banner.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<view class="banner-container">
|
||||
<!-- 添加一个默认插槽，用于在轮播图上方添加自定义内容 -->
|
||||
<view class="banner-slot-container" v-if="$slots.default">
|
||||
<slot></slot>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper-box" :style="{ height: height + 'px' }" :autoplay="true" :indicator-dots="false" :circular="true" :interval="3000"
|
||||
@change="swChange">
|
||||
<swiper-item v-for="(v, i) in advert" :key="i" @click="navTo(v)">
|
||||
<image class="yh_bg" :src="v.imgurl"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 指示器 (可选) -->
|
||||
<view class="sw-dot relative" v-if="showIndicator">
|
||||
<view class="sw-dot-item" v-for="(item, i) in advert" :key="i" :class="{act: swCur == i}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'banner',
|
||||
props: {
|
||||
// banner类型ID
|
||||
typeId: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
// 是否显示指示器
|
||||
showIndicator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 轮播图高度
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 465
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
advert: [], // 轮播图数据
|
||||
swCur: 0, // 当前轮播索引
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getAdvertData();
|
||||
},
|
||||
methods: {
|
||||
// 获取轮播图数据
|
||||
getAdvertData() {
|
||||
this.req({
|
||||
url: 'getAdvert',
|
||||
data: {
|
||||
type_id: this.typeId
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.status == 1) {
|
||||
this.advert = res.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 轮播切换事件
|
||||
swChange(e) {
|
||||
this.swCur = e.detail.current;
|
||||
},
|
||||
|
||||
// 点击轮播图跳转
|
||||
navTo(item) {
|
||||
/* 领券中心 */
|
||||
if (item.ttype == 1) {
|
||||
this.$c.to({
|
||||
url: '/package/index/coupon-center',
|
||||
query: {
|
||||
coupon_id: item.coupon_id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (item.goods_id > 0) {
|
||||
if (item.ttype == 2) {
|
||||
/* 一番赏 */
|
||||
this.$c.to({
|
||||
url: '/pages/shouye/detail',
|
||||
query: {
|
||||
goods_id: item.goods_id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 无限赏 */
|
||||
if (item.ttype == 3) {
|
||||
this.$c.to({
|
||||
url: '/pages/shouye/detail_wuxian',
|
||||
query: {
|
||||
goods_id: item.goods_id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 连击赏 */
|
||||
if (item.ttype == 4) {
|
||||
this.$c.to({
|
||||
url: '/package/index/lian-ji',
|
||||
query: {
|
||||
goods_id: item.goods_id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.banner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-slot-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 允许插槽内的元素可以被点击 */
|
||||
.banner-slot-container > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 100%;
|
||||
/* 默认高度已通过内联样式方式设置 */
|
||||
}
|
||||
|
||||
.yh_bg {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 指示器样式 */
|
||||
.sw-dot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0 5rpx;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.act {
|
||||
width: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
"^collect-btn$": "@/components/collect-btn/collect-btn.vue",
|
||||
"^detail-toolbar$": "@/components/detail-toolbar/detail-toolbar.vue",
|
||||
"^detail-prize-log$": "@/components/detail-prize-log/detail-prize-log.vue",
|
||||
"^detail-preview-popup$": "@/components/detail-preview-popup/detail-preview-popup.vue"
|
||||
"^detail-preview-popup$": "@/components/detail-preview-popup/detail-preview-popup.vue",
|
||||
"^banner$": "@/components/banner/banner.vue"
|
||||
},
|
||||
"pages": [{
|
||||
"path": "pages/shouye/index",
|
||||
|
|
|
|||
|
|
@ -2,18 +2,17 @@
|
|||
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
|
||||
</view>
|
||||
|
||||
<view class="title1">福利</view>
|
||||
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
||||
<uni-nav-bar left-icon="left" color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true"
|
||||
:border="false" @clickLeft="$c.back">
|
||||
<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
|
||||
积分赏
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
<view class="list relative">
|
||||
<view class="list-item" v-for="(item, i) in datas" :key="i" @click="items(item)">
|
||||
<view class="pic center">
|
||||
<image class="pic-img" :src="item.imgurl" lazy-load></image>
|
||||
<image :src="$img1('common/new1.png')" class="pic-new" mode="widthFix" v-if="item.new_is==1">
|
||||
<image :src="$img1('common/new1.png')" class="pic-new" mode="widthFix" v-if="item.new_is == 1">
|
||||
</image>
|
||||
</view>
|
||||
<view class="title hang1">
|
||||
|
|
@ -33,434 +32,423 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="show" type="center">
|
||||
<view class="pop common_bg" :style="{'background-image': `url(${$img('/static/img/yf_rule_pop_bg.png')})`}">
|
||||
<view class="pop_title">购买说明</view>
|
||||
<view class="pop_con">
|
||||
<scroll-view scroll-y="true" style="height: 600rpx">
|
||||
<view v-html="guize"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<image @click="$refs.show.close()" class="close" :src="$img('/static/icon/close.png')"></image>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- <tab-bar :index="1"></tab-bar> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
flga: false,
|
||||
datas: [],
|
||||
BarHeight: '',
|
||||
guize: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
items(item) {
|
||||
this.$c.to({
|
||||
url: '/pages/shouye/detail',
|
||||
query: {
|
||||
goods_id: item.id,
|
||||
type_text: '积分赏'
|
||||
}
|
||||
})
|
||||
},
|
||||
getlist(index) {
|
||||
this.current = index
|
||||
if (index == 1) {
|
||||
uni.navigateTo({
|
||||
url: 'UnlimitedOrder'
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// this.current = 0
|
||||
// const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
// if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||
// this.$mp.page.getTabBar().setData({
|
||||
// selected: 1
|
||||
// });
|
||||
// }
|
||||
},
|
||||
onLoad() {
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'goods',
|
||||
data: {
|
||||
type: '5',
|
||||
page: 1
|
||||
},
|
||||
success(res) {
|
||||
that.datas = res.data.data
|
||||
}
|
||||
})
|
||||
// that.req({
|
||||
// url: 'danye',
|
||||
// data: {
|
||||
// type: 4
|
||||
// },
|
||||
// success: function (res) {
|
||||
// that.guize = res.data
|
||||
// }
|
||||
// })
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.BarHeight = res.statusBarHeight
|
||||
}
|
||||
})
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
flga: false,
|
||||
datas: [],
|
||||
BarHeight: '',
|
||||
guize: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
items(item) {
|
||||
this.$c.to({
|
||||
url: '/pages/shouye/detail',
|
||||
query: {
|
||||
goods_id: item.id,
|
||||
type_text: '积分赏'
|
||||
}
|
||||
})
|
||||
},
|
||||
getlist(index) {
|
||||
this.current = index
|
||||
if (index == 1) {
|
||||
uni.navigateTo({
|
||||
url: 'UnlimitedOrder'
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// this.current = 0
|
||||
// const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
// if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||
// this.$mp.page.getTabBar().setData({
|
||||
// selected: 1
|
||||
// });
|
||||
// }
|
||||
},
|
||||
onLoad() {
|
||||
let that = this
|
||||
that.req({
|
||||
url: 'goods',
|
||||
data: {
|
||||
type: '5',
|
||||
page: 1
|
||||
},
|
||||
success(res) {
|
||||
that.datas = res.data.data
|
||||
}
|
||||
})
|
||||
// that.req({
|
||||
// url: 'danye',
|
||||
// data: {
|
||||
// type: 4
|
||||
// },
|
||||
// success: function (res) {
|
||||
// that.guize = res.data
|
||||
// }
|
||||
// })
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
that.BarHeight = res.statusBarHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
>view {
|
||||
font-weight: 400;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
.navLeft {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
height: 44px;
|
||||
z-index: 100;
|
||||
|
||||
.activeImg {
|
||||
position: absolute;
|
||||
width: 32rpx !important;
|
||||
height: 16rpx !important;
|
||||
bottom: -20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pop {
|
||||
width: 607rpx;
|
||||
// height: 904rpx;
|
||||
padding-top: 70rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.pop_title {
|
||||
font-size: 36rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pop_con {
|
||||
padding: 30rpx 40rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 100%);
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
width: 750rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.header-left-title {
|
||||
width: 104rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
width: 117rpx;
|
||||
height: 46rpx;
|
||||
background: url('https://baoku.languowangluo.cn/newindex/new.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 18rpx;
|
||||
}
|
||||
|
||||
.gb_title {
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
right: 18rpx;
|
||||
background: url('https://baoku.languowangluo.cn/newindex/infinite_goods_shang_bao.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qiehuan_left {
|
||||
display: flex;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
/* border-top: 2rpx solid #333333; */
|
||||
margin-left: 30rpx;
|
||||
/* text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7); */
|
||||
/* font-family: 'zcq'; */
|
||||
}
|
||||
|
||||
.wzs {
|
||||
font-size: 32rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
>view {
|
||||
font-weight: 400;
|
||||
color: #9c9c9c;
|
||||
font-size: 50rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.xzs {
|
||||
font-size: 32rpx;
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.activeImg {
|
||||
position: absolute;
|
||||
width: 32rpx !important;
|
||||
height: 16rpx !important;
|
||||
bottom: -20rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pop {
|
||||
width: 607rpx;
|
||||
// height: 904rpx;
|
||||
padding-top: 70rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.pop_title {
|
||||
font-size: 36rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10rpx #ba39ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qiehuan_left>view {
|
||||
margin-right: 70rpx;
|
||||
position: relative;
|
||||
}
|
||||
.pop_con {
|
||||
padding: 30rpx 40rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.dibuzhe {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
// background: #f00;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* padding-top:5rpx; */
|
||||
position: absolute;
|
||||
width: calc(100% - 16rpx - 16rpx);
|
||||
left: 16rpx;
|
||||
bottom: 16rpx;
|
||||
height: 74rpx;
|
||||
align-items: center;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 400rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 22rpx;
|
||||
/* font-family: 'zcq';
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 100%);
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
width: 750rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.header-left-title {
|
||||
width: 104rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
width: 117rpx;
|
||||
height: 46rpx;
|
||||
background: url('https://baoku.languowangluo.cn/newindex/new.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 18rpx;
|
||||
}
|
||||
|
||||
.gb_title {
|
||||
width: 118rpx;
|
||||
height: 46rpx;
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
right: 18rpx;
|
||||
background: url('https://baoku.languowangluo.cn/newindex/infinite_goods_shang_bao.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qiehuan_left {
|
||||
display: flex;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
/* border-top: 2rpx solid #333333; */
|
||||
margin-left: 30rpx;
|
||||
/* text-shadow: 0px 0px 12rpx rgba(150, 255, 254, 0.7); */
|
||||
/* font-family: 'zcq'; */
|
||||
}
|
||||
|
||||
.wzs {
|
||||
font-size: 32rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
|
||||
.xzs {
|
||||
font-size: 32rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10rpx #ba39ff;
|
||||
}
|
||||
|
||||
.qiehuan_left>view {
|
||||
margin-right: 70rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dibuzhe {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
// background: #f00;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* padding-top:5rpx; */
|
||||
position: absolute;
|
||||
width: calc(100% - 16rpx - 16rpx);
|
||||
left: 16rpx;
|
||||
bottom: 16rpx;
|
||||
height: 74rpx;
|
||||
align-items: center;
|
||||
border-radius: 0 0 20rpx 20rpx;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 400rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 22rpx;
|
||||
/* font-family: 'zcq';
|
||||
text-shadow: 0px 0px 14rpx rgba(237, 87, 255, 0.7); */
|
||||
}
|
||||
}
|
||||
|
||||
.gb {
|
||||
color: #ffffff;
|
||||
/* font-family: 'zcq';
|
||||
.gb {
|
||||
color: #ffffff;
|
||||
/* font-family: 'zcq';
|
||||
text-shadow: 0px 0px 14rpx red; */
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10rpx #22aeff;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.right {
|
||||
font-size: 28rpx;
|
||||
font-family: zihun152hao-jijiachaojihei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10rpx #22aeff;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 714rpx;
|
||||
height: 504rpx;
|
||||
padding: 16rpx;
|
||||
margin: 30rpx auto 0;
|
||||
position: relative;
|
||||
.items {
|
||||
width: 714rpx;
|
||||
height: 504rpx;
|
||||
padding: 16rpx;
|
||||
margin: 30rpx auto 0;
|
||||
position: relative;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/deep/ .u-tab-item {
|
||||
color: #222222 !important;
|
||||
}
|
||||
/deep/ .u-tab-item {
|
||||
color: #222222 !important;
|
||||
}
|
||||
|
||||
.baibei {
|
||||
width: 720rpx;
|
||||
height: 78rpx;
|
||||
/* background: #FFFFFF; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* font-family: 'zcq'; */
|
||||
}
|
||||
.baibei {
|
||||
width: 720rpx;
|
||||
height: 78rpx;
|
||||
/* background: #FFFFFF; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* font-family: 'zcq'; */
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* padding-top: 1rpx; */
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* padding-top: 1rpx; */
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.item_image {
|
||||
width: 100%;
|
||||
height: 472rpx;
|
||||
// margin: 17rpx auto 0;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item_image {
|
||||
width: 100%;
|
||||
height: 472rpx;
|
||||
// margin: 17rpx auto 0;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item_image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.item_image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-hd {
|
||||
width: 100%;
|
||||
height: 430rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.page-hd {
|
||||
width: 100%;
|
||||
height: 430rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 20rpx;
|
||||
padding: 1rpx 30rpx 30rpx;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
z-index: 10;
|
||||
.list {
|
||||
margin-top: 20rpx;
|
||||
padding: 1rpx 30rpx 30rpx;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
z-index: 10;
|
||||
|
||||
.list-item {
|
||||
width: 330rpx;
|
||||
height: 487rpx;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
// background: url($imgurl+'common/goodsBg.png') no-repeat 0 0 / 100% 100%;
|
||||
margin-top: 30rpx;
|
||||
.list-item {
|
||||
width: 330rpx;
|
||||
height: 487rpx;
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 16rpx;
|
||||
// background: url($imgurl+'common/goodsBg.png') no-repeat 0 0 / 100% 100%;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.pic {
|
||||
.pic {
|
||||
width: 100%;
|
||||
height: 332rpx;
|
||||
background-color: #E4E4E4;
|
||||
position: relative;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
|
||||
.pic-img {
|
||||
// width: 290rpx;
|
||||
// height: 290rpx;
|
||||
width: 100%;
|
||||
height: 332rpx;
|
||||
background-color: #E4E4E4;
|
||||
position: relative;
|
||||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pic-img {
|
||||
// width: 290rpx;
|
||||
// height: 290rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pic-type {
|
||||
padding: 0 21rpx 0 32rpx;
|
||||
height: 44rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
|
||||
.pic-type {
|
||||
padding: 0 21rpx 0 32rpx;
|
||||
height: 44rpx;
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
|
||||
>text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
text-shadow: 2rpx 2rpx #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-new {
|
||||
width: 80rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -10rpx;
|
||||
left: 10rpx;
|
||||
>text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #111111;
|
||||
text-shadow: 2rpx 2rpx #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 24rpx 26rpx 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
.pic-new {
|
||||
width: 80rpx;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 24rpx 26rpx 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hang1 {}
|
||||
|
||||
.hot-num {
|
||||
padding: 10rpx 20rpx 0;
|
||||
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding: 60rpx 20rpx 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hang1 {}
|
||||
|
||||
.hot-num {
|
||||
padding: 10rpx 20rpx 0;
|
||||
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding: 60rpx 20rpx 10rpx;
|
||||
.num-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
font-weight: 500;
|
||||
.num {
|
||||
font-size: 18rpx;
|
||||
color: #333333;
|
||||
|
||||
text {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
font-weight: 400;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.num-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
font-size: 18rpx;
|
||||
font-weight: 400;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 20rpx;
|
||||
height: 17.56rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.icon {}
|
||||
.box {
|
||||
width: 20rpx;
|
||||
height: 17.56rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.icon {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,13 +2,17 @@
|
|||
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="title1">福利</view>
|
||||
<image :src="$img1('index/jifen.png')" style="width: 100%; margin-top: 60rpx;" mode=""></image>
|
||||
|
||||
<uni-nav-bar color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true"
|
||||
:border="false" >
|
||||
<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
|
||||
福利
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
<banner :type-id="6" :height="150"></banner>
|
||||
<view class="grid-container" style="width: 100%; padding: 0 32rpx; margin-top: 40rpx;">
|
||||
<view class="grid-item" v-for="(item,index) in list" @click="toPage(item.id)"
|
||||
style=" height: 184rpx; background-color: #D8D8D8;">
|
||||
<text>{{item.name}}</text>
|
||||
<view class="grid-item" v-for="(item) in list" :key="item.id" @click="toPage(item)" style="height: 184rpx;">
|
||||
<image v-if="item.image" :src="item.image" mode="aspectFill" class="grid-item-bg"></image>
|
||||
<text v-if="!item.image">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -16,118 +20,114 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
id: 1,
|
||||
name: "每日签到"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "福利屋"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "VIP福利"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "口令红包"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "消费补贴"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "周卡月卡"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "积分赏池"
|
||||
},
|
||||
]
|
||||
}
|
||||
import RequestManager from '@/common/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取福利屋菜单列表
|
||||
getWelfareList() {
|
||||
RequestManager.post('/welfare_house_list')
|
||||
.then(res => {
|
||||
if (res.status === 1 && res.data) {
|
||||
this.list = res.data;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '获取福利列表失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取福利列表失败:', err);
|
||||
uni.showToast({
|
||||
title: '获取福利列表失败',
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
//跳转页面
|
||||
toPage(id) {
|
||||
|
||||
switch (id) {
|
||||
case 1:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/daily_check_in'
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/bonus_house'
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/VIP_perks'
|
||||
})
|
||||
break;
|
||||
case 6:
|
||||
this.$c.to({
|
||||
url: '/pages/infinite/benefit'
|
||||
})
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.current = 0
|
||||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||
this.$mp.page.getTabBar().setData({
|
||||
selected: 1
|
||||
//跳转页面
|
||||
toPage(item) {
|
||||
if (item.url) {
|
||||
this.$c.to({
|
||||
url: item.url
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad() {}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.current = 0
|
||||
const curPages = getCurrentPages()[0]; // 获取当前页面实例
|
||||
if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
|
||||
this.$mp.page.getTabBar().setData({
|
||||
selected: 1
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getWelfareList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* padding-top: 1rpx; */
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.content {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
/* padding-top: 1rpx; */
|
||||
padding-bottom: 100px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 100;
|
||||
}
|
||||
.title1 {
|
||||
width: 100%;
|
||||
top: 108rpx;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 34rpx;
|
||||
justify-content: center;
|
||||
color: black;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 324rpx);
|
||||
/* 三列，每列宽度相等 */
|
||||
gap: 40rpx 42rpx;
|
||||
/* 网格之间的间隔 */
|
||||
}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 324rpx);
|
||||
/* 三列，每列宽度相等 */
|
||||
gap: 40rpx 42rpx;
|
||||
/* 网格之间的间隔 */
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #f0f0f0;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.grid-item {
|
||||
position: relative;
|
||||
background-color: #D8D8D8;
|
||||
text-align: center;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-item-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.grid-item text {
|
||||
z-index: 2;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<uni-nav-bar title="我的盒柜" color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true"
|
||||
:border="false" @clickLeft="$c.back"></uni-nav-bar>
|
||||
|
||||
<uni-nav-bar color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true"
|
||||
:border="false" @clickLeft="$c.back">
|
||||
<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
|
||||
我的盒柜
|
||||
</view>
|
||||
</uni-nav-bar>
|
||||
|
||||
<view class="tab">
|
||||
<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
|
||||
:class="tabCur == i?'act':'unact'" @click="tabChange(i)">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
-->
|
||||
<template>
|
||||
<view class="content">
|
||||
<view>
|
||||
|
||||
</view>
|
||||
<view class="navLeft align-center" :style="{ top: $sys().statusBarHeight + 'px' }" @tap="$c.back(1)">
|
||||
<uni-icons type="left" color="#000000"></uni-icons>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -421,155 +421,11 @@
|
|||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<uni-popup ref="buyPop" type="bottom">
|
||||
<view v-if="orderData" class="buy-pop relative">
|
||||
<view class="buy-pop-hd align-center justify-between">
|
||||
<view style="width: 24rpx; height: 24rpx;">
|
||||
</view>
|
||||
<view style="font-size: 28rpx; color: #333333;">确认订单</view>
|
||||
<view class="close icon" @click="close('buyPop')">
|
||||
<image :src="$img('/static/img/close2.png')" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="buy-card">
|
||||
<view class="buy-info">
|
||||
<view class="pic flex">
|
||||
<image class="img100" style="border-radius: 10rpx;" :src="orderData.goods.imgurl_detail"
|
||||
lazy-load></image>
|
||||
</view>
|
||||
<view class="info-r">
|
||||
<view class="title hang1">
|
||||
{{ orderData.goods.title }}
|
||||
</view>
|
||||
<view class="type">类型:明信片</view>
|
||||
<template v-if="
|
||||
orderData.goods.is_shou_zhe == 1 &&
|
||||
orderData.goods.shou_zhe_price * 1 > 0
|
||||
">
|
||||
<view class="price-num">
|
||||
<view class="price">
|
||||
¥
|
||||
<text>{{ orderData.goods.shou_zhe_price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="num">×{{ 1 }}</view>
|
||||
</view>
|
||||
<view v-if="orderData.goods.prize_num > 1" class="price-num">
|
||||
<view class="price">
|
||||
¥
|
||||
<text>{{ orderData.goods.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="num">
|
||||
×{{ orderData.goods.prize_num * 1 - 1 }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="price-num">
|
||||
<view class="price">
|
||||
¥
|
||||
<text>{{ orderData.goods.price }}</text>
|
||||
</view>
|
||||
<view class="num">×{{ orderData.goods.prize_num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- <view class="card-row" @click="$c.to({ url: '/pages/user/vip' })">
|
||||
<view class="title align-center">
|
||||
<text class="ml20">{{orderData.zhe ? `会员折扣 (${orderData.zhe}折)` : '暂无会员抵扣'}}</text>
|
||||
</view>
|
||||
<view class="row-r">
|
||||
详情
|
||||
<view class="icon">
|
||||
<image :src="$img1('common/right1.png')" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
<view class="card-row" @click="toCoupon">
|
||||
<view class="title align-center">
|
||||
<text class="ml20">优惠券</text>
|
||||
</view>
|
||||
<view class="row-r">
|
||||
{{
|
||||
couponData && orderData.coupon_price > 0
|
||||
? `-${couponData.price}`
|
||||
: '未选择'
|
||||
}}
|
||||
<view class="icon">
|
||||
<image :src="$img1('common/right1.png')" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- <view class="pay-title ziti">选择支付方式</view> -->
|
||||
<view class="pay-type" @click="changePay('useIntegral')">
|
||||
<view class="title flex align-center">
|
||||
使用{{$config.getAppSetting('currency1_name')}}抵扣
|
||||
{{ orderData.use_integral_money }}
|
||||
<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
|
||||
(剩余:{{ orderData.integral }}个)</text>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
|
||||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pay-type" @click="changePay('useMoney')">
|
||||
<view class="title flex align-center">
|
||||
使用{{$config.getAppSetting('balance_name')}}抵扣¥{{ orderData.use_money }}
|
||||
<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
|
||||
(剩余:{{ orderData.money }})</text>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
|
||||
|
||||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rule">
|
||||
<scroll-view class="rule-inner" scroll-y>
|
||||
<view v-html="sendRuleData"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="agree" @click="isAgree = !isAgree">
|
||||
<view class="icon">
|
||||
<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
|
||||
|
||||
<image v-else :src="$img1('common/check.png')" lazy-load></image>
|
||||
</view>
|
||||
|
||||
我已满18岁,阅读并同意
|
||||
|
||||
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
|
||||
《用户协议》
|
||||
</text>
|
||||
|
||||
<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
|
||||
《隐私政策》
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="pay-btn" @click="$c.noDouble1(confirmSubmit, [1, buyNum])">
|
||||
<text>确认支付</text>
|
||||
<text>
|
||||
{{
|
||||
pageData.goods.type == 5
|
||||
? ` ${orderData.price}积分`
|
||||
: ` ¥${orderData.price}`
|
||||
}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<order-confirm-popup ref="buyPop" v-if="orderData" :order-data="orderData" :page-data="pageData"
|
||||
:use-money="useMoney" :use-money2="useMoney2" :use-integral="useIntegral" :coupon-data="couponData"
|
||||
:is-agree="isAgree" :send-rule-data="sendRuleData" :buy-num="buyNum" @close="close('buyPop')"
|
||||
@change-pay="changePay" @toggle-agree="isAgree = !isAgree" @to-coupon="toCoupon"
|
||||
@confirm="$c.noDouble1(confirmSubmit, [1, buyNum])"></order-confirm-popup>
|
||||
|
||||
<view v-if="aniShow" class="ani-pop">
|
||||
<image :src="aniSrc" lazy-load></image>
|
||||
|
|
@ -583,7 +439,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
OrderConfirmPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userCoupon: null,
|
||||
|
|
@ -591,6 +452,7 @@
|
|||
buyNum: 0,
|
||||
useMoney: true,
|
||||
useIntegral: true,
|
||||
useMoney2: true,
|
||||
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
||||
downOption: {
|
||||
auto: false
|
||||
|
|
@ -854,20 +716,39 @@
|
|||
}, 500)
|
||||
},
|
||||
|
||||
changePay(e) {
|
||||
this[e] = !this[e]
|
||||
|
||||
this.confirmSubmit([0, this.buyNum])
|
||||
changePay(type) {
|
||||
if (type === 'useMoney') {
|
||||
this.useMoney = !this.useMoney;
|
||||
} else if (type === 'useIntegral') {
|
||||
this.useIntegral = !this.useIntegral;
|
||||
} else if (type === 'useMoney2') {
|
||||
this.useMoney2 = !this.useMoney2;
|
||||
}
|
||||
this.confirmSubmit([0, this.buyNum]);
|
||||
},
|
||||
|
||||
confirmSubmit([type, num, fromNotice = false]) {
|
||||
confirmSubmit([type, num, flag]) {
|
||||
this.choujiangloading = true;
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
|
||||
let data = {
|
||||
goods_id: this.optData.goods_id,
|
||||
goods_num: this.pageData.goods.num,
|
||||
num: num,
|
||||
use_money: this.useMoney ? 1 : 0,
|
||||
use_integral: this.useIntegral ? 1 : 0,
|
||||
use_money2: this.useMoney2 ? 1 : 0,
|
||||
prize_id: this.optData.prize_id,
|
||||
};
|
||||
|
||||
let url = 'infinite_ordermoney'
|
||||
console.log(type);
|
||||
if (type == 1) {
|
||||
url = 'infinite_orderbuy'
|
||||
|
||||
if (this.$refs.buyNotice.getIsShow() && !fromNotice) {
|
||||
if (this.$refs.buyNotice.getIsShow() && !flag) {
|
||||
this.$refs.buyNotice.getRule(6)
|
||||
return
|
||||
}
|
||||
|
|
@ -882,7 +763,9 @@
|
|||
prize_num: this.buyNum,
|
||||
use_money_is: this.useMoney ? 1 : 2,
|
||||
use_integral_is: this.useIntegral ? 1 : 2,
|
||||
coupon_id: (this.couponData && this.couponData.id) || ''
|
||||
use_money2_is: this.useMoney2 ? 1 : 2,
|
||||
coupon_id: (this.couponData && this.couponData.id) || '',
|
||||
|
||||
// ad_id: uni.getStorageSync('_ad_id')
|
||||
},
|
||||
success: async res => {
|
||||
|
|
@ -895,7 +778,13 @@
|
|||
}
|
||||
}
|
||||
this.orderData = res.data
|
||||
this.open('buyPop')
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.buyPop) {
|
||||
this.$refs.buyPop.open()
|
||||
} else {
|
||||
console.error('buyPop组件未找到')
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type == 1) {
|
||||
this.close('buyPop')
|
||||
|
|
@ -1047,6 +936,11 @@
|
|||
this.$set(item, 'open', false)
|
||||
})
|
||||
this.pageData = res.data
|
||||
let goodType = this.$config.getGoodTypeFind(this.pageData.goods.type);
|
||||
this.useMoney = goodType.pay_balance == 1 ? true : false;
|
||||
this.useIntegral = goodType.pay_currency == 1 ? true : false;
|
||||
this.useMoney2 = goodType.pay_currency2 == 1 ? true : false;
|
||||
|
||||
console.log(this.pageData);
|
||||
}
|
||||
}
|
||||
|
|
@ -1054,7 +948,13 @@
|
|||
},
|
||||
|
||||
close(e) {
|
||||
this.$refs[e].close()
|
||||
if (e === 'buyPop') {
|
||||
if (this.$refs.buyPop) {
|
||||
this.$refs.buyPop.close()
|
||||
}
|
||||
} else {
|
||||
this.$refs[e].close()
|
||||
}
|
||||
if (e == "resPop") {
|
||||
if (this.prizeData['user_coupon'] != null) {
|
||||
this.$refs["couponPop"].open(this.prizeData['user_coupon']);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user