发布v1.0.3
This commit is contained in:
kele
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
|
||||
<uni-forms
|
||||
ref="addressFormRef"
|
||||
v-model="state.model"
|
||||
:rules="state.rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="left"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<view class="bg-white form-box ss-p-x-30">
|
||||
<uni-forms-item name="consignee" label="收货人" class="form-item">
|
||||
<uni-easyinput
|
||||
v-model="state.model.consignee"
|
||||
placeholder="请填写收货人姓名"
|
||||
:inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="mobile" label="手机号" class="form-item">
|
||||
<uni-easyinput
|
||||
v-model="state.model.mobile"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
:inputBorder="false"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
name="region"
|
||||
label="省市区"
|
||||
@tap="state.showRegion = true"
|
||||
class="form-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
v-model="state.model.region"
|
||||
disabled
|
||||
:inputBorder="false"
|
||||
:styles="{ disableColor: '#fff', color: '#333' }"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请选择省市区"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
name="address"
|
||||
label="详细地址"
|
||||
:formItemStyle="{ alignItems: 'flex-start' }"
|
||||
:labelStyle="{ lineHeight: '5em' }"
|
||||
class="textarea-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
v-model="state.model.address"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请输入详细地址"
|
||||
clearable
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
|
||||
<view class="default-box-title"> 设为默认地址 </view>
|
||||
<su-switch style="transform: scale(0.8)" v-model="state.model.is_default"></su-switch>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
|
||||
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
|
||||
<view class="ss-m-b-20"
|
||||
><button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button></view
|
||||
>
|
||||
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
|
||||
删除
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<!-- 省市区弹窗 -->
|
||||
<su-region-picker
|
||||
:show="state.showRegion"
|
||||
@cancel="state.showRegion = false"
|
||||
@confirm="onRegionConfirm"
|
||||
>
|
||||
</su-region-picker>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, ref, reactive, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import { consignee, mobile, address, region } from '@/sheep/validate/form';
|
||||
|
||||
const addressFormRef = ref(null);
|
||||
const state = reactive({
|
||||
showRegion: false,
|
||||
model: {
|
||||
consignee: '',
|
||||
mobile: '',
|
||||
address: '',
|
||||
is_default: false,
|
||||
region: '',
|
||||
},
|
||||
rules: {
|
||||
consignee,
|
||||
mobile,
|
||||
address,
|
||||
region,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => state.model.province_name,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
state.model.region = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
const onRegionConfirm = (e) => {
|
||||
state.model = {
|
||||
...state.model,
|
||||
...e,
|
||||
};
|
||||
state.showRegion = false;
|
||||
};
|
||||
const getAreaData = () => {
|
||||
if (_.isEmpty(uni.getStorageSync('areaData'))) {
|
||||
sheep.$api.data.area().then((res) => {
|
||||
if (res.error === 0) {
|
||||
uni.setStorageSync('areaData', res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
const onSave = async () => {
|
||||
const validate = await unref(addressFormRef)
|
||||
.validate()
|
||||
.catch((error) => {
|
||||
console.log('error: ', error);
|
||||
});
|
||||
if (!validate) return;
|
||||
|
||||
let res = null;
|
||||
if (state.model.id) {
|
||||
res = await sheep.$api.user.address.update(state.model.id, state.model);
|
||||
} else {
|
||||
res = await sheep.$api.user.address.create(state.model);
|
||||
}
|
||||
if (res.error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
};
|
||||
|
||||
const onDelete = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除此收货地址吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.user.address.delete(state.model.id);
|
||||
if (res.error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
onLoad(async (options) => {
|
||||
getAreaData();
|
||||
if (options.id) {
|
||||
let res = await sheep.$api.user.address.detail(options.id);
|
||||
if (res.error === 0) {
|
||||
state.model = {
|
||||
...state.model,
|
||||
...res.data,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (options.data) {
|
||||
let data = JSON.parse(options.data);
|
||||
state.model = {
|
||||
...state.model,
|
||||
...data,
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-forms-item__label .label-text {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-textarea {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
margin-top: 8rpx !important;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.is-textarea-icon {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.default-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 100rpx;
|
||||
|
||||
.default-box-title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: var(--ui-BG);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<s-layout title="收货地址" :bgStyle="{ color: '#FFF' }">
|
||||
<view v-if="state.list.length">
|
||||
<s-address-item
|
||||
hasBorderBottom
|
||||
v-for="item in state.list"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@tap="onSelect(item)"
|
||||
>
|
||||
</s-address-item>
|
||||
</view>
|
||||
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="footer-box ss-flex ss-row-between ss-p-20">
|
||||
<!-- 微信小程序和微信H5 -->
|
||||
<button
|
||||
v-if="['WechatMiniProgram', 'WechatOfficialAccount'].includes(sheep.$platform.name)"
|
||||
@tap="importWechatAddress"
|
||||
class="border ss-reset-button sync-wxaddress ss-m-20 ss-flex ss-row-center ss-col-center"
|
||||
>
|
||||
<text class="cicon-weixin ss-p-r-10" style="color: #09bb07; font-size: 40rpx"></text>
|
||||
导入微信地址
|
||||
</button>
|
||||
<button
|
||||
class="add-btn ss-reset-button ui-Shadow-Main"
|
||||
@tap="sheep.$router.go('/pages/user/address/edit')"
|
||||
>
|
||||
新增收货地址
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<s-empty
|
||||
v-if="state.list.length === 0 && !state.loading"
|
||||
text="暂无收货地址"
|
||||
icon="/static/data-empty.png"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onBeforeMount } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty } from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: true,
|
||||
});
|
||||
|
||||
// 选择收货地址， 有h5端需返回两次的bug
|
||||
const onSelect = (addressInfo) => {
|
||||
// const pages = sheep.$router.getCur();
|
||||
// const lastPage = pages[pages.length - 2];
|
||||
// if (!_.isEmpty(lastPage) && lastPage.route === "pages/order/confirm") {
|
||||
// sheep.$router.back();
|
||||
// uni.navigateBack();
|
||||
uni.$emit('SELECT_ADDRESS', {
|
||||
addressInfo,
|
||||
});
|
||||
sheep.$router.back();
|
||||
// }
|
||||
};
|
||||
|
||||
// 导入微信地址
|
||||
function importWechatAddress() {
|
||||
let wechatAddress = {};
|
||||
// #ifdef MP
|
||||
uni.chooseAddress({
|
||||
success: (res) => {
|
||||
wechatAddress = {
|
||||
consignee: res.userName,
|
||||
mobile: res.telNumber,
|
||||
province_name: res.provinceName,
|
||||
city_name: res.cityName,
|
||||
district_name: res.countyName,
|
||||
address: res.detailInfo,
|
||||
region: '',
|
||||
is_default: false,
|
||||
};
|
||||
if (!isEmpty(wechatAddress)) {
|
||||
sheep.$router.go('/pages/user/address/edit', {
|
||||
data: JSON.stringify(wechatAddress),
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
sheep.$platform.useProvider('wechat').jssdk.openAddress({
|
||||
success: (res) => {
|
||||
wechatAddress = {
|
||||
consignee: res.userName,
|
||||
mobile: res.telNumber,
|
||||
province_name: res.provinceName,
|
||||
city_name: res.cityName,
|
||||
district_name: res.countryName,
|
||||
address: res.detailInfo,
|
||||
region: '',
|
||||
is_default: false,
|
||||
};
|
||||
if (!isEmpty(wechatAddress)) {
|
||||
sheep.$router.go('/pages/user/address/edit', {
|
||||
data: JSON.stringify(wechatAddress),
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
onShow(async () => {
|
||||
state.list = (await sheep.$api.user.address.list()).data;
|
||||
state.loading = false;
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (!!uni.getStorageSync('areaData')) {
|
||||
return;
|
||||
}
|
||||
// 提前加载省市区数据
|
||||
sheep.$api.data.area().then((res) => {
|
||||
if (res.error === 0) {
|
||||
uni.setStorageSync('areaData', res.data);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-box {
|
||||
.add-btn {
|
||||
flex: 1;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 80rpx;
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sync-wxaddress {
|
||||
flex: 1;
|
||||
line-height: 80rpx;
|
||||
background: $white;
|
||||
border-radius: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<s-layout title="商品收藏">
|
||||
<view class="cart-box ss-flex ss-flex-col ss-row-between">
|
||||
<!-- 头部 -->
|
||||
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<view class="header-left ss-flex ss-col-center ss-font-26">
|
||||
共
|
||||
<text class="goods-number ui-TC-Main ss-flex">{{ state.pagination.total }}</text>
|
||||
件商品
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<button
|
||||
v-if="state.editMode && state.pagination.total"
|
||||
class="ss-reset-button"
|
||||
@tap="state.editMode = false"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
v-if="!state.editMode && state.pagination.total"
|
||||
class="ss-reset-button ui-TC-Main"
|
||||
@tap="state.editMode = true"
|
||||
>编辑</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="cart-content">
|
||||
<view
|
||||
class="goods-box ss-r-10 ss-m-b-14"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view
|
||||
v-show="state.editMode"
|
||||
class="check-box ss-flex ss-col-center ss-p-l-10"
|
||||
@tap="onSelect(item.goods_id)"
|
||||
>
|
||||
<label class="radio">
|
||||
<radio
|
||||
:checked="state.selectedCollectList.includes(item.goods_id)"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
/>
|
||||
</label>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:title="item.goods.title"
|
||||
:img="item.goods.image"
|
||||
price="666"
|
||||
skuText="123"
|
||||
priceColor="#FF3000"
|
||||
:titleWidth="400"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id: item.goods_id,
|
||||
})
|
||||
"
|
||||
>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :val="0" placeholder v-show="state.editMode">
|
||||
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
|
||||
<view class="footer-left ss-flex ss-col-center">
|
||||
<view class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
|
||||
<label class="radio">
|
||||
<radio
|
||||
:checked="state.selectAll"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.7)"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<view> 全选 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-right">
|
||||
<button
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main"
|
||||
@tap="onCancel"
|
||||
>取消收藏</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
<s-empty v-if="state.pagination.total === 0" text="暂无收藏" icon="/static/collect-empty.png" />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
editMode: false,
|
||||
selectedCollectList: [],
|
||||
selectAll: false,
|
||||
});
|
||||
|
||||
async function getData(page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.user.favorite.list({
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 格式化价格
|
||||
function formatPrice(e) {
|
||||
return e.length === 1 ? e[0] : e.join('~');
|
||||
}
|
||||
|
||||
// 单选选中
|
||||
const onSelect = (id) => {
|
||||
if (!state.selectedCollectList.includes(id)) {
|
||||
state.selectedCollectList.push(id);
|
||||
} else {
|
||||
state.selectedCollectList.splice(state.selectedCollectList.indexOf(id), 1);
|
||||
}
|
||||
state.selectAll = state.selectedCollectList.length === state.pagination.data.length;
|
||||
};
|
||||
// 全选
|
||||
const onSelectAll = () => {
|
||||
state.selectAll = !state.selectAll;
|
||||
if (!state.selectAll) {
|
||||
state.selectedCollectList = [];
|
||||
} else {
|
||||
state.pagination.data.forEach((item) => {
|
||||
if (state.selectedCollectList.includes(item.goods_id)) {
|
||||
state.selectedCollectList.splice(state.selectedCollectList.indexOf(item.goods_id), 1);
|
||||
}
|
||||
state.selectedCollectList.push(item.goods_id);
|
||||
});
|
||||
}
|
||||
};
|
||||
async function onCancel() {
|
||||
if (state.selectedCollectList) {
|
||||
state.selectedCollectList = state.selectedCollectList.toString();
|
||||
const { error } = await sheep.$api.user.favorite.cancel(state.selectedCollectList);
|
||||
if (error === 0) {
|
||||
state.editMode = false;
|
||||
state.selectedCollectList = [];
|
||||
state.selectAll = false;
|
||||
getData();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getData(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
onLoad(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cart-box {
|
||||
.cart-header {
|
||||
height: 70rpx;
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: v-bind('sys_navBar') rpx;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.pay-btn {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 40rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
width: 100%;
|
||||
margin-top: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.goods-box {
|
||||
background-color: #fff;
|
||||
&:last-child {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<s-layout title="我的足迹" :bgStyle="{ color: '#f2f2f2' }">
|
||||
<view class="cart-box ss-flex ss-flex-col ss-row-between">
|
||||
<!-- 头部 -->
|
||||
<view class="cart-header ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<view class="header-left ss-flex ss-col-center ss-font-26">
|
||||
共
|
||||
<text class="goods-number ui-TC-Main ss-flex">
|
||||
{{ state.pagination.total }}
|
||||
</text>
|
||||
件商品
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<button
|
||||
v-if="state.editMode && state.pagination.total"
|
||||
class="ss-reset-button"
|
||||
@tap="state.editMode = false"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
v-if="!state.editMode && state.pagination.total"
|
||||
class="ss-reset-button ui-TC-Main"
|
||||
@tap="state.editMode = true"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="cart-content">
|
||||
<view
|
||||
class="goods-box ss-r-10 ss-m-b-14"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view
|
||||
v-show="state.editMode"
|
||||
class="check-box ss-flex ss-col-center ss-p-l-10"
|
||||
@tap="onSelect(item.goods_id)"
|
||||
>
|
||||
<label class="radio">
|
||||
<radio
|
||||
:checked="state.selectedCollectList.includes(item.goods_id)"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
/>
|
||||
</label>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:title="item.goods.title"
|
||||
:img="item.goods.image"
|
||||
price="666"
|
||||
skuText="123"
|
||||
priceColor="#FF3000"
|
||||
:titleWidth="400"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id: item.goods_id,
|
||||
})
|
||||
"
|
||||
>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部 -->
|
||||
<su-fixed bottom :val="0" placeholder v-show="state.editMode">
|
||||
<view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
|
||||
<view class="footer-left ss-flex ss-col-center">
|
||||
<view class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
|
||||
<label class="radio">
|
||||
<radio
|
||||
:checked="state.selectAll"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.7)"
|
||||
/>
|
||||
</label>
|
||||
<view>全选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-right">
|
||||
<button
|
||||
class="ss-reset-button ui-BG-Main-Gradient pay-btn ss-font-28 ui-Shadow-Main"
|
||||
@tap="onCancel"
|
||||
>
|
||||
取消收藏
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
text="暂无浏览记录"
|
||||
icon="/static/collect-empty.png"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
editMode: false,
|
||||
selectedCollectList: [],
|
||||
selectAll: false,
|
||||
});
|
||||
|
||||
async function getData(page = 1, list_rows = 6) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.user.view.list({
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 格式化价格
|
||||
function formatPrice(e) {
|
||||
return e.length === 1 ? e[0] : e.join('~');
|
||||
}
|
||||
|
||||
// 单选选中
|
||||
const onSelect = (id) => {
|
||||
if (!state.selectedCollectList.includes(id)) {
|
||||
state.selectedCollectList.push(id);
|
||||
} else {
|
||||
state.selectedCollectList.splice(state.selectedCollectList.indexOf(id), 1);
|
||||
}
|
||||
state.selectAll = state.selectedCollectList.length === state.pagination.data.length;
|
||||
};
|
||||
// 全选
|
||||
const onSelectAll = () => {
|
||||
state.selectAll = !state.selectAll;
|
||||
if (!state.selectAll) {
|
||||
state.selectedCollectList = [];
|
||||
} else {
|
||||
state.pagination.data.forEach((item) => {
|
||||
if (state.selectedCollectList.includes(item.goods_id)) {
|
||||
state.selectedCollectList.splice(state.selectedCollectList.indexOf(item.goods_id), 1);
|
||||
}
|
||||
state.selectedCollectList.push(item.goods_id);
|
||||
});
|
||||
}
|
||||
};
|
||||
async function onCancel() {
|
||||
if (state.selectedCollectList) {
|
||||
state.selectedCollectList = state.selectedCollectList.toString();
|
||||
const { error } = await sheep.$api.user.view.delete({
|
||||
goods_id: state.selectedCollectList,
|
||||
});
|
||||
if (error === 0) {
|
||||
state.editMode = false;
|
||||
state.selectedCollectList = [];
|
||||
state.selectAll = false;
|
||||
getData();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getData(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
onLoad(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cart-box {
|
||||
.cart-header {
|
||||
height: 70rpx;
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: v-bind('sys_navBar') rpx;
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.pay-btn {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 40rpx;
|
||||
min-width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-content {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 70rpx;
|
||||
.goods-box {
|
||||
background-color: #fff;
|
||||
&:last-child {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-card {
|
||||
padding: 36rpx 0 46rpx 20rpx;
|
||||
|
||||
.img-box {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
|
||||
.order-img {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.check-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.params-box {
|
||||
.params-title {
|
||||
height: 38rpx;
|
||||
background: #f4f4f4;
|
||||
border-radius: 2rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.price-text {
|
||||
color: $red;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,503 @@
|
||||
<template>
|
||||
<s-layout title="用户信息" class="set-userinfo-wrap">
|
||||
<uni-forms
|
||||
:model="state.model"
|
||||
:rules="state.rules"
|
||||
labelPosition="left"
|
||||
border
|
||||
class="form-box"
|
||||
>
|
||||
<view class="ss-flex ss-row-center ss-col-center ss-p-t-60 ss-p-b-0 bg-white">
|
||||
<view class="header-box-content">
|
||||
<su-image
|
||||
class="content-img"
|
||||
isPreview
|
||||
:current="0"
|
||||
:src="sheep.$url.cdn(state.model.avatar)"
|
||||
:height="160"
|
||||
:width="160"
|
||||
:radius="80"
|
||||
mode="scaleToFill"
|
||||
></su-image>
|
||||
<view class="avatar-action">
|
||||
<!-- #ifdef MP -->
|
||||
<button
|
||||
class="ss-reset-button avatar-action-btn"
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar"
|
||||
>修改</button
|
||||
>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<button class="ss-reset-button avatar-action-btn" @tap="onChangeAvatar">修改</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white ss-p-x-30">
|
||||
<uni-forms-item name="username" label="用户名" @tap="onChangeUsername" class="label-box">
|
||||
<uni-easyinput
|
||||
v-model="userInfo.username"
|
||||
disabled
|
||||
:inputBorder="false"
|
||||
:styles="{ disableColor: '#fff' }"
|
||||
placeholder="设置用户名"
|
||||
:clearable="false"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<su-radio class="ss-flex" v-if="userInfo.verification?.username" :modelValue="true" />
|
||||
<button v-else class="ss-reset-button">
|
||||
<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
|
||||
</button>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="nickname" label="昵称">
|
||||
<uni-easyinput
|
||||
v-model="state.model.nickname"
|
||||
type="nickname"
|
||||
placeholder="设置昵称"
|
||||
:inputBorder="false"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="gender" label="性别">
|
||||
<view class="ss-flex ss-col-center ss-h-100">
|
||||
<radio-group @change="onChangeGender" class="ss-flex ss-col-center">
|
||||
<label class="radio" v-for="item in genderRadioMap" :key="item.value">
|
||||
<view class="ss-flex ss-col-center ss-m-r-32">
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
:checked="item.value == state.model.gender"
|
||||
/>
|
||||
<view class="gender-name">{{ item.name }}</view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="mobile" label="手机号" @tap="onChangeMobile">
|
||||
<uni-easyinput
|
||||
v-model="userInfo.mobile"
|
||||
placeholder="请绑定手机号"
|
||||
:inputBorder="false"
|
||||
disabled
|
||||
:styles="{ disableColor: '#fff' }"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:clearable="false"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<su-radio v-if="userInfo.verification?.mobile" :modelValue="true" />
|
||||
<button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
|
||||
<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="password" label="登录密码" @tap="onSetPassword">
|
||||
<uni-easyinput
|
||||
v-model="userInfo.password"
|
||||
:placeholder="userInfo.verification?.password ? '修改登录密码' : '点击设置登录密码'"
|
||||
:inputBorder="false"
|
||||
:styles="{ disableColor: '#fff' }"
|
||||
disabled
|
||||
placeholderStyle="color:#BBBBBB;font-size:28rpx;line-height:normal"
|
||||
:clearable="false"
|
||||
>
|
||||
<template v-slot:right>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<su-radio
|
||||
class="ss-flex"
|
||||
v-if="userInfo.verification?.password"
|
||||
:modelValue="true"
|
||||
/>
|
||||
|
||||
<button v-else class="ss-reset-button ss-flex ss-col-center ss-row-center">
|
||||
<text class="_icon-forward" style="color: #bbbbbb; font-size: 26rpx"></text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
|
||||
<view class="bg-white ss-m-t-14">
|
||||
<uni-list>
|
||||
<uni-list-item
|
||||
clickable
|
||||
@tap="sheep.$router.go('/pages/user/address/list')"
|
||||
title="地址管理"
|
||||
showArrow
|
||||
:border="false"
|
||||
class="list-border"
|
||||
></uni-list-item>
|
||||
<uni-list-item
|
||||
clickable
|
||||
@tap="sheep.$router.go('/pages/user/invoice/list')"
|
||||
title="发票管理"
|
||||
showArrow
|
||||
:border="false"
|
||||
class="list-border"
|
||||
></uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</uni-forms>
|
||||
|
||||
<view v-if="sheep.$platform.name !== 'H5'">
|
||||
<view class="title-box ss-p-l-30">第三方账号绑定</view>
|
||||
|
||||
<view class="account-list ss-flex ss-row-between">
|
||||
<view v-if="'WechatOfficialAccount' === sheep.$platform.name" class="ss-flex ss-col-center">
|
||||
<image
|
||||
class="list-img"
|
||||
:src="sheep.$url.static('/static/img/shop/platform/WechatOfficialAccount.png')"
|
||||
/>
|
||||
<text class="list-name">微信公众号</text>
|
||||
</view>
|
||||
<view v-if="'WechatMiniProgram' === sheep.$platform.name" class="ss-flex ss-col-center">
|
||||
<image
|
||||
class="list-img"
|
||||
:src="sheep.$url.static('/static/img/shop/platform/WechatMiniProgram.png')"
|
||||
/>
|
||||
<text class="list-name">微信小程序</text>
|
||||
</view>
|
||||
<view v-if="'App' === sheep.$platform.name" class="ss-flex ss-col-center">
|
||||
<image
|
||||
class="list-img"
|
||||
:src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
|
||||
/>
|
||||
<text class="list-name">微信开放平台</text>
|
||||
</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="info ss-flex ss-col-center" v-if="state.thirdOauthInfo">
|
||||
<image
|
||||
class="avatar ss-m-r-20"
|
||||
:src="sheep.$url.cdn(state.thirdOauthInfo.avatar)"
|
||||
></image>
|
||||
<text class="name">{{ state.thirdOauthInfo.nickname }}</text>
|
||||
</view>
|
||||
<view class="bind-box ss-m-l-20">
|
||||
<button
|
||||
v-if="state.thirdOauthInfo"
|
||||
class="ss-reset-button relieve-btn"
|
||||
@tap="unBindThirdOauth"
|
||||
>
|
||||
解绑
|
||||
</button>
|
||||
<button v-else class="ss-reset-button bind-btn" @tap="bindThirdOauth">绑定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<su-fixed bottom placeholder bg="none">
|
||||
<view class="footer-box ss-p-20">
|
||||
<button class="ss-rest-button logout-btn ui-Shadow-Main" @tap="onSubmit">保存</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
|
||||
import { mobile, password, username } from '@/sheep/validate/form';
|
||||
import sheep from '@/sheep';
|
||||
import { clone } from 'lodash';
|
||||
import { showAuthModal } from '@/sheep/hooks/useModal';
|
||||
|
||||
const state = reactive({
|
||||
model: {},
|
||||
rules: {},
|
||||
thirdOauthInfo: null,
|
||||
});
|
||||
|
||||
const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';
|
||||
|
||||
const genderRadioMap = [
|
||||
{
|
||||
name: '男',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
name: '未知',
|
||||
value: '0',
|
||||
},
|
||||
];
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
// 选择性别
|
||||
function onChangeGender(e) {
|
||||
state.model.gender = e.detail.value;
|
||||
}
|
||||
// 修改用户名
|
||||
const onChangeUsername = () => {
|
||||
!state.model.verification?.username && showAuthModal('changeUsername');
|
||||
};
|
||||
|
||||
// 修改手机号
|
||||
const onChangeMobile = () => {
|
||||
showAuthModal('changeMobile');
|
||||
};
|
||||
|
||||
function onChooseAvatar(e) {
|
||||
const tempUrl = e.detail.avatarUrl || '';
|
||||
uploadAvatar(tempUrl);
|
||||
}
|
||||
|
||||
//修改头像
|
||||
function onChangeAvatar() {
|
||||
uni.chooseImage({
|
||||
success: async (chooseImageRes) => {
|
||||
const tempUrl = chooseImageRes.tempFilePaths[0];
|
||||
uploadAvatar(tempUrl);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function uploadAvatar(tempUrl) {
|
||||
if (!tempUrl) return;
|
||||
let { path } = await sheep.$api.app.upload(tempUrl, 'ugc');
|
||||
state.model.avatar = path;
|
||||
}
|
||||
|
||||
// 修改/设置密码
|
||||
function onSetPassword() {
|
||||
if (state.model.verification.password) {
|
||||
showAuthModal('changePassword');
|
||||
} else {
|
||||
showAuthModal('resetPassword');
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定第三方账号
|
||||
async function bindThirdOauth() {
|
||||
let result = await sheep.$platform.useProvider('wechat').bind();
|
||||
if (result) {
|
||||
getUserInfo();
|
||||
}
|
||||
}
|
||||
|
||||
// 解绑第三方账号
|
||||
function unBindThirdOauth() {
|
||||
uni.showModal({
|
||||
title: '解绑提醒',
|
||||
content: '解绑后您将无法通过微信登录此账号',
|
||||
cancelText: '再想想',
|
||||
confirmText: '确定',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const result = await sheep.$platform.useProvider('wechat').unbind();
|
||||
if (result) {
|
||||
getUserInfo();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 保存信息
|
||||
async function onSubmit() {
|
||||
const { error, data } = await sheep.$api.user.update({
|
||||
avatar: state.model.avatar,
|
||||
nickname: state.model.nickname,
|
||||
gender: state.model.gender,
|
||||
});
|
||||
if (error === 0) {
|
||||
getUserInfo();
|
||||
}
|
||||
}
|
||||
|
||||
const getUserInfo = async () => {
|
||||
const userInfo = await sheep.$store('user').getInfo();
|
||||
state.model = clone(userInfo);
|
||||
|
||||
if (sheep.$platform.name !== 'H5') {
|
||||
let { data, error } = await sheep.$api.user.thirdOauthInfo();
|
||||
if (error === 0) {
|
||||
state.thirdOauthInfo = data;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
getUserInfo();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-file-picker {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.uni-file-picker__container {
|
||||
margin: -14rpx -12rpx;
|
||||
}
|
||||
|
||||
.file-picker__progress {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.uni-list-item__content-title {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gender-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 40rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.radio-dark {
|
||||
filter: grayscale(100%);
|
||||
filter: gray;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.content-img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.header-box-content {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.avatar-action {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 160rpx;
|
||||
height: 46rpx;
|
||||
background: rgba(#000000, 0.3);
|
||||
|
||||
.avatar-action-btn {
|
||||
width: 160rpx;
|
||||
height: 46rpx;
|
||||
font-weight: 500;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定项
|
||||
.account-list {
|
||||
background-color: $white;
|
||||
height: 100rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.list-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.info {
|
||||
.avatar {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
|
||||
.bind-box {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
line-height: normal;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
|
||||
.bind-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 25rpx;
|
||||
background: #f4f4f4;
|
||||
color: #999999;
|
||||
}
|
||||
.relieve-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 25rpx;
|
||||
background: var(--ui-BG-Main-opacity-1);
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-border {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<s-layout :title="state.model.id ? '编辑发票' : '添加发票'">
|
||||
<uni-forms
|
||||
ref="invoiceFormRef"
|
||||
v-model="state.model"
|
||||
:rules="state.rules"
|
||||
validateTrigger="bind"
|
||||
labelWidth="160"
|
||||
labelAlign="left"
|
||||
border
|
||||
:labelStyle="{ fontWeight: 'bold' }"
|
||||
>
|
||||
<view class="bg-white form-box ss-p-x-30">
|
||||
<uni-forms-item name="type" label="发票类型">
|
||||
<view class="ss-flex ss-col-center ss-h-100">
|
||||
<radio-group @change="onChange" class="ss-flex ss-col-center">
|
||||
<label class="radio" v-for="item in invoiceTypeList" :key="item.value">
|
||||
<view class="ss-flex ss-col-center ss-m-r-32">
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
:checked="item.value === state.model.type"
|
||||
/>
|
||||
<view class="radio-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<view v-if="state.model.type === 'person'">
|
||||
<uni-forms-item name="name" label="姓名">
|
||||
<uni-easyinput
|
||||
v-model="state.model.name"
|
||||
type="text"
|
||||
placeholder="请输入您的姓名(必填)"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="mobile" label="手机号">
|
||||
<uni-easyinput
|
||||
v-model="state.model.mobile"
|
||||
type="number"
|
||||
placeholder="请输入手机号(必填)"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
<view v-if="state.model.type === 'company'">
|
||||
<uni-forms-item name="name" label="单位名称">
|
||||
<uni-easyinput
|
||||
v-model="state.model.name"
|
||||
type="text"
|
||||
placeholder="请输入单位名称(必填)"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="mobile" label="手机号">
|
||||
<uni-easyinput
|
||||
v-model="state.model.mobile"
|
||||
type="number"
|
||||
placeholder="请输入手机号(必填)"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="tax_no" label="税号">
|
||||
<uni-easyinput
|
||||
v-model="state.model.tax_no"
|
||||
type="text"
|
||||
placeholder="请输入单位税号(必填)"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_name" label="开户银行">
|
||||
<uni-easyinput
|
||||
v-model="state.model.bank_name"
|
||||
type="text"
|
||||
placeholder="请输入对公账户开户银行"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_no" label="银行账号">
|
||||
<uni-easyinput
|
||||
v-model="state.model.bank_no"
|
||||
type="text"
|
||||
placeholder="请输入对公账户银行账号"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
:inputBorder="false"
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item
|
||||
name="address"
|
||||
label="详细地址"
|
||||
:formItemStyle="{ alignItems: 'flex-start' }"
|
||||
:labelStyle="{ lineHeight: '5em' }"
|
||||
class="textarea-item"
|
||||
>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
type="textarea"
|
||||
v-model="state.model.address"
|
||||
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
|
||||
placeholder="请输入详细地址"
|
||||
clearable
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
|
||||
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
|
||||
<view class="ss-m-b-20">
|
||||
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">保存</button>
|
||||
</view>
|
||||
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
|
||||
删除
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, ref, reactive, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import _ from 'lodash';
|
||||
import { realName, mobile, taxNo, taxName } from '@/sheep/validate/form';
|
||||
|
||||
const invoiceFormRef = ref(null);
|
||||
const invoiceTypeList = [
|
||||
{
|
||||
name: '个人',
|
||||
value: 'person',
|
||||
},
|
||||
{
|
||||
name: '企/事业单位',
|
||||
value: 'company',
|
||||
},
|
||||
];
|
||||
const state = reactive({
|
||||
model: {
|
||||
type: '',
|
||||
name: '',
|
||||
mobile: '',
|
||||
tax_no: '',
|
||||
bank_name: '',
|
||||
bank_no: '',
|
||||
address: '',
|
||||
},
|
||||
rules: {
|
||||
name: taxName,
|
||||
mobile,
|
||||
tax_no: taxNo,
|
||||
},
|
||||
});
|
||||
|
||||
//发票
|
||||
function onChange(e) {
|
||||
state.model.type = e.detail.value;
|
||||
}
|
||||
|
||||
const onSave = async () => {
|
||||
const validate = await unref(invoiceFormRef)
|
||||
.validate()
|
||||
.catch((error) => {
|
||||
console.log('error: ', error);
|
||||
});
|
||||
if (!validate) return;
|
||||
|
||||
let res = null;
|
||||
if (state.model.id) {
|
||||
res = await sheep.$api.user.invoice.update(state.model.id, state.model);
|
||||
} else {
|
||||
res = await sheep.$api.user.invoice.create(state.model);
|
||||
}
|
||||
if (res.error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
};
|
||||
const onDelete = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认删除此发票信息吗？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.user.invoice.delete(state.model.id);
|
||||
if (res.error === 0) {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
onLoad(async (options) => {
|
||||
if (options.id) {
|
||||
let res = await sheep.$api.user.invoice.detail(options.id);
|
||||
if (res.error === 0) {
|
||||
state.model = {
|
||||
...state.model,
|
||||
...res.data,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
state.model.type = 'person';
|
||||
}
|
||||
|
||||
if (options.data) {
|
||||
let data = JSON.parse(options.data);
|
||||
state.model = {
|
||||
...state.model,
|
||||
...data,
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-forms-item__label .label-text {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__content-textarea {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-size: 40rpx !important;
|
||||
}
|
||||
|
||||
.is-textarea-icon {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: var(--ui-BG);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<s-layout title="发票管理" :bgStyle="{ color: '#FFF' }">
|
||||
<view v-if="state.list.length">
|
||||
<s-invoice-item
|
||||
v-for="item in state.list"
|
||||
hasBorderBottom
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:isDefault="item.is_default"
|
||||
@tap="onSelect(item)"
|
||||
></s-invoice-item>
|
||||
</view>
|
||||
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="footer-box ss-flex ss-row-between ss-p-20">
|
||||
<button
|
||||
class="add-btn ss-reset-button ui-Shadow-Main"
|
||||
@tap="sheep.$router.go('/pages/user/invoice/edit')"
|
||||
>
|
||||
新增发票抬头
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<s-empty
|
||||
v-if="state.list.length === 0 && !state.loading"
|
||||
text="暂无发票"
|
||||
icon="/static/data-empty.png"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
const state = reactive({
|
||||
list: [],
|
||||
loading: true,
|
||||
});
|
||||
const onSelect = (invoiceInfo) => {
|
||||
uni.$emit('SELECT_INVOICE', {
|
||||
invoiceInfo,
|
||||
});
|
||||
sheep.$router.back();
|
||||
};
|
||||
|
||||
onShow(async () => {
|
||||
state.list = (await sheep.$api.user.invoice.list()).data;
|
||||
state.loading = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// page{
|
||||
// background-color: red;
|
||||
// }
|
||||
.footer-box {
|
||||
.add-btn {
|
||||
flex: 1;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
border-radius: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
line-height: 80rpx;
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sync-wxaddress {
|
||||
flex: 1;
|
||||
line-height: 80rpx;
|
||||
background: $white;
|
||||
border-radius: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<s-layout class="set-wrap" title="编辑资料">
|
||||
<view class="header-box ss-flex-col ss-row-center ss-col-center">
|
||||
<image
|
||||
class="logo-img ss-m-b-40"
|
||||
src="/static/img/shop/tabbar/find2.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="name ss-m-b-24">SHEEP商城</view>
|
||||
<view class="version">V1.3.0</view>
|
||||
</view>
|
||||
|
||||
<uni-list :border="true">
|
||||
<uni-list-item title="清除缓存" rightText="2M" showArrow></uni-list-item>
|
||||
<uni-list-item title="当前版本" rightText="V1.3.1" showArrow></uni-list-item>
|
||||
<uni-list-item title="意见反馈" showArrow></uni-list-item>
|
||||
<uni-list-item title="关于我们" showArrow></uni-list-item>
|
||||
</uni-list>
|
||||
|
||||
<view class="set-footer ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="agreement-box ss-flex ss-col-center ss-m-b-30">
|
||||
<view class="ss-flex ss-col-center ss-m-b-10">
|
||||
<view class="tcp-text">《用户协议》</view>
|
||||
<view class="agreement-text">与</view>
|
||||
<view class="tcp-text">《隐私协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="copyright-text ss-m-b-10">******版权所有</view>
|
||||
<view class="copyright-text">Copyright© 2018-2022</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.set-title {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.header-box {
|
||||
padding: 100rpx 0;
|
||||
|
||||
.logo-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 42rpx;
|
||||
line-height: 42rpx;
|
||||
font-weight: bold;
|
||||
color: $dark-3;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
color: $gray-b;
|
||||
}
|
||||
}
|
||||
|
||||
.set-footer {
|
||||
margin: 200rpx 0;
|
||||
|
||||
.copyright-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: $gray-c;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.agreement-box {
|
||||
margin: 80rpx auto 0;
|
||||
|
||||
.tcp-text {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,499 @@
|
||||
<template>
|
||||
<s-layout class="wallet-wrap" title="佣金">
|
||||
<!-- 钱包卡片 -->
|
||||
<view class="header-box ss-flex ss-row-center ss-col-center">
|
||||
<view class="card-box ui-BG-Main ui-Shadow-Main">
|
||||
<view class="card-head ss-flex ss-col-center">
|
||||
<view class="card-title ss-m-r-10">我的佣金（元）</view>
|
||||
<view
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
class="ss-eye-icon"
|
||||
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
|
||||
></view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-t-30">
|
||||
<view class="money-num">{{ state.showMoney ? userInfo.commission : '*****' }}</view>
|
||||
<view class="ss-flex">
|
||||
<view class="ss-m-r-20">
|
||||
<button
|
||||
class="ss-reset-button withdraw-btn"
|
||||
@tap="sheep.$router.go('/pages/pay/withdraw')"
|
||||
>
|
||||
提现
|
||||
</button>
|
||||
</view>
|
||||
<button class="ss-reset-button balance-btn ss-m-l-20" @tap="state.showModal = true">
|
||||
转余额
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="ss-flex">
|
||||
<view class="loading-money">
|
||||
<view class="loading-money-title">待入账佣金</view>
|
||||
<view class="loading-money-num">{{
|
||||
state.showMoney ? agentInfo.pending_reward || '0.00' : '*****'
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="loading-money ss-m-l-100">
|
||||
<view class="loading-money-title">可提现佣金</view>
|
||||
<view class="loading-money-num">{{
|
||||
state.showMoney ? userInfo.commission || '0.00' : '*****'
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<su-sticky>
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime">
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
|
||||
<view class="total-box">
|
||||
<view class="ss-m-b-10">总收入￥{{ state.pagination.income.toFixed(2) }}</view>
|
||||
<view>总支出￥{{ (-state.pagination.expense).toFixed(2) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
@change="onChangeTab"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/data-empty.png"
|
||||
text="暂无数据"
|
||||
></s-empty>
|
||||
<!-- 转余额弹框 -->
|
||||
<su-popup
|
||||
:show="state.showModal"
|
||||
type="bottom"
|
||||
round="20"
|
||||
@close="state.showModal = false"
|
||||
showClose
|
||||
>
|
||||
<view class="ss-p-x-20 ss-p-y-30">
|
||||
<view class="model-title ss-m-b-30 ss-m-l-20">转余额</view>
|
||||
<view class="model-subtitle ss-m-b-100 ss-m-l-20">将您的佣金转到余额中继续消费</view>
|
||||
<view class="input-box ss-flex ss-col-center border-bottom ss-m-b-70 ss-m-x-20">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.amount"
|
||||
type="number"
|
||||
placeholder="请输入提现金额"
|
||||
/>
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button model-btn ui-BG-Main-Gradient ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</su-popup>
|
||||
<!-- 钱包记录 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="wallet-list ss-flex border-bottom"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="list-content">
|
||||
<view class="title-box ss-flex ss-row-between ss-m-b-20">
|
||||
<text class="title ss-line-1"
|
||||
>{{ item.event_text }}{{ item.memo ? '-' + item.memo : '' }}</text
|
||||
>
|
||||
<view class="money">
|
||||
<text v-if="item.amount >= 0" class="add">+{{ item.amount }}</text>
|
||||
<text v-else class="minus">{{ item.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="time">{{ item.create_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <u-gap></u-gap> -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
|
||||
// 数据
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
expense: 0,
|
||||
income: 0,
|
||||
};
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
date: [],
|
||||
currentTab: 0,
|
||||
pagination,
|
||||
loadStatus: '',
|
||||
showModal: false,
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
value: 'income',
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
value: 'expense',
|
||||
},
|
||||
];
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
|
||||
const dateFilterText = computed(() => {
|
||||
if (state.date[0] === state.date[1]) {
|
||||
return state.date[0];
|
||||
} else {
|
||||
return state.date.join('~');
|
||||
}
|
||||
});
|
||||
|
||||
async function getLogList(page = 1, list_rows = 8) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.user.wallet.log({
|
||||
type: 'commission',
|
||||
tab: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
date: appendTimeHMS(state.date),
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let list = _.concat(state.pagination.data, res.data.list.data);
|
||||
state.pagination = {
|
||||
...res.data.list,
|
||||
data: list,
|
||||
income: res.data.income,
|
||||
expense: res.data.expense,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onChangeTab(e) {
|
||||
state.pagination = pagination;
|
||||
state.currentTab = e.index;
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function onChangeTime(e) {
|
||||
state.date[0] = e[0];
|
||||
state.date[1] = e[e.length - 1];
|
||||
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function appendTimeHMS(arr) {
|
||||
return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
|
||||
}
|
||||
|
||||
// 确认操作
|
||||
async function onConfirm() {
|
||||
if (state.amount <= 0) {
|
||||
sheep.$helper.toast('请输入正确的金额');
|
||||
return;
|
||||
}
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认把您的佣金转入到余额钱包中？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error } = await sheep.$api.commission.transfer({
|
||||
amount: state.amount,
|
||||
});
|
||||
if (error === 0) {
|
||||
state.showModal = false;
|
||||
sheep.$store('user').getInfo();
|
||||
onChangeTab({ index: 0 });
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
const today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [today, today];
|
||||
getLogList();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getLogList(state.pagination.current_page + 1);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 钱包
|
||||
.header-box {
|
||||
background-color: $white;
|
||||
padding: 30rpx;
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
min-height: 300rpx;
|
||||
padding: 40rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/user/wallet_card_bg.png')") no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
color: $white;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ss-eye-icon {
|
||||
font-size: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.money-num {
|
||||
font-size: 40rpx;
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.reduce-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
background-color: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.balance-btn {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-money {
|
||||
margin-top: 56rpx;
|
||||
.loading-money-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.loading-money-num {
|
||||
font-size: 30rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #fefefe;
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
|
||||
.filter-box {
|
||||
height: 120rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: $bg-page;
|
||||
|
||||
.total-box {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.date-btn {
|
||||
background-color: $white;
|
||||
line-height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
|
||||
.ss-seldate-icon {
|
||||
font-size: 50rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab
|
||||
.wallet-tab-card {
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 2rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 钱包记录
|
||||
.wallet-list {
|
||||
padding: 30rpx;
|
||||
background-color: #ffff;
|
||||
|
||||
.head-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
background: $gray-c;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: $dark-3;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $gray-c;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
.add {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.model-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #c2c7cf;
|
||||
}
|
||||
|
||||
.model-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
height: 100rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 40rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<s-layout class="wallet-wrap" title="钱包">
|
||||
<!-- 钱包卡片 -->
|
||||
<view class="header-box ss-flex ss-row-center ss-col-center">
|
||||
<view class="card-box ui-BG-Main ui-Shadow-Main">
|
||||
<view class="card-head ss-flex ss-col-center">
|
||||
<view class="card-title ss-m-r-10">钱包余额（元）</view>
|
||||
<view
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
class="ss-eye-icon"
|
||||
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
|
||||
></view>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
|
||||
<view class="money-num">{{ state.showMoney ? userInfo.money : '*****' }}</view>
|
||||
<button class="ss-reset-button topup-btn" @tap="sheep.$router.go('/pages/pay/recharge')">
|
||||
充值
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<su-sticky>
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime">
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
|
||||
<view class="total-box">
|
||||
<view class="ss-m-b-10">总收入￥{{ state.pagination.income.toFixed(2) }}</view>
|
||||
<view>总支出￥{{ (-state.pagination.expense).toFixed(2) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
@change="onChange"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
|
||||
<!-- 钱包记录 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="wallet-list ss-flex border-bottom"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="list-content">
|
||||
<view class="title-box ss-flex ss-row-between ss-m-b-20">
|
||||
<text class="title ss-line-1"
|
||||
>{{ item.event_text }}{{ item.memo ? '-' + item.memo : '' }}</text
|
||||
>
|
||||
<view class="money">
|
||||
<text v-if="item.amount >= 0" class="add">+{{ item.amount }}</text>
|
||||
<text v-else class="minus">{{ item.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="time">{{ item.create_time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
expense: 0,
|
||||
income: 0,
|
||||
};
|
||||
// 数据
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
date: [],
|
||||
currentTab: 0,
|
||||
pagination,
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
value: 'income',
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
value: 'expense',
|
||||
},
|
||||
];
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
const dateFilterText = computed(() => {
|
||||
if (state.date[0] === state.date[1]) {
|
||||
return state.date[0];
|
||||
} else {
|
||||
return state.date.join('~');
|
||||
}
|
||||
});
|
||||
|
||||
async function getLogList(page = 1, list_rows = 8) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.user.wallet.log({
|
||||
type: 'money',
|
||||
tab: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
date: appendTimeHMS(state.date),
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let list = _.concat(state.pagination.data, res.data.list.data);
|
||||
state.pagination = {
|
||||
...res.data.list,
|
||||
data: list,
|
||||
income: res.data.income,
|
||||
expense: res.data.expense,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
onLoad(async (options) => {
|
||||
const today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [today, today];
|
||||
getLogList();
|
||||
});
|
||||
|
||||
function onChange(e) {
|
||||
state.pagination = pagination;
|
||||
state.currentTab = e.index;
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function onChangeTime(e) {
|
||||
state.date[0] = e[0];
|
||||
state.date[1] = e[e.length - 1];
|
||||
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function appendTimeHMS(arr) {
|
||||
return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getLogList(state.pagination.current_page + 1);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 钱包
|
||||
.header-box {
|
||||
background-color: $white;
|
||||
padding: 30rpx;
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
min-height: 300rpx;
|
||||
padding: 40rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/user/wallet_card_bg.png')") no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
color: $white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.ss-eye-icon {
|
||||
font-size: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.money-num {
|
||||
font-size: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.reduce-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.topup-btn {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30px;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
background-color: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
|
||||
.filter-box {
|
||||
height: 114rpx;
|
||||
background-color: $bg-page;
|
||||
|
||||
.total-box {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.date-btn {
|
||||
background-color: $white;
|
||||
line-height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
|
||||
.ss-seldate-icon {
|
||||
font-size: 50rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
background: $white;
|
||||
border-bottom: 2rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
// tab
|
||||
.wallet-tab-card {
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 2rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 钱包记录
|
||||
.wallet-list {
|
||||
padding: 30rpx;
|
||||
background-color: #ffff;
|
||||
|
||||
.head-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
background: $gray-c;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: $dark-3;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $gray-c;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: OPPOSANS;
|
||||
.add {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,280 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout class="wallet-wrap" title="我的积分" navbar="inner">
|
||||
<view
|
||||
class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="header-bg"><view class="bg"></view></view>
|
||||
<view class="score-box ss-flex-col ss-row-center ss-col-center">
|
||||
<view class="ss-m-b-30">
|
||||
<text class="all-title ss-m-r-8">当前积分</text>
|
||||
<text class="cicon-help-o"></text>
|
||||
</view>
|
||||
<text class="all-num">{{ userInfo.score || 0 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- tab -->
|
||||
<su-sticky :customNavHeight="sys_navBar">
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime">
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon"></text>
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
|
||||
<view class="total-box">
|
||||
<view class="ss-m-b-10">总收入￥{{ state.pagination.income }}</view>
|
||||
<view>总支出￥{{ -state.pagination.expense }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
@change="onChange"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
></su-tabs>
|
||||
</su-sticky>
|
||||
<!-- list -->
|
||||
<view class="list-box">
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="list-item ss-flex ss-col-center ss-row-between"
|
||||
v-for="item in state.pagination.data"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="ss-flex-col">
|
||||
<view class="name">{{ item.event_text }}{{ item.memo ? '-' + item.memo : '' }}</view>
|
||||
<view class="time">{{ item.create_time }}</view>
|
||||
</view>
|
||||
<view class="add" v-if="item.amount > 0">+{{ parseInt(item.amount) }}</view>
|
||||
<view class="minus" v-else>{{ parseInt(item.amount) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
|
||||
</view>
|
||||
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="onLoadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import dayjs from 'dayjs';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
onPageScroll(() => {});
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
expense: 0,
|
||||
income: 0,
|
||||
};
|
||||
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination,
|
||||
loadStatus: '',
|
||||
date: [],
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
|
||||
{
|
||||
name: '收入',
|
||||
value: 'income',
|
||||
},
|
||||
{
|
||||
name: '支出',
|
||||
value: 'expense',
|
||||
},
|
||||
];
|
||||
|
||||
const dateFilterText = computed(() => {
|
||||
if (state.date[0] === state.date[1]) {
|
||||
return state.date[0];
|
||||
} else {
|
||||
return state.date.join('~');
|
||||
}
|
||||
});
|
||||
|
||||
async function getLogList(page = 1, list_rows = 8) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.user.wallet.log({
|
||||
type: 'score',
|
||||
list_rows,
|
||||
page,
|
||||
tab: tabMaps[state.currentTab].value,
|
||||
date: appendTimeHMS(state.date),
|
||||
});
|
||||
if (res.error === 0) {
|
||||
let list = _.concat(state.pagination.data, res.data.list.data);
|
||||
state.pagination = {
|
||||
...res.data.list,
|
||||
data: list,
|
||||
income: res.data.income,
|
||||
expense: res.data.expense,
|
||||
};
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
state.loadStatus = 'more';
|
||||
} else {
|
||||
state.loadStatus = 'noMore';
|
||||
}
|
||||
}
|
||||
}
|
||||
onLoad(async (options) => {
|
||||
const today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [today, today];
|
||||
getLogList();
|
||||
});
|
||||
|
||||
function onChange(e) {
|
||||
state.pagination = pagination;
|
||||
state.currentTab = e.index;
|
||||
getLogList();
|
||||
}
|
||||
function onChangeTime(e) {
|
||||
state.date[0] = e[0];
|
||||
state.date[1] = e[e.length - 1];
|
||||
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function appendTimeHMS(arr) {
|
||||
return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
|
||||
}
|
||||
|
||||
function onLoadMore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getLogList(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
onReachBottom(() => {
|
||||
onLoadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
|
||||
no-repeat;
|
||||
background-size: 750rpx 100%;
|
||||
padding: 0 0 120rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.score-box {
|
||||
height: 100%;
|
||||
|
||||
.all-num {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.all-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cicon-help-o {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 筛选
|
||||
.filter-box {
|
||||
height: 114rpx;
|
||||
background-color: $bg-page;
|
||||
|
||||
.total-box {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.date-btn {
|
||||
background-color: $white;
|
||||
line-height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
|
||||
.ss-seldate-icon {
|
||||
font-size: 50rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
.list-item {
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #dfdfdf;
|
||||
padding: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(196, 196, 196, 1);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.add {
|
||||
font-size: 30rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: #e6b873;
|
||||
}
|
||||
|
||||
.minus {
|
||||
font-size: 30rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user