同步代码
This commit is contained in:
GaoHao
406
pageUser/add-user/add-user.vue
Normal file
406
pageUser/add-user/add-user.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<view>
|
||||
<uni-forms :model="userForm" :rules="rules" err-show-type="toast" validateTrigger="submit" ref="form"
|
||||
:border="true" label-position="top" label-width="350">
|
||||
<view class="block">
|
||||
<uni-forms-item label="用户名" required >
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.nickName" placeholder="填写用户名" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号" required >
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.phone" placeholder="填写号码" />
|
||||
</uni-forms-item>
|
||||
<!-- <uni-forms-item label="生日" required name="birthday">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder" v-model="userForm.birthday" placeholder="选择日期" />
|
||||
|
||||
|
||||
</uni-forms-item> -->
|
||||
|
||||
<uni-forms-item label="生日" required >
|
||||
<view style="display: none;">
|
||||
<uni-easyinput paddingNone :inputBorder="inputBorder" v-model="userForm.birthDay"
|
||||
placeholder="选择日期" />
|
||||
</view>
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate"
|
||||
@change="bindDateChange">
|
||||
<view class="u-flex u-row-between u-p-b-10 lh40">
|
||||
<view class="color-333">{{userForm.birthDay||'选择日期'}}</view>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="性别" required >
|
||||
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'sex')">
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="1" :checked="userForm.sex == '1'" class="scale7" />
|
||||
<text>男</text>
|
||||
</label>
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="2" :checked="userForm.sex == '2'" class="scale7" />
|
||||
<text>女</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</uni-forms-item>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <uni-forms-item label="用户余额" required name="balance">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.balance" placeholder="填写余额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="用户积分" required name="integral">
|
||||
<uni-easyinput paddingNone :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="userForm.integral" placeholder="填写积分" />
|
||||
</uni-forms-item> -->
|
||||
</view>
|
||||
<!-- <view class="block border-top-0">
|
||||
<uni-forms-item label="" required>
|
||||
<view class="u-flex u-row-between lh40">
|
||||
<view class="label-title">状态</view>
|
||||
<my-switch v-model="userForm.isVip"></my-switch>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</view> -->
|
||||
|
||||
</uni-forms>
|
||||
</view>
|
||||
|
||||
<view class="save-btn-box">
|
||||
<my-button @tap="save" shape="circle">保存</my-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom" ref="bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import {
|
||||
member,
|
||||
tbShopUser
|
||||
} from '@/http/yskApi/requestAll.js';
|
||||
|
||||
|
||||
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
const paddingNone = true
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
const props = defineProps({
|
||||
item:{type:''}
|
||||
})
|
||||
//表单验证
|
||||
const rules = {
|
||||
nickName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请填写用户名'
|
||||
}]
|
||||
},
|
||||
phone: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '请输入手机号'
|
||||
},
|
||||
{
|
||||
validateFunction: function(rule, value, data, callback) {
|
||||
const isPas = /^1\d{10}$/.test(value);
|
||||
if (!isPas) {
|
||||
callback('请输入正确的手机号')
|
||||
}
|
||||
return isPas
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
form.value.setRules(rules)
|
||||
})
|
||||
|
||||
const startDate = getDate('start')
|
||||
let date = getDate()
|
||||
const endDate = getDate('end')
|
||||
|
||||
function getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 60;
|
||||
} else if (type === 'end') {
|
||||
year = year
|
||||
} else {
|
||||
year = year - 20
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
|
||||
function bindDateChange(e) {
|
||||
console.log(e);
|
||||
userForm.birthDay = e.detail.value
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 用户表单
|
||||
let userForm = reactive({
|
||||
nickName: '',
|
||||
phone: '',
|
||||
birthDay: '',
|
||||
balance: '',
|
||||
integral: '',
|
||||
isVip: true,
|
||||
level: 1,
|
||||
sex: 1
|
||||
})
|
||||
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
}
|
||||
}
|
||||
const option = reactive({
|
||||
type: 'add'
|
||||
})
|
||||
|
||||
function isEmpty(obj) {
|
||||
return obj && JSON.stringify(obj) !== '{}'
|
||||
}
|
||||
|
||||
|
||||
|
||||
onLoad(params => {
|
||||
if (params.id) {
|
||||
let items = params
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑用户'
|
||||
})
|
||||
// userForm = items
|
||||
userForm.nickName=items.nickName
|
||||
userForm.birthDay=items.birthDay
|
||||
userForm.id=items.id
|
||||
userForm.phone = items.telephone
|
||||
userForm.sex = items.sex == '男' ? 1 : 2
|
||||
option.type = 'edit'
|
||||
console.log(userForm,'调试111')
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '新增用户'
|
||||
})
|
||||
option.type = 'add'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function sizeChange(e, name) {
|
||||
userForm[name] = e.detail.value
|
||||
}
|
||||
|
||||
|
||||
function save() {
|
||||
form.value.validate().then(async res => {
|
||||
let obj = {
|
||||
...userForm,
|
||||
name: userForm.nickName,
|
||||
telephone: userForm.phone,
|
||||
birthday:userForm.birthDay,
|
||||
status:1,
|
||||
levelConsume:0,
|
||||
shopId: uni.getStorageSync("shopId"),
|
||||
sex:userForm.sex==1?1:2
|
||||
}
|
||||
if (res) {
|
||||
if (option.type == 'add') {
|
||||
const ele = await member(obj)
|
||||
} else {
|
||||
const ele = await tbShopUser(obj)
|
||||
}
|
||||
go.back()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .option .uni-forms-item {
|
||||
padding: 0;
|
||||
min-height: inherit;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-color: $my-main-color;
|
||||
|
||||
&::before {
|
||||
width: $icon-line-height;
|
||||
height: $icon-line-width;
|
||||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: 4rpx;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-reduce {
|
||||
background-color: $my-red-color;
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: $icon-line-height;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 34rpx;
|
||||
}
|
||||
</style>
|
||||
619
pageUser/deposit-management/add-recharge-item.vue
Normal file
619
pageUser/deposit-management/add-recharge-item.vue
Normal file
@@ -0,0 +1,619 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="box">
|
||||
<view v-for="(item,index) in recharge.list" :key="index">
|
||||
<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur"
|
||||
:ref="setFormRef(index)" :border="true" label-position="top" label-width="350">
|
||||
<view class="block">
|
||||
<uni-forms-item label="充值面额" required name="miane">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.miane" placeholder="填输入面额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送金额" required name="jine">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.jine" placeholder="请输入金额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送积分" required name="jifen">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.jifen" placeholder="请输入赠送积分" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送券">
|
||||
|
||||
<view class="option">
|
||||
<template v-if="item.options.length">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex-1">赠送券</view>
|
||||
<view class="u-flex-1 u-p-l-60">赠送数量</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="u-flex option-item" v-for="(option,optionIndex) in item.options"
|
||||
:key="optionIndex">
|
||||
|
||||
<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
|
||||
<view class="u-flex-1">
|
||||
<uni-forms-item :key="optionIndex" :name="['options',optionIndex,'quan']"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0"
|
||||
label="" required>
|
||||
|
||||
<uni-data-select
|
||||
v-model="recharge.list[index].options[optionIndex].quan"
|
||||
:localdata="quans"
|
||||
@change="inpuChange(index,optionIndex)"></uni-data-select>
|
||||
|
||||
<!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="选项名" /> -->
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class="u-p-l-60 u-flex-1 u-flex">
|
||||
<uni-forms-item :key="optionIndex"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:name="['options',optionIndex,'quanNumber']" label-width="0" label=""
|
||||
required>
|
||||
<view class="u-flex">
|
||||
<uni-easyinput
|
||||
v-model="recharge.list[index].options[optionIndex].quanNumber"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
type="number" placeholder="填写数量 张" />
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex u-m-t-32" >
|
||||
<view class="u-flex" @click="addOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<!-- <view class="u-flex u-m-t-48 u-m-b-24" @click="delrechargeGroup(index)">
|
||||
<view class="icon icon-reduce u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-red">删除规格组</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="block u-m-t-30">
|
||||
<view class="u-p-t-30 u-p-b-30">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="">首冲赠送</view>
|
||||
<view>
|
||||
<my-switch v-model="item.isFirst"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="color-999" v-if="item.isFirst">当用户首次充值时，仅赠送以下内容:</view>
|
||||
</view>
|
||||
<template v-if="item.isFirst">
|
||||
<uni-forms-item label="赠送金额" required name="zengJie">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.zengJie" placeholder="请输入金额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送积分" required name="zengJifen">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.zengJifen" placeholder="请输入积分" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送券">
|
||||
|
||||
<view class="option">
|
||||
<template v-if="item.zengOptions.length">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex-1">赠送券</view>
|
||||
<view class="u-flex-1 u-p-l-60">赠送数量</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="u-flex option-item" v-for="(option,optionIndex) in item.zengOptions"
|
||||
:key="optionIndex">
|
||||
|
||||
<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
|
||||
<view class="u-flex-1">
|
||||
<uni-forms-item :key="optionIndex" :name="['zengOptions',optionIndex,'quan']"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0"
|
||||
label="" required>
|
||||
|
||||
<uni-data-select
|
||||
v-model="recharge.list[index].zengOptions[optionIndex].quan"
|
||||
:localdata="quans"
|
||||
@change="inpuChange(index,optionIndex)"></uni-data-select>
|
||||
|
||||
<!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
placeholder="选项名" /> -->
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
<view class="u-p-l-60 u-flex-1 u-flex">
|
||||
<uni-forms-item :key="optionIndex"
|
||||
:rules="[{'required': true,errorMessage: '必填'}]"
|
||||
:ref="setFormInputRef(index,optionIndex)"
|
||||
:name="['zengOptions',optionIndex,'quanNumber']" label-width="0" label=""
|
||||
required>
|
||||
<view class="u-flex">
|
||||
<uni-easyinput
|
||||
v-model="recharge.list[index].zengOptions[optionIndex].quanNumber"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
type="number" placeholder="填写数量 张" />
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delZengOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-flex u-m-t-32" >
|
||||
<view class="u-flex" @click="addZengOptions(index)">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
</view>
|
||||
<view class="color-main">添加</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<!-- <view class="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addrechargeGroup">
|
||||
<view class="icon icon-add u-m-r-22 ">
|
||||
|
||||
</view>
|
||||
<view class="color-main">添加规格组</view>
|
||||
</view> -->
|
||||
|
||||
<view class="save-btn-box">
|
||||
<my-button @tap="save" showShadow shape="circle">保存</my-button>
|
||||
<view class="u-m-t-20">
|
||||
<my-button @tap="back" type="cancel">取消</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100rpx;"></view>
|
||||
<view class="bottom" ref="bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
onLoad,
|
||||
onReady
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,
|
||||
onBeforeMount
|
||||
} from 'vue';
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
//表单验证
|
||||
const rules = {
|
||||
miane: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
jine: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
zengJie:{
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
zengJifen:{
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
jifen: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
quan: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
},
|
||||
quanNumber: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const quans = reactive([{
|
||||
value: 0,
|
||||
text: "充值18元优惠券"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "邀新10元优惠券"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "10元新人券"
|
||||
},
|
||||
])
|
||||
|
||||
// 构造规格的选项值的基础数据
|
||||
const rechargeOptionsBasicData = {
|
||||
quan: null,
|
||||
quanNumber: 1
|
||||
}
|
||||
|
||||
function returnOptionsBasicData() {
|
||||
return {
|
||||
...rechargeOptionsBasicData
|
||||
}
|
||||
}
|
||||
// 构造规格的基础数据
|
||||
const rechargeBasicData = {
|
||||
GroupName: '',
|
||||
miane: '',
|
||||
jine: '',
|
||||
jifen: '',
|
||||
zengJie:'',
|
||||
zengJifen:'',
|
||||
isFirst:false,
|
||||
options: [],
|
||||
zengOptions:[]
|
||||
}
|
||||
|
||||
function back(){
|
||||
go.back()
|
||||
}
|
||||
|
||||
function returnrechargeOptionsBasicData() {
|
||||
return {
|
||||
...rechargeBasicData,
|
||||
options: [returnOptionsBasicData()],
|
||||
zengOptions: [returnOptionsBasicData()],
|
||||
}
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
// 规格列表
|
||||
const recharge = reactive({
|
||||
list: [returnrechargeOptionsBasicData()]
|
||||
})
|
||||
|
||||
|
||||
|
||||
//添加规格组
|
||||
function addrechargeGroup() {
|
||||
recharge.list.push(returnrechargeOptionsBasicData())
|
||||
scrollPageBottom()
|
||||
}
|
||||
//删除规格组
|
||||
function delrechargeGroup(index) {
|
||||
recharge.list.splice(index, 1)
|
||||
}
|
||||
// 向指定索引的优惠券添加规格项
|
||||
function addOptions(index) {
|
||||
recharge.list[index].options.push(returnOptionsBasicData())
|
||||
}
|
||||
// 向指定索引的赠送优惠券添加规格项
|
||||
function addZengOptions(index) {
|
||||
recharge.list[index].zengOptions.push(returnOptionsBasicData())
|
||||
}
|
||||
// 删除指定索引的优惠券添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
recharge.list[index].options.splice(optionIndex, 1)
|
||||
}
|
||||
// 删除指定索引的赠送优惠券添加规格项
|
||||
function delZengOption(index, optionIndex) {
|
||||
recharge.list[index].zengOptions.splice(optionIndex, 1)
|
||||
}
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
}
|
||||
//设置表单验证规则
|
||||
function setFormRules() {
|
||||
form.value.setRules(rules)
|
||||
}
|
||||
const formRefs = ref([]);
|
||||
//绑定表单元素
|
||||
function setFormRef(index) {
|
||||
formRefs.value[index] = null;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
formRefs.value[index] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 绑定option input元素
|
||||
const refFormInput = ref([])
|
||||
|
||||
function setFormInputRef(index, index1) {
|
||||
const newIndex = 1000 + index * 10000 + index1
|
||||
return (el) => {
|
||||
if (el) {
|
||||
if (!refFormInput.value[newIndex]) {
|
||||
refFormInput.value[newIndex] = el;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function testVaildata(index, index1) {
|
||||
const newIndex = 1000 + index * 10000 + index1
|
||||
recharge.list[0].options[0].quanNumber = 1
|
||||
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange()
|
||||
}
|
||||
// 当表单内容输入变化根据配置的rules进行验证
|
||||
function inpuChange(index, index1) {
|
||||
const newIndex = 1000 + index * 10000 + index1
|
||||
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let emitName = ''
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
}
|
||||
}
|
||||
onLoad(opt => {
|
||||
const arr = uni.getStorageSync('guige')
|
||||
if (arr.length) {
|
||||
recharge.list = arr
|
||||
console.log(arr);
|
||||
}
|
||||
console.log(opt);
|
||||
if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
|
||||
emitName = opt.emitName
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function emitrechargeSave() {
|
||||
// emitrechargeSave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName, recharge.list)
|
||||
}
|
||||
|
||||
function returnPromise(index, prosise) {
|
||||
return new Promise((resolve, reject) => {
|
||||
prosise.then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
sucees: true
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
resolve({
|
||||
sucees: false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm = 0
|
||||
for (let i in recharge.list) {
|
||||
const res = await returnPromise(i, formRefs.value[i].validate())
|
||||
isAllPassForm += res.sucees ? 1 : 0
|
||||
}
|
||||
//判断验证是否通过
|
||||
if (isAllPassForm === recharge.list.length) {
|
||||
console.log('pass');
|
||||
emitrechargeSave()
|
||||
go.back()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
$icon-size: 34rpx;
|
||||
$icon-line-width: 20rpx;
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.my-switch {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item__error {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .option .uni-forms-item {
|
||||
padding: 0;
|
||||
min-height: inherit;
|
||||
background-color: transparent;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
||||
&:before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
background-color: $my-main-color;
|
||||
|
||||
&::before {
|
||||
width: $icon-line-height;
|
||||
height: $icon-line-width;
|
||||
top: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: 4rpx;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.icon-reduce {
|
||||
background-color: $my-red-color;
|
||||
|
||||
&::after {
|
||||
width: $icon-line-width;
|
||||
height: $icon-line-height;
|
||||
top: calc(($icon-size /2) - ($icon-line-height / 2));
|
||||
left: calc(($icon-size /2) - ($icon-line-width / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.label-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
.lh40 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 70rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn-box {
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
align-items: inherit;
|
||||
}
|
||||
|
||||
::v-deep .uni-forms-item .uni-forms-item__label {
|
||||
text-indent: 0;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
|
||||
::v-deep .uni-input-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
</style>
|
||||
79
pageUser/deposit-management/components/recharge-item.vue
Normal file
79
pageUser/deposit-management/components/recharge-item.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class=" item">
|
||||
<view class="u-flex ">
|
||||
<view class="color-333 u-flex font-bold ">
|
||||
<view class="u-font-40">{{to2(props.data.price) }}</view>
|
||||
<view>元</view>
|
||||
</view>
|
||||
<view class="u-font-24 u-m-l-20 color-999 id">
|
||||
id:{{props.data.id}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-p-22 desc">
|
||||
<text class="color-999">充值赠送</text>
|
||||
<text class="u-m-l-16 color-333">{{props.data.desc}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-right u-m-t-32 gap-20">
|
||||
<view class="" style="width: 140rpx;">
|
||||
<my-button plain height="56" type="cancel" shape="circle" @tap="del">删除</my-button>
|
||||
</view>
|
||||
<view class="" style="width: 140rpx;">
|
||||
<my-button height="56" shape="circle" @tap="toEdit">编辑</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
const props = defineProps({
|
||||
index:{
|
||||
type:Number,
|
||||
default:-1
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits=defineEmits(['del'])
|
||||
function del(){
|
||||
emits('del',{
|
||||
index:props.index,
|
||||
data:props.data
|
||||
})
|
||||
}
|
||||
function toEdit(){
|
||||
go.to('PAGES_USER_DEPOSIT_ADD_RECHARGE',{...props.data})
|
||||
}
|
||||
function to2(n) {
|
||||
return Number(n).toFixed(2)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.desc {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.id {
|
||||
background: #F7F7FA;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
padding: 4prx 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
pageUser/deposit-management/deposit-management.vue
Normal file
298
pageUser/deposit-management/deposit-management.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<view class="bg-gray min-page">
|
||||
<view class="bg-fff top">
|
||||
<view class="u-p-30">
|
||||
<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="tabsCurrent===0">
|
||||
<view class="u-p-30">
|
||||
<view class="u-flex bg-fff u-p-30 border-r-12" @tap="toAddRecharge">
|
||||
<view class="u-m-r-22 ">
|
||||
<my-icons type="add"></my-icons>
|
||||
</view>
|
||||
<view class="">添加充值面额</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-b-32" v-for="(item,index) in rechargeLists" :key="index">
|
||||
<recharge-item @del="rechargeItemDel" :index="index" :data="item"></recharge-item>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<template v-if="tabsCurrent===1">
|
||||
<view class="u-p-30">
|
||||
<view class="bg-fff u-p-30 border-r-12">
|
||||
<view>充值说明</view>
|
||||
<view class="u-p-30 border-r-12 border u-m-t-30">
|
||||
<view class="">
|
||||
<textarea placeholder="请填写充值说明"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bg-fff u-m-t-30 u-overflow-hide border-r-12 u-p-30 u-flex u-row-between">
|
||||
<view class="">充值前绑定手机</view>
|
||||
<view>
|
||||
<my-switch v-model="mustBindPhone"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-60" style="padding: 80rpx;">
|
||||
<my-button showShadow shape="circle">保存</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<template v-if="tabsCurrent===2">
|
||||
<view class="bg-fff">
|
||||
<view class="box-shadow u-relative">
|
||||
<view class="u-flex u-row-between u-p-30 u-relative">
|
||||
<view class="u-flex u-col-center" @tap="timeToggle">
|
||||
<text class="color-main">充值时间</text>
|
||||
<view class="icon-down u-m-l-6">
|
||||
<uni-icons type="right" :color="color.ColorMain" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-col-center" @tap="showStatusToggle">
|
||||
<text :class="{'color-main':nowStatusIndex>=1}">状态</text>
|
||||
<view class="icon-down u-m-l-6">
|
||||
<uni-icons type="right" :color="nowStatusIndex>=1 ? color.ColorMain:'#000'" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 164rpx;"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch" :style="{width:searchShow?'690rpx':'164rpx'}">
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
<view class="u-flex-1 u-p-l-10"><input v-model="keyword" @confirm="searchConfirm" type="text"
|
||||
placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
||||
<view @tap.stop="hideSearch" v-if="searchShow">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{height:showStatus?statusHeight:0}" class="tranistion status overflow-hide">
|
||||
<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in status" :key="index">
|
||||
<view>{{item}}</view>
|
||||
<uni-icons v-if="nowStatusIndex===index" type="checkmarkempty" :color="color.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{height: statusBootom+'px'}"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-p-30">
|
||||
<view class="time-area u-font-24 color-main u-flex">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
|
||||
<text class="u-p-l-10 u-p-r-10">至</text>
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-30">
|
||||
<view class="recoreds color-fff">
|
||||
<view class="u-font-32">数据统计</view>
|
||||
<view class="u-flex u-row-between u-m-t-48">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>充值总额</view>
|
||||
<view class="u-font-32 u-m-t-10">0.00</view>
|
||||
</view>
|
||||
<view style="margin-left: 240rpx;" class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>充值人次</view>
|
||||
<view class="u-font-32 u-m-t-10">0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-30">
|
||||
<view class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>退款总额</view>
|
||||
<view class="u-font-32 u-m-t-10">0.00</view>
|
||||
</view>
|
||||
<view style="margin-left: 240rpx;" class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>退款金额</view>
|
||||
<view class="u-font-32 u-m-t-10">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<my-model ref="model" :desc="modelData.desc"></my-model>
|
||||
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myTabs from '@/components/my-components/my-tabs.vue'
|
||||
import myIcons from '@/components/my-components/my-icons.vue'
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import rechargeItem from './components/recharge-item.vue'
|
||||
import color from '@/commons/color.js';
|
||||
import $util from '@/commons/utils/getDateArea.js';
|
||||
import go from '@/commons/utils/go.js';
|
||||
|
||||
const model=ref(null)
|
||||
const modelData=reactive({
|
||||
desc:''
|
||||
})
|
||||
function rechargeItemDel(e){
|
||||
modelData.desc=`确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`
|
||||
model.value.open()
|
||||
console.log(e);
|
||||
}
|
||||
function toAddRecharge(){
|
||||
go.to('PAGES_USER_DEPOSIT_ADD_RECHARGE')
|
||||
}
|
||||
|
||||
const rechargeLists=ref([
|
||||
{
|
||||
id:1,
|
||||
price:200,
|
||||
desc:'20.00元、2张券'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
price:500,
|
||||
desc:'60.00元、4张券'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
let mustBindPhone=ref(true)
|
||||
const nowDate=new Date()
|
||||
const filters=reactive({
|
||||
time:{
|
||||
start:$util.getDayArea(nowDate,'start'),
|
||||
end:$util.getDayArea(nowDate,'end')
|
||||
}
|
||||
})
|
||||
const tabsList = ['充值面额', '充值设置', '充值记录']
|
||||
let tabsCurrent = ref(2)
|
||||
|
||||
let showStatus=ref(false)
|
||||
function showStatusToggle(){
|
||||
showStatus.value=!showStatus.value
|
||||
}
|
||||
|
||||
const statusBootom=14
|
||||
const statusHeight= computed(()=>{
|
||||
return 30*status.length+statusBootom +'px'
|
||||
})
|
||||
|
||||
|
||||
let searchShow = ref(false)
|
||||
|
||||
function showSearch() {
|
||||
searchShow.value = true
|
||||
}
|
||||
const status = ['全部', '未支付', '支付成功']
|
||||
let nowStatusIndex = ref(0)
|
||||
function changeNowStatusIndex(i) {
|
||||
nowStatusIndex.value = i
|
||||
showStatus.value=false
|
||||
}
|
||||
function hideSearch() {
|
||||
searchShow.value = false
|
||||
}
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
tabsCurrent.value = i
|
||||
}
|
||||
|
||||
let keyword = ref('')
|
||||
|
||||
function searchConfirm(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
const datePicker=ref(null)
|
||||
function timeToggle(){
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
function datePickerConfirm(e){
|
||||
console.log(e);
|
||||
filters.time.start=e.start
|
||||
filters.time.end=e.end
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-overflow-hide{
|
||||
overflow: hidden;
|
||||
}
|
||||
.border{
|
||||
border: 1px solid #E5E5E5;
|
||||
}
|
||||
.border-r-12{
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.recoreds{
|
||||
background: linear-gradient( 127deg, #33A0FF 0%, #6699FF 100%);
|
||||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92,112,248,0.2);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||||
}
|
||||
.lh30 {
|
||||
line-height: 30px;
|
||||
}
|
||||
.status {
|
||||
position: absolute;top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
.input-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 0 5px #eee;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
|
||||
.search-btn {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.time-area{
|
||||
background: #E6F0FF;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
BIN
pageUser/index/components/men.png
Normal file
BIN
pageUser/index/components/men.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 B |
268
pageUser/index/components/user.vue
Normal file
268
pageUser/index/components/user.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view class=" goods">
|
||||
<view class="u-flex">
|
||||
<view class="u-flex u-col-top">
|
||||
<image v-if="data.headImg" :src="data.headImg" class="img"></image>
|
||||
<view class="img" v-else></view>
|
||||
</view>
|
||||
<view class="u-p-l-30 u-flex-1" style="position: relative;">
|
||||
<view class="u-flex">
|
||||
<view class="color-000 font-bold">{{data.nickName}}</view>
|
||||
<image style="width: 24rpx;height: 24rpx;" v-if="data.sex=='男'" src="./men.png" mode=""></image>
|
||||
<image style="width: 24rpx;height: 24rpx;" v-if="data.sex=='女'" src="./women.png" mode=""></image>
|
||||
<!-- <view class="color-999 u-m-l-40" @click="remark">备注</view> -->
|
||||
</view>
|
||||
<!-- <view class="u-m-t-6 u-flex u-row-between">
|
||||
<view class="vip isvip" v-if="data.isVip">会员</view>
|
||||
<view class=" vip noVip" v-else>非会员</view>
|
||||
<view class="color-main" @click="bindMoblie">绑定号码</view>
|
||||
</view> -->
|
||||
<view class="u-m-t-30 color-666 ">
|
||||
{{data.telephone||''}}
|
||||
</view>
|
||||
<view style="position: absolute;right: 0;top: 0;border-radius: 4rpx 4rpx 4rpx 4rpx;background: #EAF4FD;font-weight: 400;font-size: 20rpx;color: #318AFE;">
|
||||
会员等级{{data.isVip}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="info u-m-t-20 u-flex">
|
||||
<view class="u-flex-1 u-text-center" >
|
||||
<view class="font-bold color-000 pr-16" >{{data.amount}}</view>
|
||||
<view class="u-flex u-row-center" >
|
||||
<view class="color-999">余额</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center" >
|
||||
<view class="font-bold color-000 pr-16" >{{data.accountPoints}}</view>
|
||||
<view class="u-flex u-row-center" >
|
||||
<view class="color-999">积分</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center" >
|
||||
<view class="font-bold color-000 pr-16" >{{0}}</view>
|
||||
<view class="u-flex u-row-center" >
|
||||
<view class="color-999">优惠券</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="u-flex-1 u-text-center" @tap="toUser">
|
||||
<view class="font-bold color-000 pr-16">{{data.accountPoints}}</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="color-999">已消费</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="u-flex-1 u-text-center">
|
||||
<view class="font-bold color-000 pr-16">0</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="color-999">优惠券</view>
|
||||
<view class="u-flex">
|
||||
<uni-icons type="right" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center">
|
||||
<view class="font-bold color-000 ">0.00</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="color-999">已消费</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-24 u-flex u-row-between">
|
||||
<view></view>
|
||||
<view class="u-flex">
|
||||
<view class="btn-default btn" @click="toOrder">查看订单</view>
|
||||
<view class="btn-primary btn u-m-l-38" @click="moreOperate">更多操作</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {ColorMain} from '@/commons/color.js'
|
||||
const emits=defineEmits(['remark','bindMoblie','moreOperate'])
|
||||
const props = defineProps({
|
||||
index:{
|
||||
type:Number
|
||||
},
|
||||
data:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return{}
|
||||
}
|
||||
},
|
||||
showChecked:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
showDetail:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
function toUser(){
|
||||
go.to('PAGES_USER_INFO',{id:''})
|
||||
}
|
||||
function toYue(){
|
||||
go.to('PAGES_RECHARGE_INDEX',{id:''})
|
||||
}
|
||||
function toOrder(){
|
||||
go.to('PAGES_ORDER_INDEX',{
|
||||
userId:props.data.id||'',
|
||||
type:'user'
|
||||
})
|
||||
}
|
||||
|
||||
function remark(){
|
||||
console.log(props.index);
|
||||
emits('remark',props.index)
|
||||
}
|
||||
function bindMoblie(){
|
||||
emits('bindMoblie',props.index)
|
||||
}
|
||||
function moreOperate(){
|
||||
emits('moreOperate',props.index)
|
||||
}
|
||||
//携带参数type edit跳转到商品添加页面，编辑与添加同一页面，根据type值来判断
|
||||
function toEdit(){
|
||||
go.to('PAGES_PRODUCT_ADD',{type:'edit'})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$imgSize: 126rpx;
|
||||
$price-color: #F02C45;
|
||||
.isvip{
|
||||
color: $my-main-color;
|
||||
background-color: rgb(234, 244, 255);
|
||||
}
|
||||
.pr-16{
|
||||
padding-right: 16px;
|
||||
}
|
||||
.info{
|
||||
background-color: rgb(250, 250, 250);
|
||||
padding: 20rpx;
|
||||
}
|
||||
.vip{
|
||||
padding:2rpx 6rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.noVip{
|
||||
background-color: #F9F9F9;
|
||||
color: #999;
|
||||
}
|
||||
.btn{
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 100rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
.btn-primary{
|
||||
border-color: $my-main-color;;
|
||||
color: $my-main-color;
|
||||
}
|
||||
.btn-default{
|
||||
border-color: #F4F4F4;
|
||||
color: #666;
|
||||
}
|
||||
.price {
|
||||
color: $price-color;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: $imgSize;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: $imgSize;
|
||||
height: $imgSize;
|
||||
background-color: #eee;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.icon-arrow-right {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.stock {
|
||||
padding-right: 46rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stock::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
width: 16rpx;
|
||||
border: 2rpx solid #333333;
|
||||
}
|
||||
|
||||
.goods {
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 24rpx 28rpx 16rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
.skus{
|
||||
background: #F9F9F9;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 28rpx 42rpx;
|
||||
.sku{
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
padding: 6rpx 40rpx;
|
||||
}
|
||||
.skds{
|
||||
gap: 10rpx 50rpx;
|
||||
}
|
||||
.skd{
|
||||
padding: 14rpx 40rpx;
|
||||
background: #F0F2F5;
|
||||
border-radius: 4rpx;
|
||||
position: relative;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
.tag{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 12rpx;
|
||||
right: 0;
|
||||
padding: 2rpx 4rpx;
|
||||
border-radius: 0rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
.tag-primary{
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
pageUser/index/components/women.png
Normal file
BIN
pageUser/index/components/women.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
808
pageUser/index/index.vue
Normal file
808
pageUser/index/index.vue
Normal file
@@ -0,0 +1,808 @@
|
||||
<template>
|
||||
<view class="safe-page">
|
||||
<!-- <view class="bg-fff u-p-l-30 u-p-r-30 ">
|
||||
<view class="myTabs u-m-t-20">
|
||||
<my-tabs :list="tabsList" @change="tabsChange"></my-tabs>
|
||||
</view>
|
||||
|
||||
</view> -->
|
||||
|
||||
<!-- 用户列表 -->
|
||||
<template v-if="tabsCurrent===0">
|
||||
<view class="input-wrapper u-p-l-30 u-p-r-30 u-p-b-30 bg-fff">
|
||||
<view class="input-main">
|
||||
<uni-easyinput class='jeepay-search' :inputBorder="false" :placeholder="pageData.search.placeholder"
|
||||
v-model="pageData.search.value" @confirm="searchFunc">
|
||||
<template #prefixIcon>
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
<button type="text" @click="searchFunc()">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-30">
|
||||
<view class="data-statistics">
|
||||
<view class="u-font-32">数据统计</view>
|
||||
<view class="u-m-t-40 u-flex u-row-between">
|
||||
<view class=" ">
|
||||
<view>会员数</view>
|
||||
<view class="u-m-t-10 u-font-36 font-bold">{{pageData.allShopInfo.userTotal}}</view>
|
||||
</view>
|
||||
<view class="line-l-r u-p-l-30 u-p-r-30">
|
||||
<view>会员余额</view>
|
||||
<view class="u-m-t-10 u-font-36 font-bold">{{pageData.allShopInfo.balanceTotal}}</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view>充值金额</view>
|
||||
<view class="u-m-t-10 u-font-36 font-bold">{{pageData.allShopInfo.chageTotal}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-list u-p-l-30 u-p-r-30">
|
||||
<view class="u-m-b-32" v-for="(item,index) in pageData.userList" :key="index">
|
||||
<my-user @moreOperate="moreOperateClick" @remark="userRemarkClick" @bindMoblie="bindMoblieClick"
|
||||
:index="index" :data="item" :showChecked="showChecked"
|
||||
:showDetail="pageData.showGoodsDetail"></my-user>
|
||||
</view>
|
||||
<my-pagination @change="pageChange"></my-pagination>
|
||||
</view>
|
||||
<view class="fixed_b">
|
||||
<my-button showShadow @tap="toAddUser" shape="circle">新建用户</my-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 导入用户 -->
|
||||
<template v-else>
|
||||
<view class="u-p-30">
|
||||
<view class="data-statistics user-statistics">
|
||||
<view class="u-m-t-40 u-flex u-font-24 no-wrap">
|
||||
<view class="u-flex-1 after-r u-p-l-30 u-p-r-30">
|
||||
<view>已关联用户</view>
|
||||
<view class="u-m-t-20 u-font-36 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex-1 after-r u-p-l-30 u-p-r-30">
|
||||
<view>已关联余额（元）</view>
|
||||
<view class="u-m-t-20 u-font-36 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-30 u-p-r-30">
|
||||
<view>已关联积分</view>
|
||||
<view class="u-m-t-20 u-font-36 font-bold">0</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-40 u-flex u-font-24 no-wrap">
|
||||
<view class="u-flex-1 after-r u-p-l-30 u-p-r-30">
|
||||
<view>未关联用户</view>
|
||||
<view class="u-m-t-20 u-font-36 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex-1 after-r u-p-l-30 u-p-r-30">
|
||||
<view>未关联余额（元）</view>
|
||||
<view class="u-m-t-20 u-font-36 font-bold">0</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-p-l-30 u-p-r-30">
|
||||
<view>未关联积分</view>
|
||||
<view class="u-m-t-20 u-font-36 font-bold">27</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed_b">
|
||||
<my-button showShadow @tap="toAddUser" shape="circle">新建用户</my-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 备注弹窗 -->
|
||||
<my-model ref="remarkModel" title="修改备注">
|
||||
<template #desc>
|
||||
<view class="u-p-30 u-m-t-20">
|
||||
<uni-easyinput v-model="remarModelData.remark" placeholder="请输入备注"></uni-easyinput>
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-m-t-40 u-p-b-60" style="padding: 0 100rpx;">
|
||||
<my-button shape="circle" @tap="remarkModelConfirm">确定</my-button>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
<!-- 绑定手机号弹窗 -->
|
||||
<my-model ref="phoneModel" title="绑定手机号">
|
||||
<template #desc>
|
||||
<view class="u-p-30 u-m-t-20">
|
||||
<uni-easyinput v-model="phoneModelData.phone" placeholder="输入手机号码"></uni-easyinput>
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-m-t-40 u-p-b-60" style="padding: 0 100rpx;">
|
||||
<my-button shape="circle" @tap="phoneModelConfirm">确定</my-button>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
|
||||
<!-- 商品库存修改弹窗 -->
|
||||
<my-model ref="goodsStockModel" title="商品修改" @close="goodsStockModelClose">
|
||||
<template #desc>
|
||||
<view class="u-p-40 u-text-left">
|
||||
<view>
|
||||
<view class="">排序:</view>
|
||||
<view class="u-m-t-24">
|
||||
<uni-easyinput v-model="goodsStockData.sort" placeholder="请输入排序"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-32">
|
||||
<view class="">库存:</view>
|
||||
<view class="u-m-l-46 ">
|
||||
<my-switch v-model="goodsStockData.openStock"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24 u-m-t-32" v-if="goodsStockData.openStock">
|
||||
<view class="">数量:</view>
|
||||
<view class="u-m-t-24">
|
||||
<uni-easyinput v-model="goodsStockData.number" placeholder="请输入库存数量"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="stock-btns u-p-b-40">
|
||||
<my-button shape="circle" @click="goodsStockModelSave">保存</my-button>
|
||||
<my-button shape="circle" type="default" @click="goodsStockModelCancel">取消</my-button>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
|
||||
<my-action-sheet @itemClick="actionSheetClick" ref="moreOperate" :list="moreOperateList"></my-action-sheet>
|
||||
</view>
|
||||
<!-- 增减余额 -->
|
||||
<up-popup :show="datas.show" :round="18" mode="center" @close="close">
|
||||
<view class="zhezhaopop">
|
||||
<view class="">
|
||||
<span></span>
|
||||
<span>增减余额</span>
|
||||
<up-icon @tap="confirm" name="close-circle-fill"></up-icon>
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;padding: 24rpx;">
|
||||
<image v-if="datas.activeUser?datas.activeUser.headImg:''" :src="datas.activeUser.headImg"
|
||||
style="width: 52rpx;height: 52rpx;;background-color: #eee;"></image>
|
||||
<view style="width: 52rpx;height: 52rpx;;background-color: #eee;" v-else>
|
||||
</view>
|
||||
<view style="margin-left: 12rpx;">
|
||||
<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
|
||||
{{datas.activeUser?datas.activeUser.nickName:''}}
|
||||
</view>
|
||||
<view style="font-weight: 400;font-size: 24rpx;color: #999999;">
|
||||
当前余额:{{datas.activeUser?datas.activeUser.amount:''}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhezhaopopthree">
|
||||
<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
|
||||
增减
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'operationType')">
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="in" :checked="datas.form.operationType == 'in'" class="scale7" />
|
||||
<text>增加</text>
|
||||
</label>
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="out" :checked="datas.form.operationType == 'out'" class="scale7" />
|
||||
<text>扣除</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhezhaopopthree" v-if="datas.form.operationType=='in'">
|
||||
<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
|
||||
类型
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'type')">
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="inMoney" :checked="datas.form.type == 'inMoney'" class="scale7" />
|
||||
<text>充值</text>
|
||||
</label>
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="consumeIn" :checked="datas.form.type == 'consumeIn'" class="scale7" />
|
||||
<text>消费退款</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhezhaopopthree" v-else>
|
||||
<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
|
||||
类型
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'type')">
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="consumeOut" :checked="datas.form.type == 'consumeOut'" class="scale7" />
|
||||
<text>消费</text>
|
||||
</label>
|
||||
<label class="radio u-m-r-60">
|
||||
<radio value="inMoneyOut" :checked="datas.form.type == 'inMoneyOut'" class="scale7" />
|
||||
<text>充值退款</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhezhaopopfour">
|
||||
<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
|
||||
|
||||
</view>
|
||||
<view class="">
|
||||
<input type="number" v-model="datas.form.amount" placeholder="请输入金额" />
|
||||
<view class="">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<up-button text="确认" @tap="callTabletakeNumberEvent" type="primary" class="buttomStyle"
|
||||
shape="circle"></up-button>
|
||||
</view>
|
||||
</up-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myUser from './components/user.vue'
|
||||
import infoBox from "@/commons/utils/infoBox.js"
|
||||
import * as $Api from '@/http/yskApi/shop-user.js'
|
||||
import API from '../../http/classApi';
|
||||
import {
|
||||
onShow,
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
midfiyAccount
|
||||
} from '@/http/yskApi/requestAll.js';
|
||||
|
||||
import {
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
hasPermission
|
||||
} from '@/commons/utils/hasPermission.js';
|
||||
let tabsCurrent = ref(0)
|
||||
const tabsList = ['用户列表', '导入用户']
|
||||
const remarkModel = ref(null)
|
||||
const phoneModel = ref(null)
|
||||
const moreOperate = ref(null)
|
||||
let datas = reactive({
|
||||
show: false,
|
||||
form: {
|
||||
operationType: 'in',
|
||||
type: 'inMoney'
|
||||
},
|
||||
activeUser: null
|
||||
})
|
||||
let close = () => {
|
||||
datas.form = {
|
||||
operationType: 'in',
|
||||
type: 'inMoney'
|
||||
}
|
||||
}
|
||||
const confirm = () => {
|
||||
datas.show = false;
|
||||
};
|
||||
|
||||
function toAddUser() {
|
||||
go.to('PAGES_USER_ADD')
|
||||
}
|
||||
let callTabletakeNumberEvent = async () => {
|
||||
let res = await midfiyAccount({
|
||||
id: datas.activeUser.id,
|
||||
...datas.form
|
||||
})
|
||||
datas.show = false;
|
||||
close()
|
||||
getUser()
|
||||
}
|
||||
const remarModelData = reactive({
|
||||
remark: ''
|
||||
})
|
||||
const phoneModelData = reactive({
|
||||
phone: ''
|
||||
})
|
||||
|
||||
function sizeChange(e, name) {
|
||||
datas.form[name] = e.detail.value
|
||||
if (name == 'operationType') {
|
||||
if (datas.form.operationType == 'in') {
|
||||
datas.form.type = 'inMoney'
|
||||
} else {
|
||||
datas.form.type = 'consumeOut'
|
||||
}
|
||||
}
|
||||
}
|
||||
const goodsStockModel = ref(null)
|
||||
|
||||
const moreOperateList = ['增减余额', '修改信息', ]
|
||||
|
||||
function moreOperateClick(d) {
|
||||
datas.activeUser = pageData.userList[d]
|
||||
moreOperate.value.open()
|
||||
}
|
||||
|
||||
|
||||
onReachBottom(() => {
|
||||
++page.value
|
||||
getUser()
|
||||
});
|
||||
|
||||
|
||||
function actionSheetClick(i) {
|
||||
if (i == 0) {
|
||||
hasPermission('允许修改会员余额').then(ele => {
|
||||
if (ele) {
|
||||
datas.show = true
|
||||
}
|
||||
})
|
||||
} else if (i == 1) {
|
||||
hasPermission('允许管理会员信息').then(ele => {
|
||||
if (ele) {
|
||||
go.to('PAGES_USER_ADD', datas.activeUser)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//修改备注弹窗展示
|
||||
function bindMoblieClick() {
|
||||
phoneModel.value.open()
|
||||
}
|
||||
//修改备注弹窗展示
|
||||
function userRemarkClick() {
|
||||
remarkModel.value.open()
|
||||
}
|
||||
|
||||
//修改备注弹窗确认
|
||||
function remarkModelConfirm() {
|
||||
|
||||
}
|
||||
|
||||
//修改手机号弹窗确认
|
||||
function phoneModelConfirm() {
|
||||
|
||||
}
|
||||
|
||||
function returnGoodsStockData() {
|
||||
return reactive({
|
||||
sort: 0,
|
||||
openStock: false,
|
||||
number: 0,
|
||||
})
|
||||
}
|
||||
let goodsStockData = returnGoodsStockData()
|
||||
|
||||
function goodsStockModelClose() {
|
||||
console.log('goodsStockModelClose');
|
||||
goodsStockData = returnGoodsStockData()
|
||||
}
|
||||
|
||||
function goodsStockModelCancel() {
|
||||
console.log('goodsStockModelCancel');
|
||||
goodsStockModel.value.close()
|
||||
}
|
||||
|
||||
function goodsStockModelSave() {
|
||||
console.log('goodsStockModelSave');
|
||||
}
|
||||
|
||||
|
||||
|
||||
//点击修改按钮弹出修改商品弹窗
|
||||
function goodsChangeClick(index) {
|
||||
console.log(index);
|
||||
goodsStockModel.value.open()
|
||||
}
|
||||
|
||||
function statesTableClick(index) {
|
||||
pageData.stateCurrent = index
|
||||
}
|
||||
|
||||
function states1TableClick(index) {
|
||||
pageData.stateCurrent1 = index
|
||||
}
|
||||
|
||||
let test = ref(false)
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
tabsCurrent.value = i
|
||||
}
|
||||
|
||||
const pageData = reactive({
|
||||
modelDesc: '是否下架',
|
||||
stateCurrent: 0,
|
||||
stateCurrent1: 0,
|
||||
componentBottom: 264,
|
||||
search: {
|
||||
value: '',
|
||||
placeholder: '搜索昵称、手机号码'
|
||||
},
|
||||
showGoodsDetail: false,
|
||||
userList: [],
|
||||
allShopInfo: {
|
||||
balanceTotal: 0,
|
||||
chageTotal: 0,
|
||||
userTotal: 0
|
||||
}
|
||||
})
|
||||
//改变商品的选中状态
|
||||
function changeGoodsChecked(checked, index) {
|
||||
if (index !== undefined) {
|
||||
pageData.userList[index].checked = checked
|
||||
} else {
|
||||
pageData.userList.map(v => {
|
||||
v.checked = checked
|
||||
})
|
||||
}
|
||||
control.value.setisSelectAll(isAllChecked() ? true : false)
|
||||
}
|
||||
|
||||
|
||||
// 获取已经选中的商品
|
||||
function getChechkeduserList() {
|
||||
return pageData.userList.filter(v => v.checked)
|
||||
}
|
||||
//是否全部选中
|
||||
function isAllChecked() {
|
||||
return getChechkeduserList().length === pageData.userList.length
|
||||
}
|
||||
// 是否有商品选中
|
||||
function isHasChekdGoods() {
|
||||
return getChechkeduserList().length ? true : false
|
||||
}
|
||||
|
||||
function searchFunc() {
|
||||
page.value = 0
|
||||
getUser()
|
||||
}
|
||||
|
||||
let showChecked = ref(false)
|
||||
|
||||
//商品start
|
||||
|
||||
function goodsRadioClick(index) {
|
||||
var checked = !pageData.userList[index].checked
|
||||
changeGoodsChecked(checked, index)
|
||||
}
|
||||
|
||||
|
||||
//下架
|
||||
function offShelf() {
|
||||
const hasCheckedArr = getChechkeduserList()
|
||||
const hasChecked = isHasChekdGoods()
|
||||
if (!hasChecked) {
|
||||
return infoBox.showToast('您还没有选中商品！')
|
||||
}
|
||||
model.value.open()
|
||||
}
|
||||
//商品end
|
||||
|
||||
// 页数改变事件
|
||||
function pageChange(page) {
|
||||
console.log(page);
|
||||
}
|
||||
|
||||
//分类
|
||||
const category = ref(null)
|
||||
|
||||
function toggleCategory() {
|
||||
category.value.toggle()
|
||||
}
|
||||
|
||||
function cateClick(cate) {
|
||||
console.log(cate);
|
||||
}
|
||||
let page = ref(0)
|
||||
async function getUser() {
|
||||
const {
|
||||
content
|
||||
} = await $Api.queryAllShopUser({
|
||||
isVip: 1,
|
||||
size: 10,
|
||||
page: page.value,
|
||||
name: pageData.search.value
|
||||
})
|
||||
if (page.value == 0) {
|
||||
pageData.userList = content
|
||||
} else {
|
||||
pageData.userList.push(...content)
|
||||
|
||||
}
|
||||
}
|
||||
async function getAllShopInfo() {
|
||||
const res = await $Api.queryAllShopInfo()
|
||||
pageData.allShopInfo = res
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
getUser()
|
||||
getAllShopInfo()
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.after-r,
|
||||
.after-l {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.line-l-r {
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.after-r::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: -40rpx;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.data-statistics {
|
||||
background-color: $my-main-color;
|
||||
padding: 30rpx 30rpx 60rpx 40rpx;
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.user-statistics {
|
||||
padding: 30rpx 0 60rpx 0;
|
||||
|
||||
.after-r::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.u-flex-1 {}
|
||||
}
|
||||
|
||||
.stock-btns {
|
||||
padding: 0 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.safe-page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.icon-guige {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.bg-fff {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.myTabs {
|
||||
margin: 0 auto;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 26rpx;
|
||||
background-color: $J-bg-ff;
|
||||
|
||||
.input-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
|
||||
image {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
::v-deep uni-button {
|
||||
font-size: 28rpx;
|
||||
color: $my-main-color;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
::v-deep.uni-easyinput {
|
||||
.uni-easyinput__content {
|
||||
background-color: $J-bg-f5 !important;
|
||||
border-radius: $J-b-r12;
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
padding-left: 0 !important;
|
||||
|
||||
.uni-input-input {
|
||||
border-radius: $J-b-r12 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-input-placeholder {
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
color: rgba(230, 230, 230, 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zhezhaopop {
|
||||
padding: 34rpx 32rpx;
|
||||
width: 594rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
>view:first-child {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
>span:nth-child(2) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
margin: 48rpx auto;
|
||||
width: 492rpx;
|
||||
height: 124rpx;
|
||||
background: #FAFAFA;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.zhezhaopopthree {
|
||||
>view:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
|
||||
>view {
|
||||
width: 186rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.selectvalue {
|
||||
color: #318AFE;
|
||||
border: 2rpx solid #318AFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zhezhaopopfour {
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
>view:nth-child(2) {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>input {
|
||||
width: 372rpx;
|
||||
height: 84rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 0rpx 0rpx 8rpx;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
>view {
|
||||
width: 124rpx;
|
||||
height: 86rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
background: #F7F7FA;
|
||||
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttomStyle {
|
||||
margin-top: 48rpx;
|
||||
width: 506rpx;
|
||||
height: 80rpx;
|
||||
/*#ifdef MP*/
|
||||
padding-top: 48rpx;
|
||||
/*#endif*/
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: transparent !important;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.states1 {
|
||||
margin-top: 78rpx;
|
||||
|
||||
.item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-right: 70rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
background: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed_b {
|
||||
left: 90rpx;
|
||||
right: 90rpx;
|
||||
position: fixed;
|
||||
bottom: calc(70rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
</style>
|
||||
448
pageUser/user-info/components/my-date-pickerview.vue
Normal file
448
pageUser/user-info/components/my-date-pickerview.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<view class="mask" v-if="show" @tap="close">
|
||||
<view class="box" @tap.stop="nullFunction">
|
||||
<view class="u-flex u-relative u-row-center u-p-30 top">
|
||||
<view class="font-bold u-font-32">筛选日期时间</view>
|
||||
<view class="close" @tap="close">
|
||||
<uni-icons type="closeempty" size="24"></uni-icons>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-p-30 u-flex u-flex-wrap gap-20 fastTime">
|
||||
<view class="item" v-for="(item,index) in fastTime" :key="index" @tap="changeTime(item.key)">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<picker-view :immediate-change="true" @pickend="pickend" :value="value" @change="bindChange"
|
||||
class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view class="u-text-center color-999">至</view>
|
||||
<picker-view :immediate-change="true" :value="value1" @pickend="pickend1" @change="bindChange1"
|
||||
class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days1" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
|
||||
<!-- 站位 -->
|
||||
<view style="height: 80px;"></view>
|
||||
<view class="fixed_b">
|
||||
<my-button shape="circle" @tap="confirm">确定</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import myButton from "@/components/my-components/my-button.vue"
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
const $nowDate = new Date()
|
||||
const nowDate = {
|
||||
year: $nowDate.getFullYear(),
|
||||
month: $nowDate.getMonth() + 1,
|
||||
day: $nowDate.getDate(),
|
||||
hours: $nowDate.getHours(),
|
||||
minutes: $nowDate.getMinutes(),
|
||||
seconds: $nowDate.getSeconds()
|
||||
}
|
||||
const yearsLen = 30
|
||||
const years = new Array(yearsLen).fill(1).map((v, index) => {
|
||||
return nowDate.year - index
|
||||
}).reverse()
|
||||
const months = new Array(12).fill(1).map((v, index) => {
|
||||
return index + 1
|
||||
})
|
||||
const days = ref(new Array(getMonthArea($nowDate, 'end').getDate()).fill(1).map((v, index) => {
|
||||
return index + 1
|
||||
}))
|
||||
const days1 = ref(new Array(getMonthArea($nowDate, 'end').getDate()).fill(1).map((v, index) => {
|
||||
return index + 1
|
||||
}))
|
||||
const hours = new Array(24).fill(1).map((v, index) => {
|
||||
return index
|
||||
})
|
||||
const minutes = new Array(60).fill(1).map((v, index) => {
|
||||
return index
|
||||
})
|
||||
const seconds = new Array(60).fill(1).map((v, index) => {
|
||||
return index
|
||||
})
|
||||
const fastTime = reactive([{
|
||||
title: '今日',
|
||||
key: 'now'
|
||||
},
|
||||
{
|
||||
title: '昨日',
|
||||
key: 'prve'
|
||||
},
|
||||
{
|
||||
title: '本月',
|
||||
key: 'nowMonth'
|
||||
},
|
||||
{
|
||||
title: '上月',
|
||||
key: 'prveMonth'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
function setPrveDay() {
|
||||
|
||||
}
|
||||
|
||||
function setNowMoneth() {
|
||||
|
||||
}
|
||||
|
||||
function setprveMoneth() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
function setDay(start, end) {
|
||||
value.value = [
|
||||
start.year,
|
||||
start.month,
|
||||
start.day,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
]
|
||||
value1.value = [
|
||||
end.year,
|
||||
end.month,
|
||||
end.day,
|
||||
23,
|
||||
59,
|
||||
59,
|
||||
]
|
||||
}
|
||||
|
||||
function changeTime(key) {
|
||||
const yearIndex = years.findIndex(v => v == nowDate.year)
|
||||
const prveyearIndex = years.findIndex(v => v == nowDate.year) - 1
|
||||
const nowMonthIndex = nowDate.month - 1
|
||||
const nowDayIndex = nowDate.day - 1
|
||||
const dataMap = {
|
||||
now: function() {
|
||||
return {
|
||||
start: {
|
||||
year: yearIndex,
|
||||
month: nowMonthIndex,
|
||||
day: nowDayIndex
|
||||
},
|
||||
end: {
|
||||
year: yearIndex,
|
||||
month: nowMonthIndex,
|
||||
day: nowDayIndex
|
||||
}
|
||||
}
|
||||
},
|
||||
prve: function() {
|
||||
const oneDay=1000*60*60*24
|
||||
const date=new Date(new Date(nowDate.year,nowDate.month,nowDate.day,0,0,0).getTime()-oneDay)
|
||||
return {
|
||||
start: {
|
||||
year:years.findIndex(v=>v==date.getFullYear()),
|
||||
month:date.getMonth()-1<0?11:date.getMonth()-1,
|
||||
day: date.getDate()-1
|
||||
},
|
||||
end: {
|
||||
year:years.findIndex(v=>v==date.getFullYear()),
|
||||
month:date.getMonth()-1<0?11:date.getMonth()-1,
|
||||
day: date.getDate()-1
|
||||
}
|
||||
}
|
||||
},
|
||||
nowMonth: function() {
|
||||
return {
|
||||
start: {
|
||||
year:yearIndex,
|
||||
month:nowMonthIndex,
|
||||
day: 0
|
||||
},
|
||||
end: {
|
||||
year:yearIndex,
|
||||
month:nowMonthIndex,
|
||||
day:new Date(nowDate.year, nowDate.month , 0).getDate() - 1
|
||||
}
|
||||
}
|
||||
},
|
||||
prveMonth: function() {
|
||||
const oneDay=1000*60*60*24
|
||||
const date=new Date(new Date(nowDate.year, nowDate.month-1,0,0,0).getTime()-oneDay)
|
||||
console.log(date.getMonth());
|
||||
return {
|
||||
start: {
|
||||
year:years.findIndex(v=>v==date.getFullYear()),
|
||||
month:date.getMonth(),
|
||||
day: 0
|
||||
},
|
||||
end: {
|
||||
year:years.findIndex(v=>v==date.getFullYear()),
|
||||
month:date.getMonth(),
|
||||
day: date.getDate()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const data = dataMap[key]()
|
||||
setDay(data.start, data.end)
|
||||
changeDays(false,value.value)
|
||||
changeDays(true,value1.value)
|
||||
|
||||
console.log(value1.value);
|
||||
const start = returnDateString(value.value)
|
||||
const end = returnDateString(value1.value)
|
||||
|
||||
emits('confirm', {
|
||||
text: `${start}——${end}`,
|
||||
start,
|
||||
end
|
||||
})
|
||||
close()
|
||||
}
|
||||
let value = ref([
|
||||
years.length - 1,
|
||||
nowDate.month - 1,
|
||||
nowDate.day - 1,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
])
|
||||
let value1 = ref([
|
||||
years.length - 1,
|
||||
nowDate.month - 1,
|
||||
nowDate.day - 1,
|
||||
23,
|
||||
59,
|
||||
59,
|
||||
])
|
||||
|
||||
let show = ref(false)
|
||||
const emits = defineEmits('close', 'open', 'confirm')
|
||||
|
||||
function toggle() {
|
||||
show.value = !show.value
|
||||
if (show.value) {
|
||||
emits('open', true)
|
||||
} else {
|
||||
emits('close', false)
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
emits('close', false)
|
||||
}
|
||||
|
||||
function open() {
|
||||
show.value = true
|
||||
emits('open', true)
|
||||
}
|
||||
|
||||
function returnDateString(arr) {
|
||||
const year = years[arr[0]]
|
||||
const month = arr[1] + 1
|
||||
const day = arr[2] + 1
|
||||
const hour = ('0' + arr[3]).slice(-2)
|
||||
const min = ('0' + arr[4]).slice(-2)
|
||||
const sen = ('0' + arr[5]).slice(-2)
|
||||
return `${year}-${month}-${day} ${hour}:${min}:${sen}`
|
||||
}
|
||||
|
||||
|
||||
function confirm(e) {
|
||||
const start = returnDateString(value.value)
|
||||
const end = returnDateString(value1.value)
|
||||
console.log(start);
|
||||
console.log(end);
|
||||
emits('confirm', {
|
||||
text: `${start}——${end}`,
|
||||
start,
|
||||
end
|
||||
})
|
||||
close()
|
||||
}
|
||||
|
||||
function returnMonthStart(arr) {
|
||||
return new Date(years[arr[0]], months[arr[1]] - 1, 1).getDate();
|
||||
}
|
||||
|
||||
function returnMonthEnd(arr) {
|
||||
return new Date(years[arr[0]], months[arr[1]], 0).getDate();
|
||||
}
|
||||
|
||||
function changeDays(isDays1,arr){
|
||||
const end = returnMonthEnd(arr)
|
||||
if (end) {
|
||||
if(isDays1){
|
||||
days1.value= new Array(end).fill(1).map((v,
|
||||
index) => {
|
||||
return index + 1
|
||||
})
|
||||
}else{
|
||||
days.value= new Array(end).fill(1).map((v,
|
||||
index) => {
|
||||
return index + 1
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function bindChange(e) {
|
||||
value.value = e.detail.value
|
||||
changeDays(false, e.detail.value)
|
||||
}
|
||||
|
||||
function bindChange1(e) {
|
||||
value1.value = e.detail.value
|
||||
changeDays(true, e.detail.value)
|
||||
}
|
||||
|
||||
function getDayDate(date = new Date(), type) {
|
||||
const now = date
|
||||
if (type === 'start') {
|
||||
const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
return startOfDay
|
||||
}
|
||||
if (type === 'end') {
|
||||
const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
|
||||
return endOfDay;
|
||||
}
|
||||
}
|
||||
|
||||
function getMonthArea(date = new Date(), type) {
|
||||
let now = date
|
||||
let currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
let currentMonthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59, 999);
|
||||
if (type === 'start') {
|
||||
return currentMonthStart
|
||||
}
|
||||
if (type === 'end') {
|
||||
return currentMonthEnd;
|
||||
}
|
||||
return {
|
||||
start: currentMonthStart,
|
||||
end: currentMonthEnd
|
||||
};
|
||||
}
|
||||
|
||||
function nullFunction() {
|
||||
|
||||
}
|
||||
|
||||
function pickend(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function pickend1(e) {
|
||||
console.log(e);
|
||||
}
|
||||
defineExpose({
|
||||
close,
|
||||
open,
|
||||
confirm,
|
||||
toggle
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fastTime {
|
||||
.item {
|
||||
background-color: rgb(247, 247, 247);
|
||||
padding: 6rpx 40rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed_b {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
z-index: 100;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
width: 750rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
79
pageUser/user-info/components/recharge-item.vue
Normal file
79
pageUser/user-info/components/recharge-item.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<view class=" item">
|
||||
<view class="u-flex ">
|
||||
<view class="color-333 u-flex font-bold ">
|
||||
<view class="u-font-40">{{to2(props.data.price) }}</view>
|
||||
<view>元</view>
|
||||
</view>
|
||||
<view class="u-font-24 u-m-l-20 color-999 id">
|
||||
id:{{props.data.id}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-p-22 desc">
|
||||
<text class="color-999">充值赠送</text>
|
||||
<text class="u-m-l-16 color-333">{{props.data.desc}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-right u-m-t-32 gap-20">
|
||||
<view class="" style="width: 140rpx;">
|
||||
<my-button plain height="56" type="cancel" shape="circle" @tap="del">删除</my-button>
|
||||
</view>
|
||||
<view class="" style="width: 140rpx;">
|
||||
<my-button height="56" shape="circle" @tap="toEdit">编辑</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
const props = defineProps({
|
||||
index:{
|
||||
type:Number,
|
||||
default:-1
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
const emits=defineEmits(['del'])
|
||||
function del(){
|
||||
emits('del',{
|
||||
index:props.index,
|
||||
data:props.data
|
||||
})
|
||||
}
|
||||
function toEdit(){
|
||||
go.to('PAGES_USER_DEPOSIT_ADD_RECHARGE',{...props.data})
|
||||
}
|
||||
function to2(n) {
|
||||
return Number(n).toFixed(2)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.desc {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.id {
|
||||
background: #F7F7FA;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
padding: 4prx 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
pageUser/user-info/user-info.vue
Normal file
250
pageUser/user-info/user-info.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="bg-gray min-page u-p-30">
|
||||
<view class=" u-p-30 top bg-fff">
|
||||
<view class=" u-flex u-col-top ">
|
||||
<view class="u-flex">
|
||||
<image src="@/static/uni.png" class="logo" mode=""></image>
|
||||
</view>
|
||||
<view class="u-p-l-30">
|
||||
<view class="font-bold">未授权</view>
|
||||
<view class="u-m-t-10 color-999 u-font-24">非会员</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-30 u-row-between u-p-t-30 border-top">
|
||||
<view><text class="color-666">余额：</text><text class="font-bold">0.00</text></view>
|
||||
<view><text class="color-666">积分：</text><text class="font-bold">0.00</text></view>
|
||||
<view><text class="color-666">优惠券：</text><text class="font-bold">0.00</text></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bg-fff u-p-30 u-m-t-30">
|
||||
<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
|
||||
<template v-if="tabsCurrent===0">
|
||||
<view class="u-m-t-30">
|
||||
<uni-steps :options="guiji.list" :active-color="color.ColorMain" :active="guiji.active"
|
||||
direction="column" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="tabsCurrent===1">
|
||||
|
||||
|
||||
</template>
|
||||
<template v-if="tabsCurrent===2">
|
||||
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myTabs from '@/components/my-components/my-tabs.vue'
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import color from '@/commons/color.js';
|
||||
import $util from '@/commons/utils/getDateArea.js';
|
||||
import go from '@/commons/utils/go.js';
|
||||
|
||||
const guiji = reactive({
|
||||
list: [{
|
||||
title: '买家下单',
|
||||
desc: '2018-11-11'
|
||||
}, {
|
||||
title: '卖家发货',
|
||||
desc: '2018-11-12'
|
||||
}, {
|
||||
title: '买家签收',
|
||||
desc: '2018-11-13'
|
||||
}, {
|
||||
title: '交易完成',
|
||||
desc: '2018-11-14'
|
||||
}],
|
||||
active: 0
|
||||
})
|
||||
|
||||
function rechargeItemDel(e) {
|
||||
modelData.desc = `确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`
|
||||
model.value.open()
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
function toAddRecharge() {
|
||||
go.to('PAGES_USER_DEPOSIT_ADD_RECHARGE')
|
||||
}
|
||||
|
||||
const rechargeLists = ref([{
|
||||
id: 1,
|
||||
price: 200,
|
||||
desc: '20.00元、2张券'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
price: 500,
|
||||
desc: '60.00元、4张券'
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
let mustBindPhone = ref(true)
|
||||
const nowDate = new Date()
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: $util.getDayArea(nowDate, 'start'),
|
||||
end: $util.getDayArea(nowDate, 'end')
|
||||
}
|
||||
})
|
||||
const tabsList = ['用户轨迹', '余额记录', '积分记录']
|
||||
let tabsCurrent = ref(2)
|
||||
|
||||
let showStatus = ref(false)
|
||||
|
||||
function showStatusToggle() {
|
||||
showStatus.value = !showStatus.value
|
||||
}
|
||||
|
||||
const statusBootom = 14
|
||||
const statusHeight = computed(() => {
|
||||
return 30 * status.length + statusBootom + 'px'
|
||||
})
|
||||
|
||||
|
||||
let searchShow = ref(false)
|
||||
|
||||
function showSearch() {
|
||||
searchShow.value = true
|
||||
}
|
||||
const status = ['全部', '未支付', '支付成功']
|
||||
let nowStatusIndex = ref(0)
|
||||
|
||||
function changeNowStatusIndex(i) {
|
||||
nowStatusIndex.value = i
|
||||
showStatus.value = false
|
||||
}
|
||||
|
||||
function hideSearch() {
|
||||
searchShow.value = false
|
||||
}
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
tabsCurrent.value = i
|
||||
}
|
||||
|
||||
let keyword = ref('')
|
||||
|
||||
function searchConfirm(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
const datePicker = ref(null)
|
||||
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start = e.start
|
||||
filters.time.end = e.end
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border-top {
|
||||
border-top: 1px solid rgb(247, 247, 247);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.u-overflow-hide {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.border-r-12 {
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.recoreds {
|
||||
background: linear-gradient(127deg, #33A0FF 0%, #6699FF 100%);
|
||||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||||
}
|
||||
|
||||
.lh30 {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.box-shadow {
|
||||
box-shadow: 0 0 5px #eee;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background-color: #fff;
|
||||
padding: 16rpx 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
display: flex;
|
||||
|
||||
.search-btn {
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.time-area {
|
||||
background: #E6F0FF;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
transform: rotate(90deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .uni-steps__column-title{
|
||||
font-size: 12px;
|
||||
}
|
||||
::v-deep .uni-steps__column-desc{
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user