342 lines
7.6 KiB
Vue
342 lines
7.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="header-wrap">
|
||
<view class="search-wrap">
|
||
<view class="input-wrap">
|
||
<view class="icon left">
|
||
<u-icon name="search" size="26"></u-icon>
|
||
</view>
|
||
<input v-model="querForm.searchValue" class="ipt left" type="text" placeholder="搜索" />
|
||
</view>
|
||
<view class="input-wrap" @click="show = true">
|
||
<view class="icon right">
|
||
<u-icon name="arrow-right" size="16"></u-icon>
|
||
</view>
|
||
<input v-model="querForm.shopId" class="ipt right" type="text" placeholder="请选择" disabled />
|
||
</view>
|
||
</view>
|
||
<view class="status-wrap">
|
||
<view
|
||
class="item"
|
||
:class="{ active: querForm.statusActiveIndex == index }"
|
||
v-for="(item, index) in statusList"
|
||
:key="item.value"
|
||
@click="querForm.statusActiveIndex = index"
|
||
>
|
||
<text class="t">{{ item.label }}</text>
|
||
</view>
|
||
<view class="icon-wrap" :style="{ width: `${100 / statusList.length}%`, left: `${(100 / statusList.length) * querForm.statusActiveIndex}%` }">
|
||
<image
|
||
class="active-icon"
|
||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAYAAAB4MH11AAACKUlEQVR4AaRTS2sTURT+MpkxUzNtRpuYpBsrqbgQH6BYRHGllloQN+5cuNeV6MKfoj9BwYUgIsXHRqE+SluliFLbBqmENJNMMpMm87qecw1NglJse+HMPeee833nce8oIgpFq7wsGt/fCb9eFrtdfmNd1L+9Jc4Vog6E4jcqqM0/R+3zNOwv09jtshdfSx7mDJwKqAMfIvAAEaFVWkLgWjvOEbVdtNa+Epf4wxmFUNTkfqiDGUkqogDu8icKiKS9nQ9jnR8fqM5AwuJJE/G9JhRF05E8dAqIKeDlrsyiWVxg9f+Fum+uzsFZmtnEGIVxKHsGIFn1bAF6ZlQ6I28D9uIrmYSrkodbfETgw6GubZo9Yzk0kR4Fc7IuE8QUFebJKSTSB/kM4UYd1scnKL18QInm4Vk/6W6qiNoOwpZDuoX2elFWXHrzELW5Z+RzJVbPHca+09doIKq0ZQLW+C44iWbm2ZQSNMqozj5F5f1jWCSVGd4fwerstYUXCOplGcsfxponJqHS7Nlm2UyAWAza0AFkzt1A6uhFqEYaoHsR9BLCpg2vukZVr5IU4dV+yU7oRikkTrHDMI9PIHPhJrhQ9Kxugs6hkkhi8Mh5DI9flyCep6ImOt7uxnF6dgypYxMy1hg7S0/yH3FdSL+mpbIw6CVwVSNX7yM/eQfZS7eQu3wb+St3MTJ1D2nq1iicgZbK9YN7rL866PH1qfGBIWj0v/Do4rrR59vK+A0AAP//GfTndQAAAAZJREFUAwCu+SjIaSGpLwAAAABJRU5ErkJggg=="
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-wrap">
|
||
<view class="item" v-for="item in list.data" :key="item.id">
|
||
<view class="top">
|
||
<view class="icon"></view>
|
||
<view class="info">
|
||
<view class="view name">
|
||
<text class="t">{{ item.title }}</text>
|
||
</view>
|
||
<view class="view time">
|
||
<text class="t">有效期至：{{ item.startTime }}-{{ item.endTime }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<text class="t">去使用</text>
|
||
</view>
|
||
</view>
|
||
<view class="btm">
|
||
<view class="left">
|
||
<text class="t">{{ item.remark }}</text>
|
||
</view>
|
||
<view class="right">
|
||
<text class="t">查看详情</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore :status="list.status"></u-loadmore>
|
||
<u-popup :show="show" round="20" closeable @close="show = false">
|
||
<view class="shoplist-popup">
|
||
<view class="title">
|
||
<text class="t">店铺列表</text>
|
||
</view>
|
||
<scroll-view class="popup-list" direction="vertical">
|
||
<view class="item">
|
||
<text class="t">我是店铺1111</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="t">我是店铺2222</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="t">我是店铺3333</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="t">我是店铺4444</text>
|
||
</view>
|
||
<u-loadmore status="nomore"></u-loadmore>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { onLoad, onReady, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
||
import { APIcouponfindByUserId, APIfindCoupon } from '@/common/api/member.js';
|
||
|
||
const show = ref(false);
|
||
|
||
const querForm = ref({
|
||
searchValue: '',
|
||
shopId: '',
|
||
statusActiveIndex: 0
|
||
});
|
||
|
||
// 状态
|
||
const statusList = ref([
|
||
{
|
||
value: 1,
|
||
label: '未使用',
|
||
bg: '#333333',
|
||
color: '#ffffff'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '已使用',
|
||
bg: '#F8F8F8',
|
||
color: '#999999'
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '已失效',
|
||
bg: '#F8F8F8',
|
||
color: '#999999'
|
||
}
|
||
]);
|
||
|
||
const list = reactive({
|
||
page: 1,
|
||
size: 10,
|
||
status: 'nomore',
|
||
data: [
|
||
{
|
||
id: 1,
|
||
type: 2,
|
||
fullAmount: 200,
|
||
discountAmount: 15,
|
||
title: '超值满减券',
|
||
startTime: '2002.1.22',
|
||
endTime: '2022.1.22',
|
||
remark: '1、可适用门店：全部门店2、可适用商品：部分商品3、可使用类型：堂食4、可用时间段：全时段可用5、限量规则：每人限领3张，每日可最多使用3张6、同享规则：与限时折扣同享、与会员价同享7、其它说明：这里是后台配置内容'
|
||
}
|
||
]
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #f7f7f7;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 238upx 28upx 28upx;
|
||
}
|
||
.header-wrap {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
padding: 28upx;
|
||
.search-wrap {
|
||
display: flex;
|
||
gap: 28upx;
|
||
.input-wrap {
|
||
flex: 1;
|
||
height: 70upx;
|
||
border: 1px solid #ececec;
|
||
border-radius: 8upx;
|
||
position: relative;
|
||
&:first-child {
|
||
flex: 1.5;
|
||
}
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
&.left {
|
||
left: 14upx;
|
||
}
|
||
&.right {
|
||
right: 14upx;
|
||
}
|
||
}
|
||
.ipt {
|
||
width: 100%;
|
||
height: 100%;
|
||
&.left {
|
||
padding-left: 68upx;
|
||
}
|
||
&.right {
|
||
padding: 0 56upx 0 28upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.status-wrap {
|
||
display: flex;
|
||
padding-top: 28upx;
|
||
position: relative;
|
||
.icon-wrap {
|
||
height: 12upx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease-in-out;
|
||
.active-icon {
|
||
width: 24upx;
|
||
height: 12upx;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
.item {
|
||
flex: 1;
|
||
height: 80upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.t {
|
||
font-size: 32upx;
|
||
color: #666666;
|
||
transition: all 0.3s ease-in-out 0.1s;
|
||
}
|
||
&.active {
|
||
.t {
|
||
color: #e3ad7f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list-wrap {
|
||
padding-top: 28upx;
|
||
.item {
|
||
border-radius: 18upx;
|
||
background-color: #fff;
|
||
padding: 28upx;
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 28upx;
|
||
.icon {
|
||
$size: 120upx;
|
||
width: $size;
|
||
height: $size;
|
||
background-color: #f7f7f7;
|
||
border-radius: 12upx;
|
||
}
|
||
.info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8upx;
|
||
padding-left: 28upx;
|
||
.view {
|
||
flex: 1;
|
||
&.name {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
}
|
||
&.time {
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
width: 120upx;
|
||
height: 48upx;
|
||
border-radius: 48upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #333;
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.btm {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28upx 0 14upx;
|
||
border-top: 1upx solid #f7f7f7;
|
||
.left {
|
||
flex: 1;
|
||
height: 40upx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 28upx;
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.shoplist-popup {
|
||
padding: 0 28upx 28upx;
|
||
.title {
|
||
padding: 28upx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.t {
|
||
font-size: 32upx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
.popup-list {
|
||
height: 50vh;
|
||
.item {
|
||
height: 100upx;
|
||
border-radius: 12upx;
|
||
background-color: #f7f7f7;
|
||
margin-bottom: 28upx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28upx;
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #555;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|