gubersail-shop-app/pages/me/index.vue

<template>
	<view>
		<view style="background-color:#03803B;height: 250rpx;">
      <view style="padding: 33rpx; display: flex; align-items: flex-start;">
        <image
            :src="userData.avatar || avatarUrl"
            style="width:100rpx; height:100rpx; border-radius:50%;"
            mode="scaleToFill"
            @click="showActionSheet"
        />
        <view style="display: flex; flex-direction: column; margin-left: 13rpx; justify-content: center;">
          <text style="color:#fff; font-size: 30rpx; font-weight: 500;">
            {{ shopInfo.cname || '' }}
          </text>
          <text v-if="shopInfo.srcDistributorName" style="color: rgba(255,255,255,0.85); font-size: 24rpx; margin-top: 6rpx;">
            {{ shopInfo.srcDistributorName }}
          </text>
        </view>
        <view style="margin-left: auto; margin-right: 13rpx;">
          <image
              class="QR"
              src="@/static/images/QR.png"
              @click.stop="inQR"
              style="width: 30px; height: 30px;"
          />
        </view>
      </view>
		</view>
		<view class="card" style="height: 114rpx;">
			<view style="display: flex;justify-content: space-around;align-items: center;height: 114rpx;">
				<text style="color:#818181;font-size: 24rpx;">
					产生积分:
					<text style="color:#FE8301;font-size: 26rpx;">
						{{form.addPoints?form.addPoints:'0.00'}}
					</text>
				</text>
				<text style="color:#818181;font-size: 24rpx;">
					使用积分:
					<text style="color:#FE8301;font-size: 26rpx;">
						{{form.subPoints?form.subPoints:'0.00'}}
					</text>
				</text>
				<text style="color:#818181;font-size: 24rpx;">
					积分余额:
					<text style="color:#FE8301;font-size: 26rpx;">
						{{form.pointsBalance?form.pointsBalance:'0.00'}}
					</text>
				</text>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;height: 141rpx;">
			<view style="display: flex;justify-content: space-around;align-items: center;height: 141rpx;">
				<view style="display: flex;flex-direction:column;align-items: center;" @click="allClick('积分订单')">
					<image src="/static/images/me/280-1.png" style="width:40rpx;height: 40rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">积分订单
						<uni-icons type="right" size="13" color='#8A8A8A'></uni-icons>
					</view>
				</view>
				<view style="display: flex;flex-direction:column;align-items: center;" @click="inIntegralMall">
					<image src="/static/images/me/280-2.png" style="width:40rpx;height: 40rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">积分商城
						<uni-icons type="right" size="13" color='#8A8A8A'></uni-icons>
					</view>
				</view>
				<view style="display: flex;flex-direction:column;align-items: center;" @click="RedemptionOfPoints">
					<image src="/static/images/me/280-3.png" style="width:40rpx;height: 40rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">我的积分
						<uni-icons type="right" size="13" color='#8A8A8A'></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20rpx;height: 238rpx;padding: 20rpx 0;">
			<u-cell-group :border="false">
				<u-cell title="我的订单" value="查看全部订单" :border="false" :clickable="false" @click="allClick('我的订单')">
					<view slot="right-icon">
						<uni-icons type="right" size="18" color='#D2D2D2'></uni-icons>
					</view>
				</u-cell>
			</u-cell-group>
			<view style="display: flex;justify-content: space-around;">
				<!--				<view style="display: flex;flex-direction:column;align-items: center;" @click="obligationBtn('待付款')">
					<image src="/static/images/me/280@2x(1).png" style="width:81rpx;height: 81rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">待付款</view>
				</view>-->
				<view style="display: flex;flex-direction:column;align-items: center;" @click="allClick('待发货')">
					<image src="/static/images/me/280@2x(2).png" style="width:81rpx;height: 81rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">待发货</view>
				</view>
				<view style="display: flex;flex-direction:column;align-items: center;" @click="allClick('待收货')">
					<image src="/static/images/me/280@2x(3).png" style="width:81rpx;height: 81rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">待收货</view>
				</view>
				<view style="display: flex;flex-direction:column;align-items: center;" @click="allClick('已收货')">
					<image src="/static/images/me/280@2x(4).png" style="width:81rpx;height: 81rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">已完成</view>
				</view>
				<view style="display: flex;flex-direction:column;align-items: center;" @click="allClick('退款售后')">
					<image src="/static/images/me/280@2x(5).png" style="width:81rpx;height: 81rpx;" mode="scaleToFill">
					</image>
					<view style="color: #414141;font-size: 26rpx;margin-top: 13rpx;">退款/售后</view>
				</view>
			</view>
		</view>
		<view class="card2" style="margin-top: 20rpx;display: flex;align-items: center;">
			<u-cell-group :border="false">
				<u-cell title="个人资料" :clickable="true" @click="allClick('个人资料')">
					<view slot="icon">
						<image src="/static/images/me/100.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
							mode="scaleToFill">
						</image>
					</view>
					<view slot="right-icon">
						<uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
					</view>
				</u-cell>
				<u-cell title="地址管理" :clickable="true" @click="clickAddress">
					<view slot="icon">
						<image src="/static/images/me/102.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
							mode="scaleToFill">
						</image>
					</view>
					<view slot="right-icon">
						<uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
					</view>
				</u-cell>
				<u-cell title="设置" :clickable="true" :border="false" @click="setUp">
					<view slot="icon">
						<image src="/static/images/me/103.png" style="width:26rpx;height: 27rpx;margin-right: 10rpx;"
							mode="scaleToFill">
						</image>
					</view>
					<view slot="right-icon">
						<uni-icons type="right" size="18" color='#CCCCCC'></uni-icons>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 提取去登录 -->
		<u-modal :show="adminShow" :showCancelButton="true" content='当前还未登录请先登录！！' @confirm="adminConfirm"
			@cancel="adminCancel"></u-modal>
    <uni-popup ref="popup">
      <image style="width: 400rpx;height: 400rpx;background-color: #fff;" :src="imgPopup" />
    </uni-popup>
	</view>
