Augcl
/
massage-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: 签到、签到记录、核销记录页面;

pull/1/head
fox 7 months ago
parent
ec7151374f
commit
6de03eb365
17 changed files with 834 additions and 543 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -2
      pages.json
  2. +0
    -521
      pages/index/center copy.vue
  3. +17
    -7
      pages/index/center.vue
  4. +0
    -2
      pages/index/order.vue
  5. +38
    -0
      pages_order/components/formInput.vue
  6. +41
    -0
      pages_order/components/formTextarea.vue
  7. +66
    -0
      pages_order/components/formUpload.vue
  8. +76
    -0
      pages_order/components/verifyRecord/voucherCard.vue
  9. +245
    -0
      pages_order/mine/cooperation.vue
  10. +128
    -0
      pages_order/mine/pointsRecord.vue
  11. +1
    -0
      pages_order/mine/runningWater.vue
  12. +25
    -2
      pages_order/mine/signIn.vue
  13. +187
    -9
      pages_order/mine/verifyRecord.vue
  14. +2
    -0
      pages_order/mine/voucher.vue
  15. BIN
      pages_order/static/cooperation/icon-arrow.png
  16. BIN
      pages_order/static/cooperation/icon-upload.png
  17. BIN
      pages_order/static/pointsRecord/icon-points.png

+ 8
- 2
pages.json View File

@ -89,10 +89,16 @@
"path": "mine/verifyVoucher"
},
{
"path": "mine/verifyRecord"
"path": "mine/signIn"
},
{
"path": "mine/signIn"
"path": "mine/pointsRecord"
},
{
"path": "mine/cooperation"
},
{
"path": "mine/verifyRecord"
},


+ 0
- 521
pages/index/center copy.vue View File

