From b6b181050a3831525007d2d1cd932e505494a48d Mon Sep 17 00:00:00 2001
From: lin <1005713861@163.com>
Date: Wed, 29 Apr 2026 15:49:18 +0800
Subject: [PATCH] UI: 购有趣首页+我的页面调整
---
pages/index/index.vue | 673 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 402 insertions(+), 271 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 6270525..c1ceeb2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,97 +1,33 @@
<template>
- <view class="index">
- <view class="status_bar"></view>
- <view class="index-top">
- <view class="index-title">
- <view class="index-title-view index-title-view1">
- <view class="index-title-view-lf">
- <image src="@/static/imgs/index-logo.png" mode=""></image>
- </view>
- <view class="index-title-view-lf2">趋势好货放心购</view>
+ <view class="page-container index">
+ <image class="page-bg" src="@/static/imgs/index-top.png" mode="scaleToFill"></image>
+ <view class="content" style="padding-bottom: 200rpx;">
+ <view class="hLogo">
+ <view class="hLogoView">
+ <view class="hLogo-1">
+ <image class="h-logo" src="/static/imgs/index-logo.png" mode=""></image>
</view>
- <view class="index-title-view index-title-view2">
- <view class="index-title-view-rf">
- <view class="">
- <image src="@/static/imgs/qiandao.png" mode=""></image>
- <text>签到打卡</text>
- </view>
- </view>
- <view class="index-title-view-rf">
- <view class="">
- <image src="@/static/imgs/kefu.png" mode=""></image>
- <text>联系客服</text>
- </view>
- </view>
+ <view class="hLogo-2" @tap="$util.goPages('../search/search')">
+ <image class="s-icon" src="/static/imgs/search.png" mode=""></image>
+ <input type="text" placeholder="请搜索您想要的商品" />
+ <view class="s-btn">搜索</view>
</view>
</view>
- <view class="search">
- <view class="search-1">
- <image src="@/static/imgs/s2.png" mode=""></image>
- <input type="text" placeholder="请输入关键词" />
- </view>
- <view class="search-2">
- <view class="">搜索</view>
- </view>
- </view>
- <view class="cates">
- <view class="cates-v" v-for="(item, index) in catesNavData" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
- <image class="cates-v-icon" :src="item.icon" mode=""></image>
- <view class="">{{item.title}}</view>
- </view>
+ </view>
+
+ <view class="cates" v-if="catesNavData" style="margin-top: 0;">
+ <view class="cates-v" v-for="(item, index) in catesNavData" @tap="$util.goPages('/pages/catesList/catesList?catesId=' + item.id + '&title=' + item.title)">
+ <image class="cates-v-icon" :src="item.icon" mode=""></image>
+ <view class="">{{item.title}}</view>
</view>
</view>
- <view class="banner">
- <swiper class="swiper" circular :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :autoplay="autoplay" :indicator-active-color="indicatorActiveColor" :interval="interval" :duration="duration">
- <swiper-item v-for="(item, index) in bannerData" @tap="$util.goPages('/pages/ginfo/ginfo?id=' + item.goodsid)">
- <image lazy-load :src="item.icon" mode=""></image>
- </swiper-item>
- </swiper>
- </view>
- <view class="comm">
- <view class="comm-1">
- <view class="comm-title">
- <image src="/static/imgs/ptyx.png" mode=""></image>
- </view>
- <view class="comm-goods">
- <view class="comm-goods-v" v-for="(item, index) in prefGoods" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
- <view class="">
- <image :src="item.icon" mode=""></image>
- <text>¥{{item.price}}</text>
- </view>
- </view>
- </view>
- </view>
- <view class="comm-2"></view>
- <view class="comm-3">
- <view class="comm-title">
- <image src="@/static/imgs/jfdh.png" mode=""></image>
- </view>
- <view class="comm-goods">
- <view class="comm-goods-v" v-for="(item, index) in pointGoods" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
- <view class="">
- <image :src="item.icon" mode=""></image>
- <text>∮{{item.points}}</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="hots">
- <view class="hots-title" @tap="$util.goPages('/pages/catesList/catesList?is_hot=1&title=热门推荐')">
- <image class="hots-icon" src="@/static/imgs/rmtj.png" mode=""></image>
- <view class="hots-rgt">
- <text>大家都在买</text>
- <image src="@/static/imgs/right.png" mode=""></image>
- </view>
- </view>
- <view class="hots-goods">
- <view class="hots-goods-v" v-for="(item, index) in hotGoods" @click="$util.goPages('/pages/ginfo/ginfo?id=' + item.id)">
- <view class="">
- <image :src="item.icon" mode=""></image>
- <text>¥{{item.price}}</text>
- </view>
- </view>
+
+
+ <view class="cateNav">
+ <view class="cateNav-item" :class="{active:actIndex===index}" v-for="(item, index) in cateNavList" :key="index" @click="navClick(item,index)">
+ <view class="cateNav-title">{{item.title}}</view>
+ <view class="cateNav-desc">{{item.desc}}</view>
</view>
</view>
<view class="goods-main">
@@ -103,202 +39,397 @@
<view class="goods-price">
<view>¥</view>
<view class="red">{{itm.price}}</view>
- <view class="hyj">
+ <!-- <view class="hyj">
<image src="@/static/imgs/hyj.png" mode=""></image>
- </view>
- <view>¥</view>
- <view class="red">{{itm.price}}</view>
+ </view> -->
</view>
</view>
</view>
</view>
</view>
- <uni-popup ref="popup2" type="center" :is-mask-click="false">
- <view class="popup-content">
- <view class="edu-view edu-view2">
- <image src="/static/imgs/close.png" class="close-edu" mode="" @tap="$refs.popup2.close()"></image>
- <view class="edu-view-desc2">认证领取额度</view>
- <image class="edu-icon-succ" src="/static/imgs/auths.png" mode=""></image>
- <view class="edu-view-desc3">
- 请您先认证个人信息，然后立即领取额度
- </view>
- <view class="edu-btns" @tap="goLingqu">立即领取</view>
- </view>
- </view>
- </uni-popup>
- </view>
+ </view>
+ </view>
</template>
<script>
- import permision from "@/js_sdk/wa-permission/permission.js"
- export default {
- data() {
- return {
- scrollIndex: 0,
- scrollCurrent: '',
- staHeight: 0,
- paddingHeight: 0,
- indicatorDots: true,
- indicatorColor: '#e3b400',
- indicatorActiveColor: '#ffffff',
- autoplay: true,
- interval: 3000,
- duration: 500,
- bannerData: [],
- catesNavData: [],
- goodsData: [],
- prefGoods: [],
- hotGoods: [],
- pointGoods: [],
- userInfo: null,
- config: null,
+import permision from "@/js_sdk/wa-permission/permission.js"
+export default {
+ props: {
+ // 开启动画
+ animation: {
+ type: Boolean,
+ default: true
+ },
+ type: {
+ type: String,
+ default: 'top'
+ },
+ //是否是原生头部
+ isNativeHead:{
+ type: Boolean,
+ default: true
+ },
+ },
+ data() {
+ return {
+ contactsFlag: false,
+ staHeight: 0,
+ paddingHeight: 0,
+ indicatorDots: true,
+ indicatorColor: '#e3b400',
+ indicatorActiveColor: '#ffffff',
+ autoplay: true,
+ interval: 3000,
+ duration: 500,
+ bannerData: [],
+ catesNavData: [],
+ catesHotData: [],
+ userInfo: null,
+ config: null,
+ statusBarHeight: 30,
+ StatusBar: 0,
+ hotGoods: null,
+ newGoods: null,
+ hotCates: null,
+ catesId: 0,
+ is_hot: '',
+ pageIndex: 1,
+ pageSize: 10,
+ goodsData: [],
+ cateNavList: [
+ {
+ title: '精选',
+ desc: '猜你喜欢',
+ skey: '手机数码',
+ catesId: 11,
+ },{
+ title: '人气',
+ desc: '好物精选',
+ skey: '家用电器',
+ catesId: 2,
+ },{
+ title: '休闲',
+ desc: '天天低价',
+ skey: '美妆个护',
+ catesId: 4,
+ },{
+ title: '母婴',
+ desc: '热门榜单',
+ skey: '母婴童玩',
+ catesId: 5,
+ },
+ ],
+ actIndex: 0,
+ }
+ },
+ onShow() {
+ this.getData()
+ this.getConfig()
+ this.getUserInfo()
+ // #ifdef APP-PLUS
+ plus.navigator.setStatusBarBackground('transparent');
+ // #endif
+ },
+ created() {
+ this.actIndex = 0;
+ this.catesId = 11;
+ this.catesGoods()
+ },
+ onLoad() {
+ const systemInfo = uni.getSystemInfoSync();
+ this.statusBarHeight = systemInfo.statusBarHeight || 30;
+ },
+ onReady() {
+ // #ifdef APP-PLUS
+ this.getSystemInfo();
+ // #endif
+ },
+ mounted() {
+ },
+ methods: {
+ navClick(data,index) {
+ this.actIndex = index;
+ this.catesId = data.catesId
+ this.catesGoods()
+ },
+ //获取分类商品
+ catesGoods(){
+ this.$util.post('Goods/getCatesGoods', {catesId: this.catesId, is_hot: this.is_hot, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
+ if(res.code == 1) {
+ this.goodsData = res.data.list
}
- },
- onShow() {
- this.getData()
- this.getConfig()
- this.getUserInfo()
- },
- onLoad() {
- },
- onReady() {
- // #ifdef APP-PLUS
- plus.navigator.setStatusBarBackground('#FFD2D8')
- // #endif
- },
- methods: {
- getData () {
- this.$util.post('Goods/getIndexData').then(res => {
- this.bannerData = res.data.bannerData
- this.catesNavData = res.data.catesNavData
- this.pointGoods = res.data.pointGoods
- this.hotGoods = res.data.hotGoods
- this.prefGoods = res.data.prefGoods
- this.goodsData = res.data.catesNavData[1].goods
- })
- },
- scrollClick (index) {
- this.scrollIndex = index
- this.scrollCurrent = 'scrollItem' + index
- this.goodsData = []
- this.goodsData = this.catesNavData[index].goods
- setTimeout(() => {
- this.scrollCurrent = ''; // 重置以便下次可以滚动到相同位置
- }, 500);
- },
- getConfig() {
- let t = this
- t.$util.post('Index/getConfig').then(res => {
- if(res.code == 1) {
- t.config = res.data
- }
- })
- },
-
- getUserInfo () {
- let t = this
- t.$util.post('User/getUser').then(res => {
- if(res.code == 1){
- this.userInfo = res.data
- if(res.data.over_auth == 0 && t.config.put_open == 2){
- setTimeout(() => {
- t.$refs.popup2.open()
- }, 100)
- } else {
- setTimeout(() => {
- t.$refs.popup2.close()
- }, 100)
- }
- if(res.data.contacts == 0 && uni.getSystemInfoSync().platform == 'android' && this.config.put_open == 2){
- t.requestAndroidPermission('android.permission.READ_CONTACTS')
- }
- }
- })
- },
- goLingqu () {
- if(!this.$util.checkLogin('/pages/index/index')){
- return
- }
- if(this.userInfo && this.userInfo.over_auth == 1) {
- return uni.showToast({
- title: '您已完成认证!',
- icon: 'success'
- })
- }
- let goUrl = ''
- if(this.userInfo.idcard_auth == 0){
- goUrl = '/pages/idcard/idcard'
- } else if(this.userInfo.face_auth == 0){
- goUrl = '/pages/face/face'
- } else if(this.userInfo.job_auth == 0){
- goUrl = '/pages/job/job'
- } else if(this.userInfo.bank_auth == 0){
- goUrl = '/pages/addBank/addBank?backUrl=/pages/edu/edu'
- } else {
- return uni.showToast({
- title: '您已完成认证!',
- icon: 'success'
- })
- }
- if(goUrl != '') {
- uni.navigateTo({
- url: goUrl
- })
- }
- },
- async requestAndroidPermission(permisionID) {
- let t = this
- let result = await permision.requestAndroidPermission(permisionID)
- if (result == 1) {
- t.setContacts()
- } else if (result == 0) {
- this.$util.goSetting()
- } else {
- this.$util.goSetting()
- }
- },
-
- setContacts () {
- uni.showLoading({
- title: '授权中...'
- })
- let self = this
- plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
- addressbook.find(["displayName","phoneNumbers"],function(contacts){
- let ob = []
- let phone = []
- for(let i in contacts){
- let json = {}
- if(contacts[i].phoneNumbers.length > 0 && contacts[i].displayName){
- if(phone.indexOf(contacts[i].phoneNumbers[0].value) < 0){
- json.name = contacts[i].displayName
- json.phone = contacts[i].phoneNumbers[0].value
- phone = phone.concat(json.phone)
- ob = ob.concat(json)
- }
- }
- }
+ })
+ },
+ //获取状态栏高度
+ getSystemInfo() {
+ let _this = this;
+ uni.getSystemInfo({
+ success: function(e) {
+ _this.StatusBar = e.statusBarHeight + 'px'; //用于自定义头部时，给手机状态栏留出位置,可通过isNativeHead这个参数控制
+ }
+ })
+ },
+ getConfig() {
+ let t = this
+ t.$util.post('Index/getConfig').then(res => {
+ if(res.code == 1) {
+ console.log('config', res.data)
+ t.config = res.data
+ }
+ })
+ },
+ getUserInfo () {
+ let t = this
+ t.$util.post('User/getUser').then(res => {
+ console.log(res);
+ if(res.code == 1){
+ this.userInfo = res.data
+ if(res.data.over_auth == 0 && t.config.put_open == 2){
+ setTimeout(() => {
+ //t.$refs.popup2.open()
+ }, 100)
+ }
+ // if(res.data.contacts == 0 && uni.getSystemInfoSync().platform == 'android'){
+ // // t.contactsFlag = !t.contactsFlag
+ // t.requestAndroidPermission('android.permission.READ_CONTACTS')
+ // }
+ }
+ })
+ },
+ handleAuthorize() {
+ this.contactsFlag = false;
+ this.requestAndroidPermission('android.permission.READ_CONTACTS')
+ },
+ // 4. 手动点击“拒绝”按钮
+ handleReject() {
+ this.contactsFlag = false;
+ uni.showToast({ title: '已拒绝通讯录权限', icon: 'none' });
+ // 可根据业务需求处理拒绝后的逻辑（如限制功能使用）
+ },
+ go_auth () {
+ let goUrl = ''
+ if(this.userInfo.idcard_auth == 0){
+ goUrl = '/pages/idcard/idcard'
+ } else if(this.userInfo.face_auth == 0){
+ goUrl = '/pages/face/face'
+ } else if(this.userInfo.job_auth == 0){
+ goUrl = '/pages/job/job'
+ } else if(this.userInfo.bank_auth == 0){
+ goUrl = '/pages/addBank/addBank?backUrl=/pages/edu/edu'
+ }
+ console.log(goUrl);
+ if(goUrl != '') {
+ uni.navigateTo({
+ url: goUrl
+ })
+ }else{
+ this.$refs.popup2.close()
+ uni.showToast({
+ title: '无法认证!',
+ icon: 'error'
+ })
+ }
+ },
+ goLingqu () {
+ if(!this.userInfo){
+ return uni.showToast({
+ title: '请先登录!',
+ icon: 'error'
+ })
+ }
+ if(this.userInfo && this.userInfo.over_auth == 1) {
+ return uni.showToast({
+ title: '您已完成认证!',
+ icon: 'success'
+ })
+ }
+ let goUrl = ''
+ if(this.userInfo.idcard_auth == 0){
+ goUrl = '/pages/idcard/idcard'
+ } else if(this.userInfo.face_auth == 0){
+ goUrl = '/pages/face/face'
+ } else if(this.userInfo.job_auth == 0){
+ goUrl = '/pages/job/job'
+ } else if(this.userInfo.bank_auth == 0){
+ goUrl = '/pages/addBank/addBank?backUrl=/pages/edu/edu'
+ } else {
+ return uni.showToast({
+ title: '您已完成认证!',
+ icon: 'success'
+ })
+ }
+ if(goUrl != '') {
+ uni.navigateTo({
+ url: goUrl
+ })
+ }
+ },
+ async requestAndroidPermission(permisionID) {
+ let t = this
+ let result = await permision.requestAndroidPermission(permisionID)
+ if (result == 1) {
+ t.setContacts()
+ } else if (result == 0) {
+ this.$util.goSetting()
+ } else {
+ this.$util.goSetting()
+ }
+ },
+ getData () {
+ this.$util.post('Goods/getIndexData').then(res => {
+ console.log('getIndexData',res)
+ this.bannerData = res.data.bannerData
+ this.catesNavData = res.data.catesNavData
+ this.catesHotData = res.data.catesHotData
+ this.hotGoods = res.data.hotGoods
+ this.newGoods = res.data.newGoods
+ this.hotCates = res.data.hotCates
+ })
+ },
+ setContacts () {
+ uni.showLoading({
+ title: '授权中...'
+ })
+ let self = this
+ plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
+ addressbook.find(["displayName","phoneNumbers"],function(contacts){
+ let ob = []
+ let phone = []
+ for(let i in contacts){
+ let json = {}
+ if(contacts[i].phoneNumbers.length > 0 && contacts[i].displayName){
+ if(phone.indexOf(contacts[i].phoneNumbers[0].value) < 0){
+ json.name = contacts[i].displayName
+ json.phone = contacts[i].phoneNumbers[0].value
+ phone = phone.concat(json.phone)
+ ob = ob.concat(json)
+ }
+ }
+ }
- if(ob.length > 0){
- self.$util.post('Contacts/setContacts', ob).then(res => {
- uni.hideLoading()
- uni.showToast({
- title: res.msg || '授权成功!',
- icon: 'success',
- })
- })
- }
- uni.hideLoading()
- })
- },
- function (e){
- this.requestAndroidPermission('android.permission.READ_CONTACTS')
- })
- },
- }
- }
+ if(ob.length > 0){
+ self.$util.post('Contacts/setContacts', ob).then(res => {
+ uni.hideLoading()
+ uni.showToast({
+ title: res.msg || '授权成功!',
+ icon: 'success',
+ })
+ })
+ }
+ uni.hideLoading()
+ })
+ },
+ function (e){
+ this.requestAndroidPermission('android.permission.READ_CONTACTS')
+ })
+ },
+ }
+}
</script>
<style>
- @import url(@/static/css/index.css);
+@import url(@/static/css/index.css);
+</style>
+<style lang="scss">
+ .cateNav {
+ display: flex;
+ justify-content: center;
+ gap: 30rpx;
+ margin-top: 40rpx;
+ margin-bottom: 30rpx;
+ .cateNav-item {
+ width: 20%;
+ text-align: center;
+ .cateNav-title {
+ color: #333333;
+ font-weight: bold;
+ font-size: 32rpx;
+ }
+ .cateNav-desc {
+ color: #666666;
+ font-size: 24rpx;
+ }
+ }
+ .cateNav-item.active {
+ .cateNav-title {
+ color: #4766FE;
+ }
+ .cateNav-desc {
+ color: #ffffff;
+ background-color: #4766FE;
+ border-radius: 50rpx;
+ padding: 12rpx 0;
+ }
+ }
+ }
+.uni-popup {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 99999;
+ overflow: hidden;
+ &__wrapper {
+ position: absolute;
+ z-index: 9999999;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ &.ani {
+ /* #ifndef APP-NVUE */
+ transition: all 0.3s;
+ /* #endif */
+ }
+ &.top {
+ top: 0;
+ width:705rpx;
+ /* #ifdef APP-NVUE */
+ left:22.5rpx;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ left:0;
+ transform: translateY(-705rpx);
+ /* #endif */
+ }
+ &-box {
+ position: relative;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ }
+ &.uni-custom {
+ & .uni-popup__wrapper-box {
+ width: 705rpx;
+ /* #ifndef APP-NVUE */
+ margin: 0 22.5rpx;
+ /* #endif */
+ padding: 30upx;
+ background: #fff;
+ z-index:9999;
+ border: solid 2rpx #ddd;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ border-radius: 16rpx;
+ .title{
+ font-size: 32rpx;
+ font-weight: bold;
+ }
+ .content{
+ margin-top: 16rpx;
+ line-height: 1.6;
+ }
+ }
+ &.top{
+ & .uni-popup__wrapper-box {
+ width: 705rpx;
+ }
+ }
+ }
+ &.uni-top{
+ transform: translateY(0);
+ }
+ }
+}
</style>
--
Gitblit v1.9.3