</template>

<script>
	import {
		getAppDetails,
    generateQrCode,
    updateCarUserDetail
	} from '@/api/home/store.js'
	export default {
		data() {
			return {
				avatarUrl: '/static/images/me/head.png',
				tempFilePaths: [],
				userData: uni.getStorageSync('userInfo'),
				badgeList: [],
				form: {},
				adminShow: false,
				shopInfo: {},
        imgPopup: ''
			}
		},
		onShow() {
			this.$u.api.isDisable()
			this.getUpdate()
			this.getAppDetails()
		},
		methods: {
      inQR() {
        if (this.shopInfo.filePath) {
          this.imgPopup = this.shopInfo.filePath
          this.$refs.popup.open()
          return false
        }
        this.imgPopup = null
        uni.showLoading({
          title: '加载中',
          mask: true
        });
        generateQrCode({
          corpId: this.shopInfo.id
        }).then(res => {
          this.$refs.popup.open()
          this.imgPopup = res.data.filePath
        }).finally(() => {
              uni.hideLoading()
        });
      },
			getAppDetails() {
				getAppDetails().then(res => {
					this.shopInfo = res.data
				})
			},
			showActionSheet() {
        console.info('this.userData.checkStatus----', this.userData)
				if (this.shopInfo.checkStatus !== '审核通过') {
					uni.showToast({
						title: "当前用户未授权,请联系经销商",
						icon: "none",
						mask: true
					});
					return
				}
				uni.showActionSheet({
					itemList: ['拍照', '从相册选择'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.chooseMedia('camera')
						} else {
							this.chooseMedia('album')
						}
					}
				})
			},
			chooseMedia(sourceType) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: [sourceType],
					sizeType: ['original', 'compressed'],
					camera: 'front',
					success: (res) => {
						// this.avatarUrl = res.tempFiles[0].tempFilePath
						this.tempFilePaths = res.tempFiles.map(file => file.tempFilePath)
						this.uploadFiles()
					},
					fail: (err) => {
						console.log(err)
					},
				})
			},
      updateUserAvatar(avatar) {
        updateCarUserDetail({avatar: avatar, id: this.userData.id}).then(res => {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        })
      },
			uploadFiles() {
				const uploadTasks = this.tempFilePaths.map((filePath, index) => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'https://b2b.gubersail.com:9000/api/blade-resource/oss/endpoint/put-file',
							filePath: filePath,
							name: 'file',
							header: {
								'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken'),
								appId: uni.getAccountInfoSync().miniProgram.appId
							},
							success: (uploadRes) => {
                this.userData.avatar = JSON.parse(uploadRes.data).data.link
                this.updateUserAvatar(this.userData.avatar)
							},
							fail: (err) => {
								reject(err)
							}
						})
					})
				})
			},
			getUpdate() {
				const updateManager = uni.getUpdateManager();
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					if (res.hasUpdate) {
						updateManager.onUpdateReady(function() {
							uni.showModal({
								title: '更新提示',
								content: '新版本已经准备好，是否重启应用？',
								success: function(res) {
									if (res.confirm) {
										// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
										updateManager.applyUpdate();
									}
								}
							});
						});

						updateManager.onUpdateFailed(function() {
							// 新的版本下载失败
							uni.showModal({
								title: '已经有新版本了哟~',
								content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
							});
						});
					}
				});
			},
			// 确认
			adminConfirm() {
				uni.clearStorageSync();
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			// 取消
			adminCancel() {
				uni.switchTab({
					url: '/pages/me/home'
				})
			},
			clickCall() {
				uni.makePhoneCall({
					phoneNumber: this.form.contactNumber,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			setUp() {
				this.$u.route('/pages/me/setting/index');
			},
			allClick(name) {
				if (name == '我的订单') {
					uni.navigateTo({
						url: '/pages/me/myOrder',
					});
				}
				if (name == '待发货') {
					uni.navigateTo({
						url: '/pages/me/myOrder?xcxStatus=待发货&current=1',
					});
				}
				if (name == '待收货') {
					uni.navigateTo({
						url: '/pages/me/myOrder?xcxStatus=待收货&current=2',
					});
				}
				if (name == '已收货') {
					uni.navigateTo({
						url: '/pages/me/myOrder?xcxStatus=已收货&current=3',
					});
				}
				if (name == '退款售后') {
					uni.navigateTo({
						url: '/pages/me/myOrder?xcxStatus=退款请核,退款中,已取消&current=4',
					});
				}
				if (name == '个人资料') {
					uni.navigateTo({
						url: '/pages/me/myInfo',
					});
				}
			},
			clickMeans() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				uni.$u.route('/pages/views/personalInformation/index');
			},
			clickContacts() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				uni.$u.route('/pages/views/personalInformation/contacts');
			},
			clickAddress() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				this.$u.route('/pages/views/personalInformation/addressManagement');
			},
			// 车型
			clickVehicle() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				this.$u.route('/pages/me/vehicleModel');
			},
			// 积分商城
			clickPointsMall() {
				this.$u.route('/pages/me/pointsMall');
			},
			// 积分兑换记录
			RedemptionOfPoints() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				this.$u.route('/pages/me/integralList/index');
			},
			// 积分获取记录
			obtainRecord() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				this.$u.route('/pages/me/integralList/obtainRecord');
			},
			// 消费记录
			consumptionRecord() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				this.$u.route('/pages/me/integralList/consumptionRecord');
			},
			pageJump(value) {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				uni.$u.route('/pages/views/salesSlip/index', {
					text: value
				});
			},
			obligationBtn(value) {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				uni.$u.route('/pages/views/salesSlip/obligation', {
					text: value
				});
			},
			inIntegralMall() {
				uni.showToast({
					title: "开发中",
					icon: "none",
				});
				return
				uni.$u.route('/pages/integralMall/index');
			}
		}
	}
</script>
<style lang="scss" scoped>
	.action-sheet {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 30rpx;
	}

	.action-item {
		padding: 28rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #f5f5f5;

		text {
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}

	.cancel-btn {
		padding: 28rpx 0;
		text-align: center;
		color: #ff2442;
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.card {
		position: relative;
		margin: 0 32rpx;
		background-color: #fff;
		border-radius: 14rpx;
		bottom: 96rpx;

		::v-deep .u-cell__title-text {
			font-size: 26rpx;
			color: #333333;
		}

		::v-deep .u-cell__value {
			font-size: 24rpx;
			color: #CBCBCB;
		}

		::v-deep .u-icon__icon--info {
			font-size: 28rpx !important;
			color: #CBCBCB;
		}
	}

	.card2 {
		position: relative;
		margin: 0 32rpx;
		background-color: #fff;
		border-radius: 14rpx;
		bottom: 96rpx;

		::v-deep .u-cell__title-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #797979;
		}
	}
</style>