@ -1,521 +0,0 @@
<template>
<view class="page">
<!-- 导航栏 -->
<navbar title="个人中心"
leftClick
@leftClick="$utils.navigateBack"
bgColor="#E3441A" color="#fff" />
<!-- 头部 -->
<view class="head">
<view class="headImage">
<image :src="userInfo.headImage" mode="aspectFill"></image>
</view>
<view class="user-info">
<view class="user-base-info">
<view class="user-base-top">
<view class="user-name">{{ userInfo.nickName}}</view>
<view class="member-level">
<image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level">
</image>
<image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill"
class="level">
</image>
<image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png"
mode="aspectFill" class="level">
</image>
</view>
<view class="user-tag">
{{ userRole[userInfo.isPay] }}
</view>
</view>
<view class="edit-user"
@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
<view class="edit-btn">
修改资料
</view>
</view>
</view>
<view class="user-phone">
手机号:{{ userInfo.phone }}
</view>
</view>
</view>
<!-- 会员卡片 -->
<view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })"
v-if="userInfo.role"
class="earnings">
<view v-if="index + 1 == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item">
<image :src="item.headImage" mode="aspectFill" class="member-image"></image>
<view class="member-info">
<view class="profile-photo">
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
<view class="open-status">
开通时间：{{ riceInfo.openTime }}
</view>
</view>
<view class="open">
</view>
</view>
</view>
</view>
<!-- 佣金数据 -->
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data"
:class="{'brokerage-data-mt' : !userInfo.role}">
<view class="brokerage">
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
<div class="main">
<div class="title">我的佣金</div>
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
</div>
</view>
<view class="balance">
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
<div class="main">
<div class="title">我的余额</div>
<div class="money">￥{{ riceInfo.balance || 0 }}</div>
</div>
</view>
</view>
<!-- 我的服务 -->
<view class="myServer">
<view class="server-title">
我的服务
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
<image src="@/static/image/center/1.png" mode="widthFix" />
<view class="title">我的订单</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
<image src="@/static/image/center/2.png" mode="widthFix" />
<view class="title">我的团队</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
<image src="@/static/image/center/3.png" mode="widthFix" />
<view class="title">联系客服</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
<image src="@/static/image/center/4.png" mode="widthFix" />
<view class="title">邀请好友</view>
</view>
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
<image src="@/static/image/center/5.png" mode="widthFix" />
<view class="title">合伙人招募</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
<image src="@/static/image/center/6.png" mode="widthFix" />
<view class="title">会员权益</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
<image src="@/static/image/center/7.png" mode="widthFix" />
<view class="title">优惠券</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
<image src="@/static/image/center/8.png" mode="widthFix" />
<view class="title">帮助与反馈</view>
</view>
</view>
<view class="box">
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
<image src="@/static/image/center/5.png" mode="widthFix" />
<view class="title">我的地址</view>
</view>
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
<image src="@/static/image/center/6.png" mode="widthFix" />
<view class="title">礼包列表</view>
</view>
<view class="boxs" @click="logout">
<image src="@/static/image/center/6.png" mode="widthFix" />
<view class="title">退出登录</view>
</view>
</view>
</view>
<!-- 广告 -->
<div v-if="showAdvertising" class="ad"
@click="$utils.navigateTo('/pages_order/mine/recruit')">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
:duration="duration">
<swiper-item v-for="(item, index) in adList" :key="index">
<view class="swiper-main">
<view @click="closeAdvertising" class="close">
<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
</view>
<image :src="item" mode="aspectFill" class="swiper-main-img"></image>
<div class="ad-tag">
<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
</div>
</view>
</swiper-item>
</swiper>
</div>
<customerServicePopup ref="customerServicePopup" />
<tabber select="center" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import {
mapState
} from 'vuex'
import customerServicePopup from '@/components/config/customerServicePopup.vue'
export default {
components: {
tabber,
customerServicePopup,
},
computed: {
...mapState(['riceInfo']),
adList() {
let arr = [];
if (this.configList?.shop_get_image) {
arr = this.configList?.shop_get_image?.split(',')
}
return arr
}
},
data() {
return {
vipType: ['普通会员', '黄金会员', '渠道商'],
vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
vipList: [],
showAdvertising: true,
userRole: ['会员', '用户', '渠道']
}
},
onShow() {
this.$store.commit('getUserInfo')
this.$store.commit('getRiceInfo')
this.getMemberCardData();
},
methods: {
clickNo() {
uni.showModal({
title: '暂未开放',
})
},
logout(){
uni.showModal({
title: '确认退出登录吗',
success : (r) => {
if (r.confirm) {
this.$store.commit('logout', true)
}
}
})
},
//关闭广告
closeAdvertising() {
this.showAdvertising = false;
},
//获取会员卡片数据
getMemberCardData() {
this.$api('getRiceVipList', res => {
if (res.code == 200) {
this.vipList = res.result
}
})
}
}
}
</script>
<style scoped lang="scss">
.page {
// 头部
.head {
display: flex;
align-items: center;
padding: 60rpx 20rpx 120rpx 20rpx;
background: $uni-color;
.headImage {
width: 130rpx;
height: 130rpx;
background-image: url(/static/image/center/head-img.png);
background-repeat: no-repeat;
background-position: 50%, 50%;
background-size: 100%;
overflow: hidden;
border-radius: 50%;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.user-info {
width: calc(100% - 130rpx);
.user-base-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.user-base-top {
width: 65%;
display: flex;
align-items: center;
flex-wrap: wrap;
color: white;
.user-name {
max-width: calc(100% - 240rpx);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 34rpx;
}
.member-level {
margin-left: 10rpx;
.level {
width: 120rpx;
height: 60rpx;
}
}
.user-tag {
display: flex;
align-items: center;
justify-content: center;
background: #000;
width: 100rpx;
height: 40rpx;
border-radius: 20rpx;
font-size: 24rpx;
margin-left: 10rpx;
}
}
.edit-user {
width: 35%;
display: flex;
align-items: center;
justify-content: flex-end;
.edit-icon {
width: 30rpx;
height: 30rpx;
}
.edit-btn {
color: white;
margin-left: 10rpx;
}
}
}
.user-phone {
color: white;
font-size: 24rpx;
}
}
}
// 会员卡片
.earnings {
padding: 0rpx 20rpx;
box-sizing: border-box;
margin-top: -18%;
.member-item {
position: relative;
.member-image {
width: 100%;
height: 300rpx;
border-radius: 20rpx;
}
.member-info {
position: absolute;
bottom: 30rpx;
left: 0rpx;
display: flex;
align-items: center;
padding: 0rpx 40rpx;
box-sizing: border-box;
width: 100%;
.profile-photo {
display: flex;
justify-content: center;
align-items: center;
.pro-img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.open-status {
color: #F8A95F;
border: 1px solid #F8A95F;
border-radius: 30rpx;
padding: 7rpx 20rpx;
margin-left: 10rpx;
}
}
.open {
font-size: 26rpx;
margin-left: 20rpx;
}
}
}
}
// 佣金数据
.brokerage-data {
padding: 20rpx;
background: white;
border-radius: 20rpx;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
margin: 20rpx 20rpx 20rpx 20rpx;
.brokerage,
.balance {
display: flex;
flex-wrap: wrap;
width: 50%;
.brokerage-img,
.balance-img {
width: 50%;
height: auto;
}
.main {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 50%;
box-sizing: border-box;
padding: 30rpx 0rpx;
.title {
font-size: 34rpx;
}
.money {
font-size: 40rpx;
color: $uni-color;
font-weight: bold;
}
}
}
}
.brokerage-data-mt {
margin-top: 50rpx;
}
// 我的服务
.myServer {
margin: 0rpx 20rpx 20rpx 20rpx;
background: white;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
.server-title {
margin-bottom: 20rpx;
font-size: 34rpx;
}
.box {
display: flex;
width: 100%;
margin-bottom: 20rpx;
.boxs {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 60rpx;
height: 60rpx;
display: block;
margin: 0rpx auto 10rpx auto;
}
}
&:last-child {
margin-bottom: 0rpx;
}
}
}
// 广告
.ad {
margin: 0rpx 20rpx;
.swiper {
.swiper-main {
position: relative;
.close {
position: absolute;
top: 20rpx;
right: 20rpx;
.close-img {
width: 40rpx;
height: 40rpx;
}
}
.swiper-main-img {
width: 100%;
height: 200rpx;
border-radius: 20rpx;
}
.ad-tag {
position: absolute;
left: 20rpx;
bottom: 20rpx;
.ad-tag-img {
width: 120rpx;
height: auto;
}
}
}
}
}
}
</style>

