kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

小程序我的页面功能

h5_css
yanyan 3 years ago
parent
224f6abf7f
commit
2cc12ba3ea
10 changed files with 438 additions and 212 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 183
      components/my-userinfo/my-userinfo.vue
  2. 23
      mixins/tabbar-badge.js
  3. 24
      pages.json
  4. 2
      pages/index/index.vue
  5. 25
      pages/my/my.vue
  6. BIN
      static/cart_border@2x.png
  7. BIN
      static/medal_top.jpg
  8. 210
      subpkg/address/address.vue
  9. 52
      subpkg/feedback/feedback.vue
  10. 131
      subpkg/medal/medal.vue

183
components/my-userinfo/my-userinfo.vue
View File

@ -1,183 +0,0 @@
<template>
<view class="my-userinfo-container">
<!-- 头像和昵称区域 -->
<view class="top-box">
<image :src="userinfo.avatarUrl" class="avatar"></image>
<view class="nickname">{{userinfo.nickName}}</view>
</view>
<!-- 面板区域 -->
<view class="panel-list">
<!-- 第1个面板 -->
<view class="panel">
<view class="panel-body">
<view class="panel-item">
<text>8</text>
<text>收藏的店铺</text>
</view>
<view class="panel-item">
<text>14</text>
<text>收藏的商品</text>
</view>
<view class="panel-item">
<text>18</text>
<text>关注的商品</text>
</view>
<view class="panel-item">
<text>84</text>
<text>足迹</text>
</view>
</view>
</view>
<!-- 第2个面板 -->
<view class="panel">
<view class="panel-title">
我的订单
</view>
<view class="panel-body">
<view class="panel-item">
<image src="/static/my-icons/icon1.png" class="icon"></image>
<text>待付款</text>
</view>
<view class="panel-item">
<image src="/static/my-icons/icon2.png" class="icon"></image>
<text>待收货</text>
</view>
<view class="panel-item">
<image src="/static/my-icons/icon3.png" class="icon"></image>
<text>退款/退货</text>
</view>
<view class="panel-item">
<image src="/static/my-icons/icon4.png" class="icon"></image>
<text>全部订单</text>
</view>
</view>
</view>
<!-- 第3个面板 -->
<view class="panel">
<view class="panel-list-item">
<text>收货地址</text>
<uni-icons type="arrowright" size="15"></uni-icons>
</view>
<view class="panel-list-item">
<text>联系客服</text>
<uni-icons type="arrowright" size="15"></uni-icons>
</view>
<view class="panel-list-item" @click="logout">
<text>退出登录</text>
<uni-icons type="arrowright" size="15"></uni-icons>
</view>
</view>
</view>
</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {
};
},
computed: {
...mapState('m_user', ['userinfo'])
},
methods: {
...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
async logout() {
const [err, succ] = await uni.showModal({
title: '提示',
content: '确认退出登录吗？'
}).catch(err => err)
if (succ && succ.confirm) {
this.updateAddress({})
this.updateUserInfo({})
this.updateToken('')
}
}
}
}
</script>
<style lang="scss">
.my-userinfo-container {
height: 100%;
background-color: #F4F4F4;
.top-box {
height: 400rpx;
background-color: #C00000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.avatar {
width: 90px;
height: 90px;
border-radius: 45px;
border: 2px solid #FFF;
box-shadow: 0 1px 5px black;
}
.nickname {
font-size: 16px;
color: #FFF;
font-weight: bold;
margin-top: 10px;
}
}
}
.panel-list {
padding: 0 10px;
position: relative;
top: -10px;
.panel {
background-color: white;
border-radius: 3px;
margin-bottom: 8px;
.panel-title {
line-height: 45px;
padding-left: 10px;
font-size: 15px;
border-bottom: 1px solid #F4F4F4;
}
.panel-body {
display: flex;
justify-content: space-around;
.panel-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 10px 0;
font-size: 13px;
.icon {
width: 35px;
height: 35px;
}
}
}
}
}
.panel-list-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
padding: 0 10px;
line-height: 45px;
}
</style>

23
mixins/tabbar-badge.js
View File

@ -1,23 +0,0 @@
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters('m_cart', ['total'])
},
watch: {
total() {
this.setBadge()
}
},
onShow() {
this.setBadge()
},
methods: {
setBadge() {
uni.setTabBarBadge({
index: 2,
text: this.total + ''
})
}
}
}

24
pages.json
View File

