贾少康 / hrApp_four · 提交

转到一个项目

作者 kangaroo125
提交 203d48c9aeb9a76d17fcdc110dc3d5e27431b67f 1 个父辈 140fcca9

111111111111

内嵌 并排对比
正在显示 11 个修改的文件 包含 562 行增加 和 0 行删除
  1 +/.hbuilderx
  2 +/unpackage
  1 +<template name="head">
  2 + <!-- 头部内容 -->
  3 + <view class="headBoxBox" :style="{height: headHeight + 'px'}">
  4 + <view class="headBox" :style="{height: headHeight + 'px',background:'#'+ bgColor}">
  5 + <!-- 状态栏 -->
  6 + <view class="state" :style="{height: statusHeight + 'px'}"></view>
  7 + <!-- 导航栏 -->
  8 + <view class="nav" :style="{height: navHeight + 'px'}">
  9 + <!-- 返回按钮 -->
  10 + <view :class="[backBtnColor ? 'backBtnWhite' : 'backBtnBlack']" v-if="backBtn" @click="backDefault">
  11 + </view>
  12 + <!-- 定位 -->
  13 + <view class="address" v-if="bottomBtn" @click="toAddress">
  14 + <view class="addressText">
  15 + {{address}}
  16 + </view>
  17 + <view class="bottomBtn"></view>
  18 + </view>
  19 + <!-- 首页搜索框 -->
  20 + <view class="search" :style="{height: ellipse + 'px'}" v-if="search" @click="toNewPage">
  21 + <image class="searchImg" src="/static/mine/ic_search.png" mode="widthFix"></image>
  22 + <input type="text" :focus="true" placeholder="搜索" placeholder-class="placeholder" />
  23 + </view>
  24 + <!-- 地址搜索框 -->
  25 + <view class="searchTwo" :style="{height: ellipse + 'px'}" v-if="addressSearch" @click="toNewPage">
  26 + <image class="searchImg" src="/static/mine/ic_search.png" mode="widthFix"></image>
  27 + <input class="overdian" type="text" :value="searchContent" :placeholder="placeholder" placeholder-class="placeholderTwo" @input="iptContent"/>
  28 + </view>
  29 + <!-- 顶部标题 -->
  30 + <view class="title" v-if="showTitle">
  31 + {{title}}
  32 + </view>
  33 + </view>
  34 + </view>
  35 + </view>
  36 +</template>
  37 +
  38 +<script>
  39 + export default {
  40 + name: "head",
  41 + data() {
  42 + return {
  43 + headHeight: '',
  44 +
  45 + //状态栏高度
  46 + statusHeight: '',
  47 +
  48 + //导航栏高度
  49 + navHeight: '',
  50 +
  51 + // 胶囊高度
  52 + ellipse: '',
  53 + };
  54 + },
  55 + props: {
  56 + //背景色
  57 + bgColor: String,
  58 + // 标题
  59 + title: String, //内容
  60 + showTitle: Boolean, //显隐
  61 + // 返回按钮
  62 + backBtnColor: Boolean, //颜色 默认黑色 true为白色
  63 + backBtn: Boolean, // 按钮显隐
  64 + howBack: Boolean, //返回方式 默认返回上一页 true为自定义返回页面
  65 + customURL: String, //自定义返回路径 绝对路径
  66 + // 搜索框
  67 + search: Boolean, //首页搜索框显隐
  68 + addressSearch: Boolean, //普通搜索框显隐
  69 + searchContent: String, // 搜索值
  70 + placeholder: String, //输入框提示信息
  71 + toNewUrl: String, //点击跳转页面路径
  72 + // 地址
  73 + bottomBtn: Boolean, //显隐
  74 + address: String, //地址信息
  75 + newAddress: String, //地址跳转
  76 + // 定位搜索
  77 + showSearhcInput: Boolean
  78 +
  79 + },
  80 + mounted() {
  81 + // 设备信息
  82 + let detail = uni.getSystemInfoSync()
  83 + // 获取设备的系统
  84 + let system = detail.system
  85 + //获取状态栏高度
  86 + this.statusHeight = detail.statusBarHeight
  87 + // 胶囊信息
  88 + let ellipse = uni.getMenuButtonBoundingClientRect()
  89 + //获取胶囊高度
  90 + this.ellipse = ellipse.height
  91 + //获取胶囊距顶部距离
  92 + let absTop = ellipse.top
  93 + //计算导航栏高度 = (胶囊距顶部距离 - 状态栏高度) * 2 + 胶囊高度
  94 + this.navHeight = (absTop - this.statusHeight) * 2 + this.ellipse
  95 + //计算整体高度
  96 + let cheack = /iOS/
  97 + //判断设备型号
  98 + if (cheack.test(system)) {
  99 + // iOS
  100 + this.headHeight = this.statusHeight + this.navHeight + 4
  101 + } else {
  102 + //Android
  103 + this.headHeight = this.statusHeight + this.navHeight
  104 + }
  105 + },
  106 + methods: {
  107 + //返回上一页
  108 + backDefault() {
  109 + if (this.howBack) {
  110 + uni.reLaunch({
  111 + url: this.customURL
  112 + })
  113 + console.log("请填写指定路径");
  114 + console.log(this.customURL);
  115 + } else {
  116 + uni.navigateBack({
  117 + delta: 1
  118 + })
  119 + }
  120 + },
  121 + // 搜索框点击
  122 + toNewPage() {
  123 + uni.navigateTo({
  124 + url: this.toNewUrl
  125 + })
  126 + },
  127 + //地址跳转
  128 + toAddress() {
  129 + let that = this
  130 + uni.authorize({
  131 + scope: 'scope.userLocation',
  132 + success() {
  133 + uni.navigateTo({
  134 + url: that.newAddress
  135 + })
  136 + },
  137 + fail(err){
  138 + console.log(err)
  139 + that.$emit('alertModel',true)
  140 + }
  141 + })
  142 + },
  143 + //监听输入内容
  144 + iptContent(e){
  145 + // console.log(e)
  146 + this.$emit('getChild',e)
  147 + let val = e.detail.value
  148 + if(/^[\x00-\xff]/.test(val)){
  149 + let v = {
  150 + first:val
  151 + }
  152 + this.$myRequest('/api/index/cit',v).then(res =>{
  153 + this.$emit('getRes',res)
  154 + })
  155 + }else{
  156 + let v = {
  157 + shortname:val
  158 + }
  159 + this.$myRequest('/api/index/keywords',v).then(res =>{
  160 + this.$emit('getRes',res)
  161 + })
  162 + }
  163 + }
  164 + },
  165 + }
  166 +</script>
  167 +
  168 +<style>
  169 + .headBoxBox {
  170 + width: 100%;
  171 + }
  172 + .headBox,
  173 + .state,
  174 + .nav {
  175 + width: 750rpx;
  176 + }
  177 + /* 头部整体内容 */
  178 + .headBox {
  179 + position: fixed;
  180 + top: 0;
  181 + left: 0;
  182 + z-index: 100;
  183 + }
  184 + /* 状态栏 */
  185 + .state {
  186 + position: relative;
  187 + }
  188 +
  189 + /* 导航栏 */
  190 + .nav {
  191 + display: flex;
  192 + align-items: center;
  193 + position: relative;
  194 + }
  195 +
  196 + /* 搜索框 */
  197 + .search {
  198 + width: 400rpx;
  199 + border-radius: 200rpx;
  200 + display: flex;
  201 + justify-content: center;
  202 + align-items: center;
  203 + position: absolute;
  204 + top: 50%;
  205 + left: 50%;
  206 + transform: translate(-55%, -50%);
  207 + background: rgba(255, 255, 255, 0.8);
  208 + }
  209 +
  210 + .searchTwo {
  211 + padding-left: 32rpx;
  212 + width: 448rpx;
  213 + border-radius: 200rpx;
  214 + display: flex;
  215 + justify-content: flex-start;
  216 + align-items: center;
  217 + position: absolute;
  218 + top: 50%;
  219 + left: 48%;
  220 + transform: translate(-60%, -50%);
  221 + background: rgba(247, 248, 250, 0.8);
  222 + }
  223 +
  224 + .searchImg {
  225 + width: 32rpx;
  226 + height: 32rpx;
  227 + }
  228 +
  229 + .search>input {
  230 + width: 60rpx;
  231 + color: #323233;
  232 + }
  233 +
  234 + .searchTwo>input {
  235 + color: #323233;
  236 + margin-left: 8rpx;
  237 + }
  238 +
  239 + .placeholder {
  240 + color: #969799;
  241 + text-align: center;
  242 + font-size: 28rpx;
  243 + }
  244 +
  245 + .placeholderTwo {
  246 + font-size: 28rpx;
  247 + color: #C8C9CC;
  248 + }
  249 +
  250 + .backBtnBlack {
  251 + margin-left: 32rpx;
  252 + right: 50rpx;
  253 + top: 150rpx;
  254 + content: "";
  255 + display: inline-block;
  256 + height: 20rpx;
  257 + width: 20rpx;
  258 + border-width: 0 0 2px 2px;
  259 + border-color: #000;
  260 + border-style: solid;
  261 + transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  262 + -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  263 + }
  264 +
  265 + .backBtnWhite {
  266 + margin-left: 32rpx;
  267 + right: 50rpx;
  268 + top: 150rpx;
  269 + content: "";
  270 + display: inline-block;
  271 + height: 20rpx;
  272 + width: 20rpx;
  273 + border-width: 0 0 2px 2px;
  274 + border-color: #fff;
  275 + border-style: solid;
  276 + transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  277 + -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  278 + }
  279 +
  280 + .bottomBtn {
  281 + right: 50rpx;
  282 + top: 150rpx;
  283 + content: "";
  284 + display: inline-block;
  285 + height: 16rpx;
  286 + width: 16rpx;
  287 + border-width: 0 2px 2px 0;
  288 + border-color: #fff;
  289 + border-style: solid;
  290 + transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  291 + -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  292 + }
  293 +
  294 + .address {
  295 + display: flex;
  296 + align-items: center;
  297 + margin-left: 32rpx;
  298 + }
  299 +
  300 + .addressText {
  301 + color: #fff;
  302 + font-weight: 600;
  303 + width: 96rpx;
  304 + overflow: hidden;
  305 + white-space: nowrap;
  306 + }
  307 +
  308 + .title {
  309 + position: absolute;
  310 + left: 50%;
  311 + top: 50%;
  312 + transform: translate(-50%, -50%);
  313 + }
  314 +
  315 + .overdian{
  316 + overflow: hidden;
  317 + text-overflow: ellipsis;
  318 + display: -webkit-box;
  319 + -webkit-box-orient: vertical;
  320 + }
  321 +</style>
  1 +<template>
  2 + <view class="inactive">
  3 + <u-navbar :back-icon-color="'#FFFFFF'" :is-back="true" title="邀请好友" :title-color="'#FFFFFF'" :background="background"></u-navbar>
  4 + <view class="invitationContainer flex flexColumn justifyC alignC">
  5 + <image src="/static/evering/ic_img_invitatio.png" class="invitationContainerImage"></image>
  6 + <view class="firstBox flex flexColumn alignC">
  7 + <view class="firstBoxTitle">已邀请人数</view>
  8 + <view class="firstBoxText">100人</view>
  9 + </view>
  10 + <view class="twoBox flex flexColumn justifyBetween">
  11 + <view class="twoBoxContainer flex">
  12 + <image src="/static/evering/ic_icon.png" mode="widthFix"></image>
  13 + <view class="twoBoxContainerText">生成专属邀请码</view>
  14 + </view>
  15 + <view class="line1" style="width: 574rpx;height: 1rpx; background-color: #8F939C;"></view>
  16 + <view class="twoBoxContainer flex">
  17 + <image src="/static/evering/ic_List.png" mode="widthFix"></image>
  18 + <view class="twoBoxContainerText">查看邀请列表</view>
  19 + </view>
  20 + </view>
  21 + <view class="thirdBox flex flexColumn justifyBetween alignC">
  22 + <image src="/static/evering/yaoqingshuoming.png" mode=""></image>
  23 + <view class="thirdContainerBox">1.邀请列表</view>
  24 + <view class="thirdContainerBox">2.邀请列表</view>
  25 + <view class="thirdContainerBoxT">3.邀请列表</view>
  26 + </view>
  27 + </view>
  28 + </view>
  29 +</template>
  30 +
  31 +<script>
  32 +export default {
  33 + data() {
  34 + return {
  35 + background: {
  36 + // 渐变色
  37 + backgroundImage: 'linear-gradient(135deg, rgba(255, 148, 48, 1) 0%, rgba(254, 206, 51, 1) 100%)'
  38 + }
  39 + };
  40 + },
  41 + methods: {}
  42 +};
  43 +</script>
  44 +
  45 +<style>
  46 +.inactive {
  47 + background: linear-gradient(60deg, rgba(255, 148, 48, 1) 0%, rgba(254, 206, 51, 1) 100%);
  48 + padding: 0 32rpx;
  49 +}
  50 +.invitationContainerImage {
  51 + margin-top: 20rpx;
  52 + width: 612rpx;
  53 + height: 490rpx;
  54 +}
  55 +.firstBox {
  56 + width: 686rpx;
  57 + height: 346rpx;
  58 + border-radius: 12rpx;
  59 + opacity: 1;
  60 + margin-top: -16rpx;
  61 + padding-top: 80rpx;
  62 + background: rgba(255, 255, 255, 1);
  63 + box-shadow: 0 16rpx 32rpx 0 rgba(94, 119, 156, 0.08);
  64 +}
  65 +.firstBoxTitle {
  66 + height: 44rpx;
  67 + color: rgba(0, 0, 0, 1);
  68 + font-size: 32rpx;
  69 + font-weight: 400;
  70 + font-family: 'PingFang SC';
  71 + text-align: center;
  72 + line-height: 44rpx;
  73 + letter-spacing: 0.6rpx;
  74 +}
  75 +.firstBoxText {
  76 + margin-top: 72rpx;
  77 + height: 78rpx;
  78 + opacity: 1;
  79 + color: rgba(25, 24, 51, 0.9);
  80 + font-size: 72rpx;
  81 + font-weight: 700;
  82 + font-family: 'D-DIN';
  83 + text-align: center;
  84 +}
  85 +.twoBox {
  86 + padding: 28rpx 56rpx;
  87 + width: 686rpx;
  88 + height: 210rpx;
  89 + margin-top: 36rpx;
  90 + border-radius: 12rpx;
  91 + opacity: 1;
  92 + background: rgba(255, 255, 255, 1);
  93 + box-shadow: 0 16rpx 32rpx 0 rgba(94, 119, 156, 0.08);
  94 +}
  95 +.twoBoxContainer image {
  96 + width: 40rpx;
  97 + height: 40rpx;
  98 +}
  99 +.twoBoxContainerText {
  100 + margin-left: 16rpx;
  101 + width: 196rpx;
  102 + height: 40rpx;
  103 + opacity: 1;
  104 + color: rgba(50, 50, 51, 1);
  105 + font-size: 28rpx;
  106 + font-weight: 400;
  107 + font-family: 'PingFang SC';
  108 + text-align: center;
  109 + line-height: 40rpx;
  110 +}
  111 +.thirdBox {
  112 + width: 686rpx;
  113 + height: 406rpx;
  114 + margin-top: 28rpx;
  115 + margin-bottom: 46rpx;
  116 + padding-top: 34rpx;
  117 + border-radius: 12rpx;
  118 + opacity: 1;
  119 + background: rgba(255, 255, 255, 1);
  120 + box-shadow: 0 16rpx 32rpx 0 rgba(94, 119, 156, 0.08);
  121 +}
  122 +.thirdBox image {
  123 + width: 244rpx;
  124 + height: 54rpx;
  125 + margin-bottom: 44rpx;
  126 +}
  127 +.thirdContainerBox {
  128 + width: 574rpx;
  129 + height: 70rpx;
  130 + color: rgba(50, 50, 51, 1);
  131 + font-size: 26rpx;
  132 + font-weight: 400;
  133 + margin-bottom: 32rpx;
  134 + border-bottom: 1rpx solid rgba(235, 237, 240, 1);
  135 +}
  136 +.thirdContainerBoxT{
  137 + width: 574rpx;
  138 + height: 70rpx;
  139 + color: rgba(50, 50, 51, 1);
  140 + font-size: 26rpx;
  141 + font-weight: 400;
  142 + margin-bottom: 32rpx;
  143 +}
  144 +
  145 +</style>
  1 +<template>
  2 + <view>
  3 + <u-navbar :back-icon-color="'#FFFFFF'" :is-back="true" title="邀请好友" :title-color="'#FFFFFF'" :background="background"></u-navbar>
  4 + <view class="invitationContainer flex flexColumn justifyC alignC">
  5 + <image :src="erweima" mode="widthFix" :show-menu-by-longpress="true"></image>
  6 + <view class="invitationContainerText">保存图片</view>
  7 + </view>
  8 + <view class="invitationContainerButten" @click="getImage">保存相册</view>
  9 + </view>
  10 +</template>
  11 +
  12 +<script>
  13 +export default {
  14 + data() {
  15 + return {
  16 + background: {
  17 + // 渐变色
  18 + backgroundImage: 'linear-gradient(135deg, rgba(255, 148, 48, 1) 0%, rgba(254, 206, 51, 1) 100%)'
  19 + },
  20 + erweima:'/static/evering/ic_18.png'
  21 + };
  22 + },
  23 + methods: {
  24 + getImage() {
  25 + uni.showToast({
  26 + icon: 'loading',
  27 + title: '正在保存...'
  28 + });
  29 + uni.saveImageToPhotosAlbum({
  30 + filePath: this.erweima,
  31 + success: () => {
  32 + console.log('保存成功');
  33 + uni.showToast({
  34 + icon: 'success',
  35 + title: '保存成功'
  36 + });
  37 + },
  38 + fail: () => {
  39 + console.log('保存失败');
  40 + uni.showToast({
  41 + icon: 'error',
  42 + title: '保存失败'
  43 + });
  44 + }
  45 + });
  46 + },
  47 + }
  48 +};
  49 +</script>
  50 +
  51 +<style>
  52 +page {
  53 + width: 100%;
  54 + height: 100%;
  55 + background: linear-gradient(60deg, rgba(255, 148, 48, 1) 0%, rgba(254, 206, 51, 1) 100%);
  56 + padding: 0 32rpx;
  57 +}
  58 +.invitationContainer {
  59 + width: 686rpx;
  60 + height: 830rpx;
  61 + margin-top: 90rpx;
  62 + background-image: url(https://s4.ax1x.com/2022/02/08/H15uwQ.png);
  63 + background-size: cover;
  64 +}
  65 +.invitationContainer image {
  66 + width: 338rpx;
  67 + height: 338rpx;
  68 +}
  69 +.invitationContainerText {
  70 + width: 128rpx;
  71 + height: 32rpx;
  72 + margin-top: 92rpx;
  73 + color: rgba(0, 0, 0, 1);
  74 + font-size: 32rpx;
  75 + font-weight: 700;
  76 + font-family: 'PingFang SC';
  77 + text-align: left;
  78 + line-height: 32rpx;
  79 +}
  80 +.invitationContainerButten {
  81 + width: 456rpx;
  82 + height: 88rpx;
  83 + border-radius: 44rpx;
  84 + opacity: 1;
  85 + color: rgba(255, 149, 49, 1);
  86 + font-size: 32rpx;
  87 + font-weight: 700;
  88 + font-family: 'PingFang SC';
  89 + text-align: center;
  90 + line-height: 88rpx;
  91 + margin: 178rpx auto 0;
  92 + background: linear-gradient(135deg, rgba(255, 227, 145, 1) 0%, rgba(255, 223, 124, 1) 100%);
  93 +}
  94 +</style>