+ 17
- 7
pages/index/center.vue View File

@ -115,13 +115,11 @@
<image class="fun-common-icon" src="@/static/image/center/icon-service.png" mode="widthFix"></image>
<text class="fun-common-label">联系客服</text>
</view>
<!-- todo: navigateTo -->
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/signIn')">
<image class="fun-common-icon" src="@/static/image/center/icon-sign-in.png" mode="widthFix"></image>
<text class="fun-common-label">每日签到</text>
</view>
<!-- todo: navigateTo -->
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
<view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/cooperation')">
<image class="fun-common-icon" src="@/static/image/center/icon-cooperation.png" mode="widthFix"></image>
<text class="fun-common-label">商家合作</text>
</view>
@ -133,16 +131,16 @@
<cardTitle>商家功能</cardTitle>
</view>
<view class="flex fun-content fun-merchant-content">
<view class="left">
<view class="left" @click="$utils.navigateTo('/pages_order/mine/verifyRecord')">
<image class="left-bg" src="@/static/image/center/bg-verify.png"></image>
<!-- todo: navigateTo -->
<view class="flex left-content" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
<view class="flex left-content">
<text>核销明细</text>
<image class="left-icon" src="@/static/image/center/icon-arrow.png" mode="widthFix"></image>
</view>
</view>
<!-- todo -->
<view class="right" @click="onScan">
<image class="right-bg" src="@/static/image/center/bg-scan.png"></image>
</view>
@ -249,7 +247,7 @@
},
data() {
return {
role: '', // member-personal | member-business | merchant
role: 'merchant', // member-personal | member-business | merchant
vipType: ['普通会员', '黄金会员', '渠道商'],
vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
@ -299,6 +297,18 @@
},
onScan() {
// todo
uni.scanCode({
success: (res) => {
console.log(res);
if (res.result) {
// 处理扫码结果
console.log('扫码结果：', res.result);
}
},
fail: (err) => {
console.error('扫码失败：', err);
}
});
},
}
}


+ 0
- 2
pages/index/order.vue View File

@ -33,8 +33,6 @@
<view class="list">
<orderCard v-for="item in list" :data="item" :key="item.id"></orderCard>
<!-- todo: delete -->
<orderCard></orderCard>
</view>
<tabber select="order" />


+ 38
- 0
pages_order/components/formInput.vue View File

@ -0,0 +1,38 @@
<template>
<uv-input
:value="value"
@input="$emit('input', value)"
:placeholder="placeholder"
:placeholderStyle="{
color: '#999999',
fontSize: '28rpx',
}"
:customStyle="{
backgroundColor: 'transparent',
padding: '0 20rpx 0 0',
boxSizing: 'border-box',
fontSize: '28rpx',
border: 'none',
}"
inputAlign="right"
></uv-input>
</template>
<script>
export default {
props: {
value: {
default: null
},
placeholder: {
type: String,
default: '请输入'
},
},
data() {
return {
}
},
}
</script>