@ -46,6 +46,30 @@
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "feedback/feedback",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "address/address",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
},
{
"path" : "medal/medal",
"style" :
{
"navigationBarTitleText" : "",
"enablePullDownRefresh" : false
}
}]
}],
"globalStyle": {

2
pages/index/index.vue
View File

@ -59,7 +59,7 @@
if (!res.success) return uni.$showMsg()
res.data.forEach(item => {
item.uploadPath = 'http://localhost:85' + item.uploadPath
item.uploadPath = uni.$http.baseUrl + item.uploadPath
if (item.position === "top") {
this.topImg = item.uploadPath
} else if (item.position.indexOf("banner") !=-1) {

25
pages/my/my.vue
View File

@ -11,7 +11,7 @@
<!-- 第1个面板 -->
<view class="panel">
<view class="panel-body">
<view class="panel-item">
<view class="panel-item" @click="showMedal()">
<text>0</text>
<text>勋章</text>
</view>
@ -37,7 +37,7 @@
<!-- 第3个面板 -->
<view class="panel">
<view class="function-list">
<view class="panel-list-item" v-for="(item,i) in functionList" :key="i">
<view class="panel-list-item" v-for="(item,i) in functionList" :key="i" @click="navClickHandler(item)">
<image class="function-img" :src="item.uploadPath"></image>
<text style="margin-right: 220px;">{{item.name}}</text>
<uni-icons type="arrowright" size="15"></uni-icons>
@ -118,10 +118,25 @@
})
this.functionList = res.data;
uni.$showMsg('数据请求成功！')
},
showMedal(){
uni.navigateTo({
url:'/subpkg/medal/medal'
})
},
navClickHandler(item) {
//this.about();
uni.navigateTo({
url:'/subpkg/addressNew/addressNew'
})
},
about() {
uni.showModal({
title: '关于',
content: '本程序后端使用Ruoyi实现，仅供学习使用，请勿使用于商业用途，如有问题，请联系QQ：123456',
showCancel: false
})
}
},
navClickHandler(item) {
},
components: {
tabbar

BIN
static/cart_border@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/medal_top.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

210
subpkg/address/address.vue
View File

@ -0,0 +1,210 @@
<template>
<view class="cart-container">
<!-- 选择收货地址的盒子 -->
<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
</view>
<!-- 渲染收货信息的盒子 -->
<view class="address-info-box" v-else @click="chooseAddress">
<view class="row1">
<view class="row1-left">
<view class="username">收货人：{{address.userName}}</view>
</view>
<view class="row1-right">
<view class="phone">电话：{{address.telNumber}}</view>
<uni-icons type="arrowright" size="16"></uni-icons>
</view>
</view>
<view class="row2">
<view class="row2-left">收货地址：</view>
<view class="row2-right">{{addstr}}</view>
</view>
</view>
<!-- 底部的边框线 -->
<image src="/static/cart_border@2x.png" class="address-border"></image>
<!-- 循环渲染地址信息 -->
<view>
<block v-for="(goods, i) in addressList" :key="i">
<view class="goods-item">
<!-- 左侧的盒子 -->
<view class="goods-item-left">
<radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
<!-- 右侧的盒子 -->
<view class="goods-item-right">
<!-- 商品的名字 -->
<view class="goods-name">{{goods.goods_name}}</view>
<view class="goods-info-box">
<view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
<uni-number-box :min="1" :value="goods.goods_count" v-if="showNum" @change="numChangeHandler"></uni-number-box>
</view>
</view>
</view>
</block>
</view>
</view>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
data() {
return {
address: {},
addressList:[{"goods_name":"111"}]
};
},
methods: {
...mapMutations('m_user', ['updateAddress']),
async chooseAddress() {
const [err, succ] = await uni.chooseAddress().catch(err => err)
if (err === null && succ.errMsg === 'chooseAddress:ok') {
// this.address = succ
this.updateAddress(succ)
}
if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) {
// 通过调用这个方法，让用户重新授权
this.reAuth()
}
},
// 让用户重新授权
async reAuth() {
const [err2, confirmResult] = await uni.showModal({
content: '检测到您没打开地址权限，是否去设置打开？',
confirmText: '确认',
cancelText: '取消'
})
if (err2) return
console.log(confirmResult)
if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！')
if (confirmResult.confirm) return uni.openSetting({
success: (settingResult) => {
if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了授权！')
if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功！请选择地址')
}
})
}
},
computed: {
...mapState('m_user', ['address']),
...mapGetters('m_user', ['addstr'])
}
}
</script>
<style lang="scss">
.address-border {
display: block;
width: 100%;
height: 5px;
}
.address-choose-box {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.address-info-box {
font-size: 12px;
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5px;
.row1 {
display: flex;
justify-content: space-between;
.row1-right {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.row2 {
display: flex;
align-items: center;
margin-top: 10px;
.row2-left {
white-space: nowrap;
}
}
}
.cart-container {
padding-bottom: 50px;
}
.cart-title {
height: 40px;
display: flex;
align-items: center;
padding-left: 5px;
border-bottom: 1px solid #EFEFEF;
.cart-title-text {
font-size: 14px;
margin-left: 10px;
}
}
.goods-item {
width: 750rpx;
box-sizing: border-box;
display: flex;
padding: 10px 5px;
border-bottom: 1px solid #f0f0f0;
.goods-item-left {
margin-right: 5px;
display: flex;
justify-content: space-between;
align-items: center;
.goods-pic {
width: 100px;
height: 100px;
display: block;
}
}
.goods-item-right {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 13px;
}
.goods-info-box {
display: flex;
justify-content: space-between;
align-items: center;
.goods-price {
color: #C00000;
font-size: 16px;
}
}
}
}
</style>

52
subpkg/feedback/feedback.vue
View File

@ -0,0 +1,52 @@
<template>
<view class="table_index">
<uni-section title="建议与反馈" type="line"></uni-section>
<uni-forms :modelValue="formData">
<uni-forms-item label="手机" name="mobile">
<uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号码" />
</uni-forms-item>
<uni-forms-item required name="content" label="内容">
<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入您要反馈的内容" />
</uni-forms-item>
<button class="uni-button" size="mini" type="primary" @click="toTable">提交</button>
</uni-forms>
</view>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
data() {
return {
formData: {
mobile: '',
content: '',
},
}
},
methods:{
toTable(){
console.log(this.formData.mobile);
console.log(this.formData.content);
},
setTable(mobile,content){
this.formData.mobile = mobile//获取到的名称
this.formData.content = content//获取到的单位名称
},
}
}
</script>
<style scoped>
.table_index {
background-color: #fff;
height: 100%;
padding: 20px 30px;
}
.uni-button{
font-size: 18px;
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
</style>

131
subpkg/medal/medal.vue
View File

@ -0,0 +1,131 @@
<template>
<view>
<view class="index-background">
<image src="/static/medal_top.jpg"></image>
<view class="panel-list">
<view class="panel">
<view class="panel-body">
<view class="panel-item" @click="taskMedal">
<text>任务勋章</text>
</view>
<view class="panel-item" @click="myMedal">
<text>我的勋章</text>
</view>
</view>
</view>
</view>
</view>
<!-- 任务奖章区域 -->
<view class="nav-list" v-if="showMedal == true" style="width: 1000rpx;">
<view class="nav-item" v-for="(item, i) in taskMedalList" :key="i">
<image :src="item" class="nav-img"></image>
</view>
</view>
<!-- 任务奖章区域 -->
<view class="nav-list" v-else="showMedal == false">
<view class="nav-item" v-for="(item, i) in medalList" :key="i">
<image :src="item" class="nav-img"></image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showMedal:true,
//奖章列表
taskMedalList: [],
//我的奖章列表
myMedalList: [],
};
},
onLoad() {
this.getMedalList()
},
methods: {
async getMedalList() {
const {
data: res
} = await uni.$http.post('/small/scene/manage/listAll',{name:this.name})
if (!res.success) return uni.$showMsg()
res.data.forEach(item=>{
item.uploadPath = uni.$http.baseUrl +item.uploadPath
this.taskMedalList.push(item.uploadPath)
})
uni.$showMsg('数据请求成功！')
},
taskMedal(){
this.showMedal = true
},
myMedal(){
this.showMedal = false
}
}
}
</script>
<style lang="scss">
.nav-list {
display: flex;
justify-content: left;
margin: 5px 0;
}
.nav-img {
margin: 10px;
width: 208rpx;
height: 200rpx;
border-radius: 8px;
}
.index-background {
image {
height: 300rpx;
width: 100%;
}
}
.panel-list {
padding: 0 10px;
position: relative;
top: -10px;
.panel {
background-color: white;
border-radius: 3px;
margin-bottom: 8px;
.panel-title {
line-height: 45px;
padding-left: 10px;
font-size: 15px;
border-bottom: 1px solid #F4F4F4;
}
.panel-body {
display: flex;
justify-content: space-around;
.panel-item {
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 0;
font-size: 13px;
.icon {
width: 35px;
height: 35px;
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save