This commit is contained in:
砂糖
2026-02-07 18:01:13 +08:00
commit 8015759c65
2110 changed files with 269866 additions and 0 deletions

View File

@@ -0,0 +1,299 @@
<template>
<view class="container" v-if="userInfo.id">
<view class="account-panel dis-flex flex-y-center">
<view class="panel-lable">
<text>账户余额</text>
</view>
<view class="panel-balance flex-box">
<text>{{ userInfo.balance }}</text>
</view>
</view>
<view class="recharge-panel">
<view class="recharge-label">
<text>充值金额</text>
</view>
<view class="recharge-plan clearfix" v-if="setting.planList.length > 0">
<block v-for="(item, index) in setting.planList" :key="index">
<view class="recharge-plan_item" :class="{ active: rechargeAmount == item.rechargeAmount }" @click="onSelectPlan(item.rechargeAmount)">
<view class="plan_money">
<text>{{ item.rechargeAmount }}</text>
</view>
<view class="plan_gift" v-if="item.giveAmount > 0">
<text>{{ item.giveAmount }}</text>
</view>
</view>
</block>
</view>
<!-- 手动充值输入框 -->
<view class="recharge-input" v-if="!setting.planList || setting.planList.length < 1">
<input type="digit" placeholder="请输入充值金额" v-model="inputValue" @input="onChangeMoney" />
</view>
<!-- 确认按钮 -->
<view class="recharge-submit btn-submit">
<form @submit="onSubmit">
<button class="button" formType="submit" :disabled="disabled">立即充值</button>
</form>
</view>
</view>
<!-- 充值描述 -->
<view class="recharge-describe" v-if="setting.remark.length > 0">
<view class="recharge-label">
<text>充值说明</text>
</view>
<view class="content">
<text space="ensp">{{setting.remark}}</text>
</view>
</view>
</view>
</template>
<script>
import * as MemberApi from '@/api/merchant/member'
import * as UserApi from '@/api/user'
import * as BalanceApi from '@/api/balance'
import * as RechargeApi from '@/api/merchant/recharge'
export default {
data() {
return {
// 正在加载
isLoading: true,
// 会员信息
userInfo: {},
// 充值设置
setting: { isOpen: false, planList: [], remark: '' },
// 按钮禁用
disabled: false,
// 当前选中的套餐id
rechargeAmount: 0,
// 自定义金额
inputValue: '',
// 会员ID
memberId: 0
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 会员ID
this.memberId = options.memberId ? options.memberId : 0;
// 获取页面数据
this.getPageData()
},
methods: {
/**
* 选择充值套餐
*/
onSelectPlan(rechargeAmount) {
this.rechargeAmount = rechargeAmount
this.inputValue = ''
},
// 金额输入框
onChangeMoney(e) {
this.inputValue = e.target.value
this.rechargeAmount = 0
},
// 获取页面数据
getPageData() {
const app = this
app.isLoading = true
Promise.all([app.getUserInfo(), app.getSetting()])
.then(() => app.isLoading = false)
},
// 获取会员信息
getUserInfo() {
const app = this
return new Promise((resolve, reject) => {
MemberApi.detail(app.memberId)
.then(result => {
app.userInfo = result.data.userInfo
resolve(app.userInfo)
})
})
},
// 获取充值设置
getSetting() {
const app = this
return new Promise((resolve, reject) => {
BalanceApi.setting()
.then(result => {
app.setting = result.data
console.log("app.setting = ", app.setting)
resolve(app.setting)
})
})
},
// 立即充值
onSubmit(e) {
const app = this
if (!app.setting.isOpen) {
app.$error('当前未开启充值!')
return false
}
if (parseFloat(app.rechargeAmount) <= 0 && app.inputValue.length < 1) {
app.$error('请确认充值金额!')
return false
}
uni.showModal({
title: "提示",
content: "您确定要充值金额"+ (app.rechargeAmount + app.inputValue) +"吗?",
success({ confirm }) {
if (!confirm) {
return false;
}
app.disabled = true
RechargeApi.doRecharge(app.rechargeAmount, app.inputValue, app.memberId)
.then(result => {
if (result.data) {
app.$success('充值成功');
setTimeout(() => {
app.getPageData();
}, 2000)
}
})
.catch(err => app.$error('充值失败'))
.finally(() => app.disabled = false)
}
});
}
}
}
</script>
<style lang="scss" scoped>
page,
.container {
background: #fff;
}
.container {
padding-bottom: 70rpx;
}
/* 账户面板 */
.account-panel {
width: 650rpx;
height: 180rpx;
margin: 50rpx auto;
padding: 0 60rpx;
box-sizing: border-box;
border-radius: 8rpx;
color: #fff;
background: $fuint-theme;
box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
}
.panel-lable {
font-size: 32rpx;
}
.recharge-label {
color: rgb(51, 51, 51);
font-size: 32rpx;
margin-bottom: 25rpx;
}
.panel-balance {
text-align: right;
font-size: 46rpx;
}
.recharge-panel {
margin-top: 60rpx;
padding: 0 60rpx;
}
/* 充值套餐 */
.recharge-plan {
.recharge-plan_item {
width: 192rpx;
padding: 15rpx 0;
float: left;
text-align: center;
color: #888;
border: 1rpx solid rgb(228, 228, 228);
border-radius: 5rpx;
margin: 0 20rpx 20rpx 0;
&:nth-child(3n + 0) {
margin-right: 0;
}
&.active {
background: #E3BE83;
color: #FFFFFF;
border: 1rpx solid #EDD2A9;
.plan_money {
color: #FFFFFF;
font-weight: bold;
}
}
}
}
.plan_money {
font-size: 32rpx;
color: rgb(82, 82, 82);
}
.plan_gift {
font-size: 25rpx;
}
.recharge-input {
margin-top: 25rpx;
input {
border: 1rpx solid rgb(228, 228, 228);
border-radius: 10rpx;
padding: 15rpx 16rpx;
font-size: 26rpx;
}
}
/* 立即充值 */
.recharge-submit {
margin-top: 70rpx;
}
.btn-submit {
.button {
font-size: 30rpx;
background: linear-gradient(to right, #f9211c, #ff6335);
border: none;
color: white;
border-radius: 40rpx;
padding: 0 120rpx;
line-height: 3;
}
.button[disabled] {
background: #ff6335;
border-color: #ff6335;
color: white;
}
}
/* 充值说明 */
.recharge-describe {
margin-top: 50rpx;
padding: 0 60rpx;
.content {
font-size: 26rpx;
line-height: 1.6;
color: #888;
}
}
</style>

View File

@@ -0,0 +1,201 @@
<template>
<view class="container">
<view class="search-wrapper">
<view class="search-input">
<view class="search-input-wrapper">
<view class="right">
<input v-model="keyword" class="input" placeholder="请输入卡券名称或ID..." @change="doSearch" type="text"></input>
</view>
<view class="search u-icon-wrap">
<view class="icon" @click="doSearch">
<u-icon name="search"></u-icon>
</view>
</view>
</view>
</view>
</view>
<view class="number-wrapper">
<view class="title">发放数量</view>
<u-number-box :min="1" :value="num"/>
</view>
<view class="main-form">
<view class="footer">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" :class="{ disabled }" @click="doSubmit()">确定发放</view>
</view>
</view>
</view>
</view>
</template>
<script>
import * as couponApi from '@/api/merchant/coupon'
export default {
data() {
return {
keyword: '',
num: 1,
memberId: '',
couponInfo: null,
// 按钮禁用
disabled: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 会员ID
this.memberId = options.memberId ? options.memberId : 0;
},
methods: {
/**
* 搜索卡券
*/
doSearch() {
const app = this
if (!this.keyword) {
app.$error("请输入卡券名称或ID");
return false;
}
couponApi.search({ 'keyword': this.keyword })
.then(result => {
app.disabled = false;
if (result.data.coupon.content && result.data.coupon.content.length == 1) {
app.couponInfo = result.data.coupon.content[0];
app.keyword = app.couponInfo.name;
} else {
app.$error("未查询到卡券信息");
}
})
},
/**
* 提交发放
*/
doSubmit() {
const app = this;
if (!app.couponInfo || !app.couponInfo.id) {
app.$error("请先查询卡券");
return false;
}
let isConfirm = false;
uni.showModal({
title: "提示",
content: "您确定要发放卡券吗?",
success({ confirm }) {
if (confirm) {
app.disabled = true;
couponApi.sendCoupon({ 'couponId': app.couponInfo.id, 'num': app.num, 'userId': app.memberId })
.then(result => {
app.code = '';
app.disabled = false;
// 显示提示
if (parseInt(result.code) === 200) {
app.$success("发放成功!");
} else {
app.$error(result.message);
}
})
}
}
});
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx;
min-height: 100vh;
background: #f7f7f7;
}
.search-wrapper {
display: flex;
height: 100rpx;
margin-top: 40rpx;
padding: 0 5rpx;
}
.number-wrapper {
margin-top: 60rpx;
text-align: right;
background: #fff;
padding: 30rpx;
border-radius: 10rpx;
border: solid 1px #ccc;
.title {
margin-bottom: 20rpx;
}
}
// 搜索输入框
.search-input {
width: 100%;
background: #fff;
border-radius: 60rpx;
box-sizing: border-box;
overflow: hidden;
border: solid 1px #ccc;
.search-input-wrapper {
display: flex;
.right {
flex: 1;
input {
font-size: 30rpx;
height: 100rpx;
line-height: 100rpx;
padding-left: 30rpx;
.input-placeholder {
color: #aba9a9;
}
}
}
.search {
display: flex;
width: 80rpx;
justify-content: center;
align-items: center;
.icon {
display: block;
color: #b4b4b4;
font-size: 48rpx;
}
}
}
}
/* 底部操作栏 */
.footer {
margin-top: 100rpx;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
padding: 0 5rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
// 禁用按钮
&.disabled {
background: #ff9779;
}
}
}
</style>

View File

@@ -0,0 +1,543 @@
<template>
<view v-if="!isLoading" class="container">
<!-- 页面头部 -->
<view class="main-header">
<!-- 商户信息 -->
<view v-if="isLogin" class="user-info">
<view class="user-content">
<view v-if="dataInfo.confirmInfo.storeInfo" class="belong">{{ dataInfo.confirmInfo.storeInfo.name }}<text class="nick-name">{{ dataInfo.confirmInfo.realName }}</text></view>
<view v-else class="belong">{{ dataInfo.confirmInfo.merchantInfo.name }}<text class="nick-name">{{ dataInfo.confirmInfo.realName }}</text></view>
</view>
<view class="amount-info">
<view class="amount-tip">今日交易金额</view>
<view v-if="dataInfo.payMoney" class="amount-num">{{ dataInfo.payMoney.toFixed(2) }}</view>
<view v-if="!dataInfo.payMoney" class="amount-num">0.00</view>
</view>
</view>
<!-- 未登录 -->
<view v-if="!isLogin" class="user-info" @click="handleLogin">
<view class="user-content">
<view class="nick-name">未登录</view>
<view class="login-tips">点击登录账号</view>
</view>
</view>
</view>
<view v-if="isLogin" class="user-app">
<view class="item">
<view class="tool" @click="scanCodeConfirm">
<view class="icon">
<image class="image" src="/static/icon/saoyisao.png" mode="scaleToFill"></image>
</view>
<view class="text">核销卡券</view>
</view>
</view>
<view class="item">
<view class="tool" @click="scanCodeCashier">
<view class="icon">
<image class="image" src="/static/icon/saoma.png" mode="scaleToFill"></image>
</view>
<view class="text">扫码收款</view>
</view>
</view>
</view>
<!-- 概述 -->
<view class="my-asset">
<view class="asset-left flex-box dis-flex flex-x-center">
<view class="asset-left-item" @click="onTargetMember('all')">
<view class="item-value dis-flex flex-x-center">
<text>{{ dataInfo.userCount }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>总会员</text>
</view>
</view>
<view class="asset-left-item" @click="onTargetMember('todayActive')">
<view class="item-value dis-flex flex-x-center">
<text>{{ dataInfo.todayUser ? dataInfo.todayUser : 0}}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>今日活跃</text>
</view>
</view>
<view class="asset-left-item" @click="onTargetOrder('today')">
<view class="item-value dis-flex flex-x-center">
<text>{{ dataInfo.orderCount }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>今日订单</text>
</view>
</view>
</view>
</view>
<!-- 待办操作 -->
<view class="order-navbar">
<view class="order-navbar-item" v-for="(item, index) in orderNavbar" :key="index" @click="onTargetTodo(item)">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
<text class="order-badge" v-if="item.count && item.count > 0">{{ item.count }}</text>
</view>
</view>
<!-- 我的服务 -->
<view class="my-service">
<view class="service-title">我的管理</view>
<view class="service-content clearfix">
<block v-for="(item, index) in service" :key="index">
<view v-if="item.type == 'link'" class="service-item" @click="handleService(item)">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
</view>
<view v-if="item.type == 'button' && $platform == 'MP-WEIXIN'" class="service-item">
<button class="btn-normal" :open-type="item.openType">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
</button>
</view>
</block>
</view>
</view>
</view>
</template>
<script>
import SettingKeyEnum from '@/common/enum/setting/Key'
import SettingModel from '@/common/model/Setting'
import * as MerchantApi from '@/api/merchant'
import * as OrderApi from '@/api/order'
import { checkLogin } from '@/utils/app'
// 订单操作
const orderNavbar = [
{ id: 'all', name: '全部待办', icon: 'qpdingdan' },
{ id: 'refund', name: '售后处理', icon: 'daifukuan', count: 1 },
{ id: 'confirm', name: '待核销', icon: 'shouhou', count: 1 },
{ id: 'book', name: '预约确认', icon: 'daishouhuo', count: 3 },
]
/**
* 我的服务
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
*/
const service = [
{ id: 'addMember', name: '会员登记', icon: 'add', type: 'link', url: 'pages/merchant/member/add' },
{ id: 'memberSearch', name: '会员查找', icon: 'tuandui', type: 'link', url: 'pages/merchant/member/index' },
{ id: 'coupon', name: '卡券管理', icon: 'youhuiquan', type: 'link', url: 'pages/merchant/coupon' },
{ id: 'activity', name: '营销活动', icon: 'lingquan', type: 'link', url: 'pages/merchant/activity' },
{ id: 'order', name: '订单管理', icon: 'dingdan', type: 'link', url: 'pages/merchant/order/index' },
{ id: 'report', name: '报表数据', icon: 'zhibozhong', type: 'link', url: 'pages/merchant/data/index' },
{ id: 'refund', name: '售后服务', icon: 'shouhou', type: 'link', url: 'pages/merchant/refund/index' },
{ id: 'setting', name: '商家设置', icon: 'shezhi1', type: 'link', url: 'pages/merchant/setting' },
{ id: 'staff', name: '员工管理', icon: 'sy-yh', type: 'link', url: 'pages/merchant/staff/index' },
]
export default {
data() {
return {
// 枚举类
SettingKeyEnum,
// 当前运行的终端 (此处并不冗余,因为微信小程序端view层无法直接读取$platform)
$platform: this.$platform,
// 正在加载
isLoading: true,
// 是否已登录
isLogin: false,
// 系统设置
setting: {},
// 当前商户数据
dataInfo: {},
// 账户资产
assets: { prestore: '--', timer: '--', coupon: '--' },
// 我的服务
service,
// 订单操作
orderNavbar,
// 当前用户待处理数量
todoCounts: { refund: 0, book: 0, confirm: 0 }
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow(options) {
// 判断是否已登录
this.isLogin = checkLogin()
// 获取页面数据
this.getPageData()
},
methods: {
// 获取页面数据
getPageData(callback) {
const app = this
app.isLoading = true
Promise.all([app.getSetting(), app.getUserInfo()])
.then(result => {
app.isLoading = false
// 初始化我的服务数据
app.initService()
// 初始化订单操作数据
app.initOrderTabbar()
// 执行回调函数
callback && callback()
})
.catch(err => {
console.log('catch', err)
})
},
// 初始化我的服务数据
initService() {
const app = this
const newService = []
service.forEach(item => {
newService.push(item)
})
app.service = newService
},
// 初始化订单操作数据
initOrderTabbar() {
const app = this
const newOrderNavbar = []
orderNavbar.forEach(item => {
if (item.hasOwnProperty('count')) {
item.count = app.todoCounts[item.id]
}
newOrderNavbar.push(item)
})
app.orderNavbar = newOrderNavbar
},
// 获取设置
getSetting() {
const app = this
app.setting = {}
},
// 获取当前用户信息
getUserInfo() {
const app = this
return new Promise((resolve, reject) => {
!app.isLogin ? resolve(null) : MerchantApi.info()
.then(result => {
app.dataInfo = result.data
resolve(app.dataInfo)
})
.catch(err => {
if (err.result && err.result.status == 1001) {
app.isLogin = false
resolve(null)
} else {
reject(err)
}
})
})
},
// 扫码核销
scanCodeConfirm() {
const app = this
uni.scanCode({
success:function(res){
app.$navTo('pages/confirm/doConfirm?code=' + res.result + '&id=0')
}
});
},
// 扫码收款
scanCodeCashier() {
const app = this
uni.scanCode({
success:function(res){
app.$navTo('pages/pay/cashier?code=' + res.result)
}
});
},
// 跳转到登录页
handleLogin() {
!this.isLogin && this.$navTo('pages/login/index')
},
// 跳转到订单页
onTargetOrder(item) {
this.$navTo('pages/merchant/order/index', { dataType: item.id })
},
// 跳转到我的积分页面
onTargetPoints() {
this.$navTo('pages/merchant/points/log')
},
// 跳转会员列表
onTargetMember(dataType) {
this.$navTo('pages/merchant/member/index', { dataType: dataType });
},
// 跳转到服务页面
handleService({ url }) {
this.$navTo(url)
},
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 获取首页数据
this.getPageData(() => {
uni.stopPullDownRefresh()
})
}
}
</script>
<style lang="scss" scoped>
// 页面头部
.main-header {
position: relative;
height: 210rpx;
background-size: 100% 100%;
overflow: hidden;
display: block;
align-items: center;
background: $fuint-theme;
padding: 10rpx;
margin: 20rpx 20rpx 0rpx 20rpx;
border-top-left-radius: 8rpx;
border-top-right-radius: 8rpx;
.user-info {
display: block;
height: 100rpx;
margin-top: 1rpx;
text-align: center;
width: 100%;
.user-content {
display: block;
margin-left: 0rpx;
text-align: left;
color: #ffffff;
.belong {
font-size: 28rpx;
color: #fff;
.nick-name {
padding-left: 15rpx;
}
}
.login-tips {
margin-top: 12rpx;
font-size: 28rpx;
}
}
.amount-info {
margin-top: 25rpx;
color: #fff;
display: block;
text-align: center;
.amount-tip {
font-size: 28rpx;
}
.amount-num {
margin-top: 10rpx;
font-weight: bold;
font-size: 58rpx;
}
}
}
}
.user-app {
display: flex;
height: 260rpx;
text-align: center;
color: #fff;
background: $fuint-theme;
margin: 0 20rpx;
border-bottom-left-radius: 8rpx;
border-bottom-right-radius: 8rpx;
padding-bottom: 60rpx;
.item {
width: 50%;
height: 100%;
margin: 20rpx;
padding: 20rpx;
text-align: right;
.tool {
width: 280rpx;
clear: both;
padding: 20rpx;
border: 1rpx solid #fff;
border-radius: 30rpx;
text-align: center;
margin:0 auto;
.icon {
.image {
height: 68rpx;
width: 68rpx;
font-weight: bold;
}
}
.text {
margin-top: 10rpx;
font-size: 30rpx;
text-align: center;
font-weight: bold;
}
}
}
}
// 我的资产
.my-asset {
display: flex;
padding: 40rpx 0;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 5rpx;
margin: 25rpx 20rpx 5rpx 20rpx;
background: #ffffff;
.asset-right {
width: 200rpx;
border-left: 1rpx solid #eee;
}
.asset-right-item {
text-align: center;
color: #545454;
.item-icon {
font-size: 60rpx;
}
.item-name {
margin-top: 10rpx;
}
.item-name text {
font-size: 20rpx;
}
}
.asset-left-item {
text-align: center;
color: #666;
padding: 0 72rpx;
.item-value {
font-size: 36rpx;
color: #f03c3c;
font-weight: bold;
}
.item-name {
margin-top: 6rpx;
}
.item-name {
font-size: 24rpx;
}
}
}
// 订单操作
.order-navbar {
display: flex;
margin: 20rpx auto 20rpx auto;
padding: 20rpx 0;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
font-size: 30rpx;
border-radius: 5rpx;
background: #fff;
&-item {
position: relative;
width: 25%;
.item-icon {
text-align: center;
margin: 0 auto;
padding: 10rpx 0;
color: #545454;
font-size: 40rpx;
}
.item-name {
font-size: 24rpx;
color: #545454;
text-align: center;
margin-right: 10rpx;
}
.order-badge {
position: absolute;
top: 0;
right: 55rpx;
font-size: 22rpx;
background: #fa2209;
text-align: center;
line-height: 28rpx;
color: #fff;
border-radius: 100%;
min-height: 30rpx;
min-width: 30rpx;
padding: 1rpx;
}
}
}
// 我的服务
.my-service {
margin: 22rpx auto 22rpx auto;
padding: 20rpx 0;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 5rpx;
background: #fff;
.service-title {
padding-left: 20rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
}
.service-content {
// margin-bottom: -30rpx;
.service-item {
position: relative;
width: 25%;
float: left;
margin-bottom: 30rpx;
.item-icon {
text-align: center;
margin: 0 auto;
padding: 10rpx 0;
color: #ff3800;
font-size: 40rpx;
}
.item-name {
font-size: 24rpx;
color: #545454;
text-align: center;
margin-right: 10rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,219 @@
<template>
<view class="container">
<view class="info-list">
<view class="info-item">
<view class="contacts avatar-warp">
<text class="name">头像</text>
<image class="avatar" @click="chooseImage()" :src="avatar"></image>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">称呼</text>
<input class="weui-input value" type="nickname" v-model="nickname" placeholder="请输入称呼"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">手机</text>
<input class="weui-input value" type="text" v-model="mobile" placeholder="请输入手机号"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">性别</text>
<view class="value">
<radio-group @change="genderChange">
<label class="radio"><radio value="1" color="#00acac" :checked="userInfo.sex == '1' ? true : false"/></label>
<label class="radio second"><radio value="0" color="#00acac" :checked="userInfo.sex == '0' ? true: false"/></label>
</radio-group>
</view>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">生日</text>
<picker class="value" mode="date" :value="userInfo.birthday" start="1900-01-01" @change="bindDateChange">
<view class="picker">{{ userInfo.birthday ? userInfo.birthday : '选择生日' }}</view>
</picker>
</view>
</view>
</view>
<!-- 底部操作按钮 -->
<view class="footer-fixed">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" @click="save()">保存会员</view>
</view>
</view>
</view>
</template>
<script>
import * as MemberApi from '@/api/merchant/member'
import * as UploadApi from '@/api/upload'
import store from '@/store'
export default {
data() {
return {
//当前页面参数
options: {},
// 正在加载
isLoading: true,
userInfo: { avatar: '', name: '', sex: 0, birthday: '', hasPassword: '' },
openCardPara: null,
code: "",
nickname: "",
avatar: ""
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 当前页面参数
this.options = options;
},
methods: {
bindDateChange (e) {
let that = this;
that.userInfo.birthday = e.detail.value;
},
getnickname(e) {
this.nickname = e.detail.value;
},
genderChange(e) {
this.userInfo.sex = e.detail.value;
},
// 选择图片
chooseImage() {
const app = this
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success({ tempFiles }) {
const imageList = tempFiles;
return new Promise((resolve, reject) => {
if (imageList.length > 0) {
UploadApi.image(imageList)
.then(files => {
if (files && files.length > 0) {
app.userInfo.avatar = files[0].fileName;
app.avatar = files[0].domain + app.userInfo.avatar;
}
resolve(files)
})
.catch(err => reject(err))
} else {
resolve()
}
})
}
});
},
/**
* 保存会员信息
*/
save() {
const app = this
app.isLoading = true
MemberApi.save({"name": app.nickname, "avatar": app.avatar, "sex": app.userInfo.sex, "birthday": app.userInfo.birthday})
.then(result => {
app.userInfo = result.data
app.isLoading = false
app.$success('保存成功!')
}).catch(err => {
app.isLoading = false;
})
}
}
}
</script>
<style lang="scss" scoped>
.info-list {
padding-bottom: 100rpx;
margin-top: 25rpx;
}
// 项目内容
.info-item {
margin: 20rpx auto 20rpx auto;
padding: 30rpx 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
.avatar-warp {
line-height: 120rpx;
}
}
.contacts {
font-size: 30rpx;
.name {
margin-left:0px;
}
.value {
float:right;
color:#999999;
text-align: right;
.second {
margin-left: .6rem;
}
}
.password {
text-align: right;
float: left;
padding-right: 5rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 120rpx;
border: solid 1px #cccccc;
float: right;
}
}
.item-option {
display: flex;
justify-content: space-between;
height: 48rpx;
}
// 底部操作栏
.footer-fixed {
height: 100rpx;
z-index: 11;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
padding: 0 20rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
}
.btn-item-out {
margin-top: 20rpx;
background: #FFFFFF;
border: 1px solid $fuint-theme;
color: #666666;
}
}
</style>

View File

@@ -0,0 +1,560 @@
<template>
<view v-if="!isLoading" class="container">
<!-- 页面头部 -->
<view class="main-header">
<!-- 用户信息 -->
<view class="user-info">
<!--头像-->
<view class="user-avatar" @click="onUserInfo">
<image class="image" :src="userInfo.avatar ? userInfo.avatar : '/static/default-avatar.png'"></image>
</view>
<view class="user-content" @click="onUserInfo">
<!-- 会员昵称 -->
<view class="nick-name">{{ userInfo.name ? userInfo.name : '未登录'}}</view>
<view class="login-tips" v-if="!isLogin">(点击头像登录)</view>
<!-- 会员等级 -->
<view v-if="userInfo.gradeId > 0 && gradeInfo" class="user-grade">
<view class="user-grade_icon">
<image class="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEUAAAD/tjL/tzH/uDP/uC7/tjH/tzH/tzL/tTH+tTL+tjP/tDD/tTD+tzD/tjL/szD/uDH/tjL/tjL+tjD/tjT/szb/tzL/tTL+uTH+tjL/tjL/tjL/tTT/tjL/tjL+tjH/uTL/vDD/tjL/tjH/tzL9uS//tTL/nBr/sS7/tjH/ujL/szD/uTv+rzf/tzL+tzH+vDP+uzL+tjP+ry7+tDL9ki/7szf/sEX/tTL/tjL+tjL/tTH/tTT/tzH/tzL/tjP/sTX/uTP/wzX+rTn/vDX9vC8m8ckhAAAAOXRSTlMAlnAMB/vjxKWGMh0S6drMiVxPRkEY9PLy0ru0sKagmo5+dGtgVCMgBP716eXWyMGxqJGRe2o5KSmFNjaYAAABP0lEQVQ4y8XS13KDMBAF0AWDDe4t7r3ETu9lVxJgJ/n/X8rKAzHG5TE+Twz3zki7I/g/KXdghIbGJewrU4yzn08Ebgl6TuZzzuOC6W5es3HX6qsSz3NFShRU0MpucytDmOSpu3yULx3CA9RD1HjVedc0jSjqm6ZzhUjDsFDQhSp/OKj5GQvg0+ZCOixsbtDLAeTTOm/yGi8GyIphIVsgH737FEDV44LJa88IRKK/SetrwT9G/GUIr6vXjoy4GXn7+RboVXnghuSjaoGecwQxL2su3CwAKlO+QFoqxI4FMctHQhQd2OhxTu184jWUlI+rMTBTn1/IQcJHQ6GQdZ7pWiDaNdhTt330efISeiqYwQEzQpTlsURJLhzkEmpCPsERfeIUVyXr6MNuIyp5uziW6xURtt7hhGwzmMNJExfO4Bd9X0ZPqAxdNwAAAABJRU5ErkJggg=="></image>
</view>
<view class="user-grade_name">
<text>{{ gradeInfo.name }}</text>
</view>
</view>
<!-- 会员无等级时显示手机号 -->
<view v-else class="mobile">{{ userInfo.mobile }}</view>
<view class="active-time" v-if="userInfo.endTime">{{ userInfo.endTime }}</view>
</view>
<view class="amount-info" @click="toMemberWallet(userInfo.id ? userInfo.id : 0)">
<view class="amount-tip">余额</view>
<view class="amount-num" v-if="isLogin">{{ userInfo.balance.toFixed(2) }}</view>
<view class="amount-num" v-if="!isLogin">0.00</view>
<view class="point-amount" @click="onTargetPoints">积分 {{ userInfo.point ? userInfo.point : 0 }}</view>
</view>
</view>
<view class="user-no">
<view class="no" v-if="userInfo.userNo">会员号{{ userInfo.userNo ? userInfo.userNo : '-'}}</view>
</view>
</view>
<!-- 会员资产 -->
<view class="my-asset">
<view class="asset-left flex-box dis-flex flex-x-center">
<view class="asset-left-item" @click="onTargetMyCoupon('C')">
<view class="item-value dis-flex flex-x-center">
<text>{{ isLogin ? assets.coupon : '0' }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>优惠券</text>
</view>
</view>
<view class="asset-left-item" @click="onTargetMyCoupon('P')">
<view class="item-value dis-flex flex-x-center">
<text>{{ isLogin ? assets.prestore : '0' }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>储值卡</text>
</view>
</view>
<view class="asset-left-item" @click="onTargetMyCoupon('T')">
<view class="item-value dis-flex flex-x-center">
<text>{{ isLogin ? assets.timer : '0' }}</text>
</view>
<view class="item-name dis-flex flex-x-center">
<text>计次卡</text>
</view>
</view>
</view>
</view>
<!-- 会员服务 -->
<view class="user-service">
<view class="service-content clearfix">
<block v-for="(item, index) in service" :key="index">
<view v-if="item.type == 'link'" class="service-item" @click="handleService(item)">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
</view>
<view v-if="item.type == 'button' && $platform == 'MP-WEIXIN'" class="service-item">
<button class="btn-normal" :open-type="item.openType">
<view class="item-icon">
<text class="iconfont" :class="[`icon-${item.icon}`]"></text>
</view>
<view class="item-name">{{ item.name }}</view>
</button>
</view>
</block>
</view>
</view>
</view>
</template>
<script>
import SettingKeyEnum from '@/common/enum/setting/Key'
import SettingModel from '@/common/model/Setting'
import * as MemberApi from '@/api/merchant/member'
import * as UserApi from '@/api/user'
import * as OrderApi from '@/api/order'
import * as MessageApi from '@/api/message'
import { checkLogin, showMessage } from '@/utils/app'
/**
* 会员服务
* id: 标识; name: 标题名称; icon: 图标; type 类型(link和button); url: 跳转的链接
*/
const service = [
{ id: 'rechange', name: '会员充值', icon: 'qiandai', type: 'link', url: 'pages/merchant/balance/recharge' },
{ id: 'payment', name: '余额扣减', icon: 'shouhou', type: 'link', url: 'pages/pay/cashier' },
{ id: 'myCoupon', name: '卡券发放', icon: 'youhuiquan', type: 'link', url: 'pages/merchant/coupon/receive' },
{ id: 'points', name: '会员积分', icon: 'jifen', type: 'link', url: 'pages/merchant/points/detail' },
{ id: 'setting', name: '会员信息', icon: 'shezhi1', type: 'link', url: 'pages/merchant/member/setting' },
]
export default {
data() {
return {
// 枚举类
SettingKeyEnum,
// 当前运行的终端 (此处并不冗余,因为微信小程序端view层无法直接读取$platform)
$platform: this.$platform,
// 正在加载
isLoading: true,
// 是否已登录
isLogin: false,
// 系统设置
setting: {},
// 当前用户信息
userInfo: { id: 0, name: '', avatar: '', gradeId: 0, mobile: '', balance: 0 },
gradeInfo: {},
gradeEndTime: '',
// 账户资产
assets: { prestore: '0', timer: '0', coupon: '0' },
// 会员服务
service,
// 会员ID
memberId: 0,
// 会员编码
userCode: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 会员ID
this.memberId = options.memberId ? options.memberId : 0;
// 获取页面数据
this.getPageData();
},
methods: {
// 获取页面数据
getPageData(callback) {
const app = this
app.isLoading = true
Promise.all([app.getSetting(), app.getUserInfo(), app.getUserAssets()])
.then(result => {
app.isLoading = false
// 初始化我的服务数据
app.initService()
// 初始化订单操作数据
app.initOrderTabbar()
// 执行回调函数
callback && callback()
})
.catch(err => {
console.log('catch', err)
})
},
// 初始化我的服务数据
initService() {
const app = this
const newService = []
service.forEach(item => {
newService.push(item)
})
app.service = newService
},
// 获取设置
getSetting() {
this.setting = {}
},
// 获取当前用户信息
getUserInfo() {
const app = this;
app.showPopup = false;
return new Promise((resolve, reject) => {
MemberApi.detail(app.memberId)
.then(result => {
if (result.data.userInfo) {
app.userInfo = result.data.userInfo
app.userCode = app.userInfo.userNo
app.isLogin = true
} else {
app.isLogin = false
app.userInfo = { id: 0, name: '', avatar: '', gradeId: 0, mobile: '', balance: 0 }
}
app.gradeInfo = result.data.gradeInfo;
resolve(app.userInfo);
resolve(app.gradeInfo);
})
.catch(err => {
if (err.result && err.result.status == 1001) {
app.isLogin = false
resolve(null)
} else {
reject(err)
}
})
})
},
// 获取账户资产
getUserAssets() {
const app = this
return new Promise((resolve, reject) => {
UserApi.assets({ userId: app.memberId })
.then(result => {
app.assets = result.data.asset
resolve(app.assets)
})
.catch(err => {
if (err.result && err.result.status == 1001) {
app.isLogin = false
resolve(null)
} else {
reject(err)
}
})
})
},
// 跳转我的余额
toMemberWallet(userId) {
return false;
},
// 跳转充值
toRecharge(userId) {
return false;
},
// 跳转到我的积分页面
onTargetPoints() {
return false;
},
// 跳转到我的卡券列表页
onTargetMyCoupon(type) {
this.$navTo('pages/my-coupon/index?type='+type+'&memberId='+this.memberId)
},
// 跳转会员设置页面
onUserInfo() {
return false;
},
// 跳转到服务页面
handleService({ url }) {
const app = this;
console.log(app.userCode)
app.$navTo(url + '?memberId=' + app.memberId + '&code=' + app.userCode);
}
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 获取首页数据
this.getPageData(() => {
uni.stopPullDownRefresh()
})
}
}
</script>
<style lang="scss" scoped>
// 页面头部
.main-header {
background: $fuint-theme;
height: 380rpx;
background-size: cover;
overflow: hidden;
display: block;
align-items: center;
margin: 10rpx 25rpx 10rpx 25rpx;
border-radius: 10rpx;
.user-info {
display: block;
height: 200rpx;
margin: 20rpx;
margin-left: 20rpx;
.user-avatar {
padding-top: 10rpx;
width: 50rpx;
margin-top: 70rpx;
float: left;
.image {
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 999rpx;
}
}
.user-content {
display: block;
justify-content: center;
margin-top: 80rpx;
margin-left: 60rpx;
float: left;
color: #ffffff;
max-width: 300rpx;
.nick-name {
font-size: 32rpx;
font-weight: bold;
max-width: 270rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile {
margin-top: 15rpx;
font-size: 26rpx;
}
.user-grade {
display: block;
align-items: center;
background: #3c3c3c;
margin-top: 8rpx;
border-radius: 10rpx;
padding: 5rpx 12rpx;
width: 80%;
min-width: 160rpx;
height: 40rpx;
.user-grade_icon .image {
display: block;
width: 32rpx;
height: 32rpx;
float: left;
}
.user-grade_name {
margin-left: 5rpx;
font-size: 24rpx;
color: #EEE0C3;
float: left;
}
}
.active-time {
margin-top: 3rpx;
}
.login-tips {
margin-top: 9rpx;
font-size: 25rpx;
}
}
.amount-info {
margin-top: 80rpx;
margin-left: 70rpx;
color: #fff;
display: block;
float: left;
max-width: 120rpx;
.amount-tip {
font-size: 24rpx;
}
.amount-num {
margin-top: 10rpx;
font-weight: bold;
font-size: 48rpx;
}
.point-amount {
display: block;
margin-top: 2px;
width: 100px;
}
}
}
.user-no {
display: block;
font-size: 28rpx;
margin: 110rpx 0rpx 0rpx 20rpx;
color: #ffffff;
.no {
float: left;
}
}
}
// 我的资产
.my-asset {
display: flex;
background: #fff;
margin: 10rpx 20rpx 10rpx 20rpx;
padding: 40rpx 0;
border: 2rpx #f5f5f5 solid;
.asset-right {
width: 200rpx;
border-left: 1rpx solid #eee;
}
.asset-left-item {
text-align: center;
color: #666;
padding: 0 72rpx;
width: 33%;
.item-value {
font-size: 35rpx;
color: #f03c3c;
font-weight: bold;
}
.item-name {
font-size: 25rpx;
margin-top: 6rpx;
}
}
}
// 会员服务
.user-service {
margin: 0rpx auto 20rpx auto;
border: 2rpx #f5f5f5 solid;
background: #FFF;
padding: 30rpx 0rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 5rpx;
display: block;
.service-content {
margin-top: 20rpx;
.service-item {
width: 25%;
float: left;
margin-bottom: 25rpx;
.item-icon {
text-align: center;
margin: 0 auto;
padding: 10rpx 0;
color: #ff3800;
font-size: 40rpx;
}
.item-name {
font-size: 24rpx;
color: #545454;
text-align: center;
margin-right: 10rpx;
}
}
}
}
// 推荐信息
.my-recommend {
height: 20rpx;
}
// 会员升级
.member-update {
margin: 22rpx auto 0rpx auto;
padding: 20rpx 0;
border-radius: 5rpx;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
background: #fff;
width: 94%;
text-align: center;
.update-title {
padding-left: 20rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
text-align: left;
}
.recharge {
position: relative;
margin-bottom: 35rpx;
display: flex;
flex-direction: row;
align-items: center;
&-tag {
position: absolute;
top: -2rpx;
left: -2rpx;
width: 170rpx;
height: 36rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-image: url('~@/static/user/tag.png');
background-size: 100%;
&-text {
font-size: 20rpx;
color: #FFFFFF;
text-align: center;
}
}
&-item {
position: relative;
padding: 40rpx 0;
margin-left: 15rpx;
width: 29.33%;
height: 270rpx;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
border: solid 1rpx #CBCCCE;
border-radius: 12rpx;
&-active {
border: solid 2rpx #EDD2A9;
background-color: #FBF1E5;
}
&-duration {
margin-bottom: 30rpx;
font-size: 26rpx;
color: #1C1C1C;
}
&-price {
margin-bottom: 20rpx;
display: flex;
flex-direction: row;
align-items: baseline;
&-text {
font-size: 48rpx;
color: #E3BE83;
}
}
&-des {
font-size: 22rpx;
color: #A5A3A2;
}
}
}
}
</style>

View File

@@ -0,0 +1,341 @@
<template>
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback"
:up="upOption" @up="upCallback">
<!-- 分类列表tab -->
<view class="tabs-wrapper">
<scroll-view class="scroll-view" scroll-x>
<view class="tab-item" :class="{ active: curId == 0 }" @click="onSwitchTab(0)">
<view class="value"><text>全部</text></view>
</view>
<!-- 分类列表 -->
<view class="tab-item" :class="{ active: curId == item.id }" @click="onSwitchTab(item.id)"
v-for="(item, index) in categoryList" :key="index">
<view class="value"><text>{{ item.name }}</text></view>
</view>
</scroll-view>
</view>
<view class="search-wrapper">
<view class="search-input">
<view class="search-input-wrapper">
<view class="left">
<text class="search-icon iconfont icon-sousuo"></text>
</view>
<view class="right">
<input v-model="keyword" class="input" placeholder="请输入会员手机号 / 会员号" type="text"></input>
</view>
</view>
</view>
<view class="search-button">
<button class="button" @click="doSearch" type="warn"> 搜索 </button>
</view>
</view>
<!-- 会员列表 -->
<view class="member-list" v-if="memberList.content">
<view class="member-item" v-for="(item, index) in memberList.content" :key="index" @click="onTargetDetail(item.id)">
<block>
<view class="left flex-box">
<image class="image" :src="item.avatar"></image>
</view>
<view class="right">
<view class="base">
<text class="name">{{ item.name }}</text>
<text class="grade">{{ item.gradeName ? item.gradeName : '' }}</text>
</view>
<view class="amount">
<view class="balance">余额{{ item.balance.toFixed(2) }}</view>
<view class="point">积分{{ item.point }}</view>
</view>
<view class="footer">
<text class="member-views f-24 col-8">{{ item.lastLoginTime }}活跃</text>
</view>
</view>
</block>
</view>
</view>
</mescroll-body>
</template>
<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import * as MemberApi from '@/api/merchant/member'
import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
const pageSize = 15
export default {
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
// 分类列表
categoryList: [{ name : '今日活跃', id: 'todayActive' }, { name : '今日注册', id: 'todayRegister' }],
// 会员列表
memberList: getEmptyPaginateObj(),
// 当前选中的分类id (all则代表全部)
curId: 'all',
// 搜索关键字
keyword: '',
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认20
page: { size: pageSize },
// 数量要大于12条才显示无更多数据
noMoreSize: 12,
empty: {
tip: '亲,暂无数据'
}
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
const app = this
if (options.dataType) {
app.curId = options.dataType
}
},
methods: {
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认20
* @param {Object} page
*/
upCallback(page) {
const app = this
// 设置列表数据
app.getMemberList(page.num)
.then(list => {
const curPageLen = list.content.length;
const totalSize = list.totalElements;
app.mescroll.endBySize(curPageLen, totalSize);
})
.catch(() => app.mescroll.endErr())
},
/**
* 搜索提交
*/
doSearch() {
this.curId = 'all';
// 刷新列表数据
this.mescroll.resetUpScroll();
},
/**
* 获取会员列表
* @param {Number} pageNo 页码
*/
getMemberList(pageNo = 1) {
const app = this;
return new Promise((resolve, reject) => {
MemberApi.list({ dataType: app.curId, keyword: app.keyword, page: pageNo }, { load: false })
.then(result => {
// 合并新数据
const newList = result.data.paginationResponse;
app.memberList.content = getMoreListData(newList, app.memberList, pageNo);
resolve(newList);
})
.catch(result => reject())
})
},
// 切换选择的分类
onSwitchTab(dataType = 'all') {
const app = this;
// 切换当前的分类ID
app.curId = dataType;
app.keyword = '';
// 刷新列表数据
app.mescroll.resetUpScroll();
},
// 跳转会员详情页
onTargetDetail(memberId) {
this.$navTo('pages/merchant/member/detail', { memberId })
},
// 刷新列表
onRefreshList() {
this.list = getEmptyPaginateObj()
setTimeout(() => {
this.mescroll.resetUpScroll()
}, 120)
},
}
}
</script>
<style lang="scss" scoped>
/* 顶部选项卡 */
.container {
min-height: 100vh;
}
.tabs-wrapper {
position: sticky;
display: flex;
width: 100%;
height: 88rpx;
color: #333;
font-size: 28rpx;
background: #fff;
border-bottom: 1rpx solid #e4e4e4;
z-index: 100;
overflow: hidden;
white-space: nowrap;
}
.tab-item {
display: inline-block;
padding: 0 15rpx;
text-align: center;
min-width: 20%;
height: 87rpx;
line-height: 88rpx;
box-sizing: border-box;
.value {
height: 100%;
}
&.active .value {
color: #fd4a5f;
border-bottom: 4rpx solid #fd4a5f;
}
}
.search-wrapper {
display: flex;
height: 80rpx;
margin-top: 10rpx;
padding: 0rpx 10rpx;
}
// 搜索输入框
.search-input {
width: 80%;
background: #fff;
border-radius: 50rpx 0 0 50rpx;
box-sizing: border-box;
overflow: hidden;
border: solid 1px #cccccc;
line-height: 80rpx;
.search-input-wrapper {
display: flex;
.left {
display: flex;
width: 60rpx;
justify-content: center;
align-items: center;
.search-icon {
display: block;
color: #666666;
font-size: 30rpx;
font-weight: bold;
}
}
.right {
flex: 1;
input {
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
.input-placeholder {
color: #aba9a9;
}
}
}
}
}
// 搜索按钮
.search-button {
width: 20%;
box-sizing: border-box;
.button {
line-height: 78rpx;
height: 78rpx;
font-size: 28rpx;
border-radius: 0 20px 20px 0;
background: $fuint-theme;
}
}
/* 会员列表 */
.member-list {
padding-top: 10rpx;
line-height: 1;
background: #f7f7f7;
}
.member-item {
margin-bottom: 10rpx;
padding: 30rpx;
background: #fff;
border: #f5f5f5 solid 1rpx;
height: 188rpx;
&:last-child {
margin-bottom: 0;
}
.left {
width: 320rxp;
float: left;
.image {
display: block;
width: 120rpx;
height: 120rpx;
border-radius: 120rpx;
border: solid 1rpx #cccccc;
}
}
.right {
margin-left: 140rpx;
height: 180rpx;
.base {
.name {
font-weight: bold;
max-height: 80rpx;
font-size: 30rpx;
color: #333;
}
.grade {
margin-left: 20rpx;
float: right;
}
}
.amount {
margin-top: 10rpx;
.balance {
margin-top: 15rpx;
}
.point {
margin-top: 10rpx;
}
}
.footer {
margin-top: 20rpx;
.member-views {
float: right;
}
}
}
}
</style>

View File

@@ -0,0 +1,244 @@
<template>
<view class="container">
<view class="info-list">
<view class="info-item">
<view class="contacts avatar-warp">
<text class="name">头像</text>
<image class="avatar" @click="chooseImage()" :src="userInfo.avatar"></image>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">称呼</text>
<input class="weui-input value" type="nickname" v-model="userInfo.name" placeholder="请输入称呼"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">手机</text>
<input class="weui-input value" type="text" v-model="userInfo.mobile" placeholder="请输入手机号"/>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">性别</text>
<view class="value">
<radio-group @change="genderChange">
<label class="radio"><radio value="1" color="#00acac" :checked="userInfo.sex == '1' ? true : false"/></label>
<label class="radio second"><radio value="0" color="#00acac" :checked="userInfo.sex == '0' ? true: false"/></label>
</radio-group>
</view>
</view>
</view>
<view class="info-item">
<view class="contacts">
<text class="name">生日</text>
<picker class="value" mode="date" :value="userInfo.birthday" start="1900-01-01" @change="bindDateChange">
<view class="picker">{{ userInfo.birthday ? userInfo.birthday : '选择生日' }}</view>
</picker>
</view>
</view>
</view>
<!-- 底部操作按钮 -->
<view class="footer-fixed">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" @click="save()">保存会员</view>
</view>
</view>
</view>
</template>
<script>
import * as MemberApi from '@/api/merchant/member'
import * as UploadApi from '@/api/upload'
import store from '@/store'
export default {
data() {
return {
//当前页面参数
options: {},
// 正在加载
isLoading: true,
userInfo: { avatar: '', name: '', sex: 0, birthday: '', hasPassword: '' },
openCardPara: null,
code: "",
nickname: "",
avatar: "",
memberId: 0
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 会员ID
this.memberId = options.memberId ? options.memberId : 0;
this.getUserInfo();
},
methods: {
// 获取当前用户信息
getUserInfo() {
const app = this;
app.showPopup = false;
return new Promise((resolve, reject) => {
MemberApi.detail(app.memberId)
.then(result => {
if (result.data.userInfo) {
app.userInfo = result.data.userInfo
} else {
app.userInfo = { id: 0, name: '', avatar: '', gradeId: 0, mobile: '', balance: 0 }
}
resolve(app.userInfo);
})
.catch(err => {
if (err.result && err.result.status == 1001) {
resolve(null)
} else {
reject(err)
}
})
})
},
bindDateChange (e) {
let that = this;
that.userInfo.birthday = e.detail.value;
},
getnickname(e) {
this.nickname = e.detail.value;
},
genderChange(e) {
this.userInfo.sex = e.detail.value;
},
// 选择图片
chooseImage() {
const app = this
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success({ tempFiles }) {
const imageList = tempFiles;
return new Promise((resolve, reject) => {
if (imageList.length > 0) {
UploadApi.image(imageList)
.then(files => {
if (files && files.length > 0) {
app.userInfo.avatar = files[0].fileName;
app.avatar = files[0].domain + app.userInfo.avatar;
}
resolve(files)
})
.catch(err => reject(err))
} else {
resolve()
}
})
}
});
},
/**
* 保存会员信息
*/
save() {
const app = this
app.isLoading = true
MemberApi.save(app.userInfo)
.then(result => {
app.userInfo = result.data
app.isLoading = false
app.$success('保存成功!')
}).catch(err => {
app.isLoading = false;
})
}
}
}
</script>
<style lang="scss" scoped>
.info-list {
padding-bottom: 100rpx;
margin-top: 25rpx;
}
// 项目内容
.info-item {
margin: 20rpx auto 20rpx auto;
padding: 30rpx 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
.avatar-warp {
line-height: 120rpx;
}
}
.contacts {
font-size: 30rpx;
.name {
margin-left:0px;
}
.value {
float:right;
color:#999999;
text-align: right;
.second {
margin-left: .6rem;
}
}
.password {
text-align: right;
float: left;
padding-right: 5rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 120rpx;
border: solid 1px #cccccc;
float: right;
}
}
.item-option {
display: flex;
justify-content: space-between;
height: 48rpx;
}
// 底部操作栏
.footer-fixed {
height: 100rpx;
z-index: 11;
.btn-wrapper {
height: 100%;
display: flex;
align-items: center;
padding: 0 20rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
border-radius: 40rpx;
}
.btn-item-main {
background: linear-gradient(to right, #f9211c, #ff6335);
}
.btn-item-out {
margin-top: 20rpx;
background: #FFFFFF;
border: 1px solid $fuint-theme;
color: #666666;
}
}
</style>

View File

@@ -0,0 +1,403 @@
<template>
<view class="container">
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback"
:up="upOption" @up="upCallback">
<!-- tab栏 -->
<u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" />
<!-- 订单列表 -->
<view class="order-list">
<view class="order-item" v-for="(item, index) in list.content" :key="index">
<view class="item-top" @click="handleTargetDetail(item.id)">
<view class="item-top-left">
<text class="order-type">{{ item.typeName }}</text>
</view>
<view class="item-top-right">
<text :class="item.status">{{ item.statusText }}</text>
</view>
</view>
<!-- 商品列表 -->
<view class="goods-list" v-if="item.goods" @click="handleTargetDetail(item.id)">
<view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" :src="goods.image"></image>
</view>
<!-- 商品信息 -->
<view class="goods-content">
<view class="goods-title twolist-hidden"><text>{{ goods.name }}</text></view>
<view class="goods-props clearfix">
<view class="goods-props-item" v-for="(props, idx) in goods.specList" :key="idx">
<text>{{ props.specValue }}</text>
</view>
</view>
</view>
<!-- 交易信息 -->
<view class="goods-trade">
<view class="goods-price">
<text class="unit"></text>
<text class="value">{{ goods.price }}</text>
</view>
<view class="goods-num">
<text>×{{ goods.num }}</text>
</view>
</view>
</view>
</view>
<!-- 备注信息 -->
<view v-if="item.remark" class="remark" @click="handleTargetDetail(item.id)">
<text>备注</text>
<text>{{ item.remark ? item.remark : '--'}}</text>
</view>
<!-- 订单合计 -->
<view class="order-total" @click="handleTargetDetail(item.id)">
<text>总金额</text>
<text class="unit"></text>
<text class="money">{{ item.amount }}</text>
</view>
<!-- 订单操作 -->
<view class="order-handle">
<view class="order-time">
<text class="time">{{ item.createTime }}</text>
</view>
<view class="btn-group">
<view class="btn-item" @click="handleTargetDetail(item.id)">详情</view>
</view>
</view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import {
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
PayTypeEnum,
ReceiptStatusEnum
} from '@/common/enum/order'
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
import * as OrderApi from '@/api/merchant/order'
import { wxPayment } from '@/utils/app'
// 每页记录数量
const pageSize = 15
// tab栏数据
const tabs = [{
name: `全部`,
value: 'all'
}, {
name: `待支付`,
value: 'toPay'
}, {
name: `已支付`,
value: 'paid'
}, {
name: `已取消`,
value: 'cancel'
}]
export default {
components: {
MescrollBody
},
mixins: [MescrollMixin],
data() {
return {
// 枚举类
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
PayTypeEnum,
ReceiptStatusEnum,
// 当前页面参数
options: { dataType: 'all' },
// tab栏数据
tabs,
// 当前标签索引
curTab: 0,
// 订单列表数据
list: getEmptyPaginateObj(),
// 正在加载
isLoading: false,
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于12条才显示无更多数据
noMoreSize: 12,
// 空布局
empty: {
tip: '亲,暂无订单记录'
}
},
// 控制首次触发onShow事件时不刷新列表
canReset: false,
// 支付方式弹窗
showPayPopup: false,
statusText: "payStatus"
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 初始化当前选中的标签
this.initCurTab(options)
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.canReset && this.onRefreshList()
this.canReset = true
},
methods: {
// 初始化当前选中的标签
initCurTab(options) {
const app = this
if (options.dataType) {
console.log("options == ", options);
const index = app.tabs.findIndex(item => item.value == options.dataType)
app.curTab = index > -1 ? index : 0
}
},
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/
upCallback(page) {
const app = this
// 设置列表数据
app.getOrderList(page.num)
.then(list => {
const curPageLen = list.content.length
const totalSize = list.totalElements
app.mescroll.endBySize(curPageLen, totalSize)
})
.catch(() => app.mescroll.endErr())
},
// 获取订单列表
getOrderList(pageNo = 1) {
const app = this
return new Promise((resolve, reject) => {
OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false })
.then(result => {
// 合并新数据
const newList = result.data;
app.list.content = getMoreListData(newList, app.list, pageNo);
resolve(newList)
})
})
},
// 点击跳转到首页
onTargetIndex() {
this.$navTo('pages/index/index')
},
// 获取当前标签项的值
getTabValue() {
return this.tabs[this.curTab].value
},
// 切换标签项
onChangeTab(index) {
const app = this
// 设置当前选中的标签
app.curTab = index
// 刷新订单列表
app.onRefreshList()
},
// 刷新订单列表
onRefreshList() {
this.list = getEmptyPaginateObj()
setTimeout(() => {
this.mescroll.resetUpScroll()
}, 120)
},
// 跳转到订单详情页
handleTargetDetail(orderId) {
this.$navTo('pages/order/detail', { orderId })
}
}
}
</script>
<style lang="scss" scoped>
// 项目内容
.order-item {
margin: 10rpx auto 10rpx auto;
padding: 20rpx 20rpx;
width: 94%;
border: 3rpx solid #e8e8e8;
box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0.05, 0.05, 0.05, 0.05);
border-radius: 16rpx;
background: #fff;
.A{
color:$uni-text-color-active;
}
.B{
color:$uni-text-color;
}
}
// 项目顶部
.item-top {
display: flex;
justify-content: space-between;
font-size: 26rpx;
margin-bottom: 40rpx;
.order-type {
font-weight: bold;
margin-left: 20rpx;
}
.state-text {
color: $uni-text-color-active;
}
}
// 商品列表
.goods-list {
// 商品项
.goods-item {
display: flex;
margin-bottom: 10rpx;
border-bottom: 3rpx solid #e8e8e8;
padding: 20rpx;
// 商品图片
.goods-image {
width: 180rpx;
height: 143rpx;
.image {
display: block;
width: 100%;
height: 100%;
border-radius: 8rpx;
}
}
// 商品内容
.goods-content {
flex: 1;
padding-left: 16rpx;
padding-top: 16rpx;
.goods-title {
font-size: 26rpx;
max-height: 76rpx;
}
.goods-props {
margin-top: 14rpx;
height: 40rpx;
color: #ababab;
font-size: 24rpx;
overflow: hidden;
.goods-props-item {
display: inline-block;
margin-right: 14rpx;
padding: 4rpx 16rpx;
border-radius: 12rpx;
background-color: #F5F5F5;
width: auto;
}
}
}
// 交易信息
.goods-trade {
padding-top: 16rpx;
width: 150rpx;
text-align: right;
color: $uni-text-color-grey;
font-size: 26rpx;
.goods-price {
vertical-align: bottom;
margin-bottom: 16rpx;
.unit {
margin-right: -2rpx;
font-size: 24rpx;
}
}
}
}
}
// 备注信息
.remark {
padding: 12rpx 0 12rpx 20rpx;
border-radius: 5rpx;
height: 60rpx;
}
// 订单合计
.order-total {
font-size: 26rpx;
vertical-align: bottom;
text-align: right;
height: 40rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
.unit {
margin-left: 8rpx;
margin-right: -2rpx;
font-size: 26rpx;
}
.money {
font-size: 28rpx;
}
}
// 订单操作
.order-handle {
height: 50rpx;
.order-time {
color: #777;
float: left;
margin-left: 20rpx;
}
.btn-group {
.btn-item {
border-radius: 10rpx;
padding: 8rpx 24rpx;
font-size: 28rpx;
float: right;
color: #ffffff;
background: #f9211c;
border: 1rpx solid #f9211c;
margin-left: 25rpx;
}
}
}
</style>