+ 41
- 0
pages_order/components/formTextarea.vue View File

@ -0,0 +1,41 @@
<template>
<uv-textarea
:value="value"
@input="$emit('input', value)"
:placeholder="placeholder"
height="175rpx"
border="none"
:customStyle="{
backgroundColor: '#F5F5F5',
borderRadius: '6rpx',
}"
:placeholderStyle="{
color: '#999999',
fontSize: '28rpx',
}"
></uv-textarea>
</template>
<script>
export default {
props: {
value: {
default: null
},
placeholder: {
type: String,
default: '请输入'
},
},
data() {
return {
}
},
methods: {
},
}
</script>
<style scoped lang="scss">
</style>

+ 66
- 0
pages_order/components/formUpload.vue View File

@ -0,0 +1,66 @@
<template>
<view>
<uv-upload
:fileList="fileList"
:multiple="multiple"
:maxCount="maxCount"
:width="width"
:height="height"
@afterRead="afterRead"
@delete="deleteFile"
>
<slot :value="value"></slot>
</uv-upload>
</view>
</template>
<script>
export default {
props: {
value: {
default: null
},
multiple: {
type: Boolean,
default: false,
},
maxCount: {
type: Number,
default: 1,
},
width: {
type: Number | String,
default: null,
},
height: {
type: Number | String,
default: null,
},
},
data() {
return {
fileList: [],
}
},
methods: {
deleteFile(){
this.fileList = []
this.$emit('input', null)
},
afterRead(e){
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileList = [url]
self.$emit('input', url)
})
})
},
},
}
</script>
<style scoped lang="scss">
</style>

+ 76
- 0
pages_order/components/verifyRecord/voucherCard.vue View File

@ -0,0 +1,76 @@
<template>
<view class="card flex voucher">
<image class="voucher-img" :src="data.imgUrl"></image>
<view class="voucher-info">
<view class="voucher-name">{{ data.userName }}</view>
<view class="voucher-desc">{{ `核销时间：${data.createTime}` }}</view>
</view>
<view class="voucher-count">
<text>代金券：</text>
<text class="voucher-value">{{ `${data.count}元` }}</text>
</view>
</view>
</template>
<script>
const TEST_DATA = {
id: '001',
imgUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
userName: '用户136xxxxxxxxx',
createTime: '2025/03/05 14:45:36',
count: '100',
}
export default {
props: {
data: {
type: Object,
default() {
return TEST_DATA
}
},
},
}
</script>
<style scoped lang="scss">
.voucher {
padding: 33rpx 25rpx 33rpx 31rpx;
&-img {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin-right: 7rpx;
}
&-info {
flex: 1;
}
&-name {
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
}
&-desc {
color: #333333;
font-size: 22rpx;
line-height: 30rpx;
margin-top: 5rpx;
}
&-count {
color: #000000;
font-size: 22rpx;
}
&-value {
color: #FF2A2A;
}
}
</style>

+ 245
- 0
pages_order/mine/cooperation.vue View File

