diff --git a/flower_user_front/src/views/MemberView.vue b/flower_user_front/src/views/MemberView.vue
new file mode 100644
index 0000000..602c916
--- /dev/null
+++ b/flower_user_front/src/views/MemberView.vue
@@ -0,0 +1,194 @@
+<template>
+    <div>
+        <div style="margin:80px 80px;text-align: left">
+            <h3 style="font-size: 25px">会员充值</h3>
+            <span style="color: #848484">会员充值立享多重优惠</span>
+        </div>
+        <div>
+            <el-radio-group v-model="member">
+                <el-radio-button label="1">
+                    ￥ <span style="font-size: 50px">360</span> /年
+                </el-radio-button>
+                <el-radio-button label="2">
+                    ￥ <span style="font-size: 50px">180</span> /季
+                </el-radio-button>
+                <el-radio-button label="3">
+                    ￥ <span style="font-size: 50px">60</span> /月
+                </el-radio-button>
+            </el-radio-group>
+        </div>
+        <div style="margin-top: 120px">
+            <el-button class="member-btn" @click="charge" type="danger">立即充值</el-button>
+            <div>
+                <el-button class="member-btn-text"  @click="searchHistory" type="text">查看充值历史</el-button>
+            </div>
+            <el-dialog title="会员充值历史" :visible.sync="dialogTableVisible">
+                <el-table :data="historyData">
+                    <el-table-column property="member_id" label="会员充值号" width="120"></el-table-column>
+                    <el-table-column property="member_start_time" label="会员开始日期" width="150"></el-table-column>
+                    <el-table-column property="member_end_time" label="会员结束日期" width="150"></el-table-column>
+                    <el-table-column property="member_money" label="充值金额（元）"></el-table-column>
+                </el-table>
+                <el-pagination
+                    background
+                    :current-page="currentPage"
+                    :page-size="pageSize"
+                    layout="total, prev, pager, next, jumper"
+                    :total="total"
+                    :page-count="page_number"
+                    style="margin-top: 30px"
+                    @current-change="handleCurrentChange">
+                </el-pagination>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import Cookie from "js-cookie";
+export default {
+    data(){
+        return{
+            member:"0",
+            dialogTableVisible:false,
+            historyData:[{
+                member_id:1,
+                user_id:1,
+                member_start_time:'',
+                member_end_time:'',
+                member_money:1.00,
+            }],
+            //分页相关
+            currentPage:1,
+            pageSize:8,
+            page_number:1,//总页数
+            total:10,//总条数
+        }
+    },
+    methods:{
+        charge(){
+            const _this=this
+            let member_money1=0
+            let member_period1=1.00
+            if(_this.member==="0")
+                _this.$message.warning('请选择充值套餐类型!')
+            else{
+                if (_this.member==="1"){
+                    member_money1=360
+                    member_period1=365
+                }
+                else if (_this.member==="2"){
+                    member_money1=180
+                    member_period1=92
+                }
+                else if (_this.member==="3"){
+                    member_money1=60
+                    member_period1=30
+                }
+                try {
+                    axios({
+                        method: 'post',
+                        url: 'http://localhost:8181/member/charge',
+                        headers: {
+                            Authorization: Cookie.get('token'),
+                            'Content-Type': 'application/json'
+                        },
+                        data:{
+                            member_money:member_money1,
+                            member_period:member_period1
+                        }
+                    }).then(function (response){
+                        if (response.data.code===200){
+                            _this.$message.success('充值成功！')
+                        }
+                        if (response.data.code===401){
+                            _this.$message.warning('身份验证失败,请重新登录!')
+                        }
+                        if (response.data.code===403){
+                            const message = response.data.msg;
+                            this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                                confirmButtonText: '确定'
+                            })
+                        }
+                    });
+                }catch (error){
+                    this.$message.warning('页面加载出错,请重试!')
+                }
+            }
+        },
+        searchHistory(){
+            const _this=this
+            try {
+                axios({
+                    method: 'post',
+                    url: 'http://localhost:8181/member/history',
+                    headers: {
+                        Authorization: Cookie.get('token'),
+                        'Content-Type': 'application/json'
+                    },
+                    data:{
+                        page:_this.currentPage,
+                        page_size:_this.pageSize
+                    }
+                }).then(function (response){
+                    if (response.data.code===200){
+                        _this.dialogTableVisible = true
+                        _this.historyData=response.data.data.history;
+                        _this.page_number=response.data.data.page_number;
+                        _this.total=response.data.data.total;
+                    }
+                    if (response.data.code===401){
+                        _this.$message.warning('身份验证失败,请重新登录!')
+                    }
+                    if (response.data.code===403){
+                        const message = response.data.msg;
+                        this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
+                            confirmButtonText: '确定'
+                        })
+                    }
+                });
+            }catch (error){
+                this.$message.warning('页面加载出错,请重试!')
+            }
+        },
+        //分页
+        handleCurrentChange(page) {
+            this.currentPage = page;
+            this.fetchData();
+        },
+    }
+}
+</script>
+<style>
+.el-radio-button__inner{
+    width: 240px !important;
+    height: 100px!important;
+    margin-right: 80px!important;
+    border: 1px solid #d4d4d4!important;
+    line-height:80px!important;
+    font-size: 25px!important;
+}
+.el-radio-button__inner:hover{
+    color: red!important;
+}
+.el-radio-button__orig-radio:checked+.el-radio-button__inner{
+    background-color: #f66d6e!important;
+    border-color: #f66d6e!important;
+    box-shadow: -1px 0 0 0 #f66d6e!important;
+}
+.member-btn{
+    width: 180px!important;
+    height: 60px!important;
+    font-size: 20px!important;
+    font-weight: bold!important;
+}
+.member-btn-text{
+    color: #606060!important;
+}
+.member-btn-text:hover{
+    color: #8c8c8c!important;
+}
+.member-btn-text:focus{
+    color:#7f7f7f!important;
+}
+</style>
\ No newline at end of file