@ -0,0 +1,245 @@
<template>
<view class="page">
<!-- 导航栏 -->
<navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" />
<view class="content">
<view class="form">
<view class="form-title">门头照片</view>
<view class="card upload">
<formUpload v-model="form.imageUrl">
<template v-slot="{ value }">
<view class="flex">
<image v-if="value"
class="upload-img"
:src="value"
mode="aspectFill"
/>
<image v-else
class="upload-img"
src="../static/cooperation/icon-upload.png"
mode="aspectFill"
/>
</view>
</template>
</formUpload>
</view>
</view>
<view class="form">
<view class="form-title">店铺信息</view>
<view class="card info">
<uv-form
ref="form"
:model="form"
:rules="rules"
labelPosition="left"
labelWidth="150rpx"
:labelStyle="{
color: '#000000',
fontSize: '28rpx',
}"
>
<view class="form-item">
<uv-form-item label="店铺名称" prop="storeName">
<view class="form-item-content">
<formInput v-model="form.storeName" placeholder="请输入店铺名称"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="您的姓名" prop="name">
<view class="form-item-content">
<formInput v-model="form.name" placeholder="请输入您的姓名"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="联系手机号" prop="phone">
<view class="form-item-content">
<formInput v-model="form.phone" placeholder="请输入您的手机号"></formInput>
</view>
</uv-form-item>
</view>
<view class="form-item">
<uv-form-item label="所在地区" prop="address">
<view class="form-item-content flex address">
<text>{{ form.address ? form.address : '请选择' }}</text>
<button plain class="btn address-btn" @click="selectAddr">
<image class="address-btn-icon" src="../static/cooperation/icon-arrow.png" mode="widthFix"></image>
</button>
</view>
</uv-form-item>
</view>
<view class="form-item address-details">
<uv-form-item label="详细地址" prop="addressDetails" labelPosition="top" >
<view style="margin-top: 22rpx;">
<formTextarea
v-model="form.addressDetails"
placeholder="请输入详细地址"
></formTextarea>
</view>
</uv-form-item>
</view>
</uv-form>
</view>
</view>
<view class="tools">
<button plain class="btn btn-submit">提交</button>
</view>
</view>
</view>
</template>
<script>
import Position from '@/utils/position.js'
import formInput from '../components/formInput.vue'
import formUpload from '../components/formUpload.vue'
import formTextarea from '../components/formTextarea.vue'
export default {
components: {
formInput,
formUpload,
formTextarea,
},
data() {
return {
form: {
storeName: null,
name: null,
phone: null,
address: null,
latitude: null,
longitude: null,
addressDetails: null,
},
rules: {
// todo
}
}
},
methods: {
//地图上选择地址
selectAddr() {
// Position.getLocation(res => {
Position.selectAddress(0, 0, success => {
this.setAddress(success)
})
// })
},
//提取用户选择的地址信息复制给表单数据
setAddress(res) {
//经纬度信息
this.form.latitude = res.latitude
this.form.longitude = res.longitude
if (!res.address && res.name) { //用户直接选择城市的逻辑
return this.form.address = res.name
}
if (res.address || res.name) {
return this.form.address = res.address + res.name
}
this.form.address = '' //用户啥都没选就点击勾选
},
},
}
</script>
<style lang="scss" scoped>
.page {
background-color: $uni-bg-color;
min-height: 100vh;
/deep/ .nav-bar__view {
background-image: linear-gradient(#84A73F, #D8FF8F);
}
}
.content {
padding: 28rpx 30rpx;
}
.form {
& + & {
margin-top: 44rpx;
}
&-title {
color: #000000;
font-size: 28rpx;
margin-bottom: 15rpx;
}
&-item {
padding-left: 8rpx;
& + & {
// margin-top: 20rpx;
border-top: 1rpx solid rgba($color: #C7C7C7, $alpha: 0.69);
}
&-content {
min-height: 60rpx;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 28rpx;;
color: #999999;
}
}
}
.upload {
padding: 37rpx 22rpx;
&-img {
width: 131rpx; height: 131rpx;
}
}
.address {
color: #000000;
font-size: 28rpx;
line-height: 40rpx;
justify-content: flex-end;
&-btn {
border: none;
padding: 7rpx 20rpx 7rpx 7rpx;
&-icon {
width: 30rpx;
height: auto;
}
}
}
.address-details {
padding: 0;
/deep/ .uv-form-item__body__left__content {
margin-top: 10rpx;
padding-left: 8rpx;
}
}
.tools {
padding: 0 56rpx;
margin-top: 126rpx;
}
.btn-submit {
padding: 29rpx 0;
border: none;
font-size: 36rpx;
border-radius: 45rpx;
color: $uni-text-color-inverse;
background-image: linear-gradient(to right, #84A73F, #D8FF8F);
}
</style>

+ 128
- 0
pages_order/mine/pointsRecord.vue View File

@ -0,0 +1,128 @@
<template>
<view class="page">
<!-- 导航栏 -->
<navbar title="积分明细" leftClick @leftClick="$utils.navigateBack" color="#fff" />
<view class="tools">
<uv-datetime-picker
ref="datetimePicker"
v-model="selectedTime"
mode="year-month"
confirmColor="#84A73F"
@confirm="onTimeChange"
></uv-datetime-picker>
<button plain class="flex btn" @click="openTimePicker">
<text>{{ displaySelectedTime }}</text>
<image class="btn-icon" src="../static/runningWater/icon-arrow.png" mode="widthFix"></image>
</button>
</view>
<view class="card list">
<template v-if="list.length">
<view class="flex list-item"
v-for="(item, index) in list"
:key="index"
>
<image class="list-item-icon" src="../static/pointsRecord/icon-points.png" mode="widthFix"></image>
<view class="list-item-info">
<view class="highlight">{{ item.projectName }}</view>
<view>{{ item.createTime }}</view>
</view>
<view class="list-item-value">{{ `+${item.money}` }}</view>
</view>
</template>
<template v-else>
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
</template>
</view>
</view>
</template>
<script>
import mixinsList from "@/mixins/list.js"
export default {
mixins: [mixinsList],
data() {
return {
selectedTime: new Date(),
}
},
computed: {
displaySelectedTime() {
return this.$dayjs(this.selectedTime).format("YYYY年M月")
}
},
methods: {
openTimePicker() {
this.$refs.datetimePicker.open();
},
onTimeChange(e) {
// todo
console.log('--onTimeChange', e)
},
}
}
</script>
<style lang="scss" scoped>
.page {
background-color: $uni-bg-color;
min-height: 100vh;
/deep/ .nav-bar__view {
background-image: linear-gradient(#84A73F, #D8FF8F);
}
}
.tools {
background-color: $uni-fg-color;
padding: 25rpx 42rpx;
.btn {
display: inline-block;
border: none;
color: #000000;
font-size: 28rpx;
line-height: 40rpx;
&-icon {
width: 28rpx;
height: 28rpx;
margin-left: 12rpx;
}
}
}
.list {
margin: 9rpx 13rpx;
padding: 31rpx 20rpx;
&-item {
padding-bottom: 19rpx;
border-bottom: 1rpx solid #E0E0E0;
margin-bottom: 20rpx;
font-size: 28rpx;
&-icon {
width: 56rpx;
height: auto;
margin-right: 10rpx;
}
&-info {
flex: 1;
color: #949494;
.highlight {
color: #333333;
}
}
&-value {
color: #FF2A2A;
}
}
}
</style>

+ 1
- 0
pages_order/mine/runningWater.vue View File

@ -8,6 +8,7 @@
ref="datetimePicker"
v-model="selectedTime"
mode="year-month"
confirmColor="#84A73F"
@confirm="onTimeChange"
></uv-datetime-picker>
<button plain class="flex btn" @click="openTimePicker">


+ 25
- 2
pages_order/mine/signIn.vue View File

@ -32,14 +32,14 @@
</view>
<view style="text-align: right;">
<button class="flex btn btn-record">
<button class="flex btn btn-record" @click="$utils.navigateTo('/pages_order/mine/pointsRecord')">
<text>积分明细</text>
<image class="btn-record-icon" src="../static/signIn/icon-arrow.png" mode="widthFix"></image>
</button>
</view>
<view class="tools">
<button class="flex btn btn-sign" @click="onSignIn">我要签到</button>
<button plain class="flex btn btn-sign" :class="{ 'is-disabled': isSigned }" @click="onSignIn" :disabled="isSigned">我要签到</button>
</view>
</view>
</view>
@ -61,11 +61,29 @@ export default {
badge: true,
}
}),
isSigned: false
}
},
methods: {
onSignIn() {
// todo
setTimeout(() => {
this.isSigned = true
const date = this.$dayjs()
this.selected.push({
date: date.format("YYYY-MM-DD"),
info: date.date(),
infoColor: '#FFFFFF',
badge: true,
})
uni.showToast({
title: '签到成功~',
});
}, 2000)
}
},
}
@ -211,6 +229,11 @@ export default {
line-height: 40rpx;
border-radius: 44rpx;
background-image: linear-gradient(to right, #84A73F, #D8FF8F);
&.is-disabled {
color: $uni-text-color-inverse;
background: #C7C7C7;
}
}
}

+ 187
- 9
pages_order/mine/verifyRecord.vue View File

@ -1,25 +1,203 @@
<template>
<view class="page">
<navbar title="核销明细" leftClick @leftClick="$utils.navigateBack" color="#fff" />
<!-- todo -->
<view class="tabs">
<uv-tabs
:list="tabs"
@click="onTabChange"
:customStyle="{
backgroundColor: '#FFFFFF',
}"
:activeStyle="{
color: '#84A73F',
fontSize: '28rpx',
whiteSpace: 'nowrap',
paddingTop: '29rpx',
paddingBottom: '21rpx',
}"
:inactiveStyle="{
color: '#000000',
fontSize: '28rpx',
whiteSpace: 'nowrap',
paddingTop: '29rpx',
paddingBottom: '21rpx',
}"
lineHeight="5rpx"
lineWidth="92rpx"
lineColor="linear-gradient(to right, #84A73F, #D8FF8F)"
:scrollable="false"
></uv-tabs>
</view>
<view class="flex bar">
<view class="left">
<uv-datetime-picker
ref="datetimePicker"
v-model="selectedTime"
mode="year-month"
confirmColor="#84A73F"
@confirm="onTimeChange"
></uv-datetime-picker>
<button plain class="flex btn" @click="openTimePicker">
<text>{{ displaySelectedTime }}</text>
<image class="btn-icon" src="../static/runningWater/icon-arrow.png" mode="widthFix"></image>
</button>
</view>
<view class="right">
<text>{{ `${displaySelectedMonth}总核销：` }}</text>
<!-- todo: 对接接口字段 -->
<text class="highlight">{{ 12 }}</text>
</view>
</view>
<template v-if="current == 0" >
<view class="list order">
<orderCard class="list-item"
v-for="item in list"
:key="item.id"
:data="data"
></orderCard>
</view>
</template>
<template v-else-if="current == 1" >
<view class="list voucher">
<voucherCard class="list-item"
v-for="item in list"
:key="item.id"
:data="data"
></voucherCard>
<!-- todo: delete -->
<voucherCard class="list-item"></voucherCard>
<voucherCard class="list-item"></voucherCard>
</view>
</template>
</view>
</template>
<script>
export default {
data() {
return {
}
}
import mixinsList from '@/mixins/list.js'
import orderCard from '@/components/order/orderCard.vue'
import voucherCard from '../components/verifyRecord/voucherCard.vue'
const TAB_AND_API_FIELDS_MAPPING = {
// todo: 接口对接
0: 'fetchVoucher',
1: 'fetchStore',
}
export default {
mixins : [mixinsList],
components: {
orderCard,
voucherCard,
},
data() {
return {
tabs: [{
name: "核销商品"
}, {
name: "核销代金券"
}],
current: 0,
selectedTime: new Date(),
};
},
computed: {
mixinsListApi() {
// todo
return TAB_AND_API_FIELDS_MAPPING[this.current]
},
displaySelectedTime() {
return this.$dayjs(this.selectedTime).format("YYYY年M月")
},
displaySelectedMonth() {
return this.$dayjs(this.selectedTime).format("M月")
},
},
methods: {
onTabChange(e) {
this.current = e.index
},
openTimePicker() {
this.$refs.datetimePicker.open();
},
onTimeChange(e) {
// todo
console.log('--onTimeChange', e)
},
},
}
</script>
<style scoped lang="scss">
.page {
.page {
background-color: $uni-bg-color;
min-height: 100vh;
/deep/ .nav-bar__view {
background-image: linear-gradient(#84A73F, #D8FF8F);
}
}
.tabs {
/deep/ .uv-tabs__wrapper__nav__line {
bottom: 0;
}
}
.bar {
padding: 0 58rpx 0 25rpx;
margin-top: 32rpx;
justify-content: space-between;
.left {
.btn {
border: none;
color: #000000;
font-size: 28rpx;
line-height: 40rpx;
&-icon {
width: 28rpx;
height: auto;
margin-left: 12rpx;
}
}
}
.right {
color: #333333;
font-size: 28rpx;
.highlight {
margin-left: 10rpx;
color: $uni-color-light;
}
}
}
.list {
margin-top: 26rpx;
&-item {
display: block;
& + & {
margin-top: 20rpx;
}
}
&.order {
padding: 0 17rpx;
}
&.voucher {
padding: 0 13rpx;
}
}
</style>

+ 2
- 0
pages_order/mine/voucher.vue View File

@ -112,6 +112,8 @@
.list {
&-item {
display: block;
& + & {
margin-top: 20rpx;
}


BIN
pages_order/static/cooperation/icon-arrow.png View File

Before After
Width: 31  |  Height: 31  |  Size: 460 B

BIN
pages_order/static/cooperation/icon-upload.png View File

Before After
Width: 131  |  Height: 131  |  Size: 4.6 KiB

BIN
pages_order/static/pointsRecord/icon-points.png View File

Before After
Width: 62  |  Height: 62  |  Size: 4.3 KiB

Write Preview
Loading…
Cancel
Save