From 17ea1e31ae75f48d90ad8d4f4dbfa9aadbcd2e89 Mon Sep 17 00:00:00 2001 From: huliyong <2783385703@qq.com> Date: Mon, 24 Feb 2025 00:01:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 244 +++++++++++++++++-------------- api/model/index.js | 24 +++ mixins/configList.js | 2 +- pages.json | 3 + pages/index/center.vue | 12 +- pages_order/order/createOrder.vue | 266 ++++++++++++++++++++++++++++++---- pages_order/order/instantGift.vue | 128 ++++++++++++---- pages_order/order/receiveGift.vue | 60 ++++---- pages_order/product/productDetail.vue | 9 +- store/store.js | 27 ++-- 10 files changed, 566 insertions(+), 209 deletions(-) diff --git a/README.md b/README.md index d972f12..fb07a08 100644 --- a/README.md +++ b/README.md @@ -63,56 +63,6 @@ - 模块化组织：按功能模块划分目录，便于维护和管理 - 组件复用：分包内的通用组件集中管理，提高代码复用性 - -## 配置文件说明 - -### config.js -项目核心配置文件，包含以下配置： - -**1. 环境配置** -```javascript -// 当前环境 -const type = 'prod' - -// 环境配置 -const config = { - dev: { - baseUrl: 'http://h5.xzaiyp.top/jewelry-admin', - }, - prod: { - baseUrl: 'https://jewelry-admin.hhlm1688.com/jewelry-admin', - } -} -``` - -**2. 默认配置** -```javascript -const defaultConfig = { - // 腾讯地图Key - mapKey: 'XMBBZ-BCPCV-SXPPQ-5Y7MY-PHZXK-YFFVU', - // 阿里云OSS配置 - aliOss: { - url: 'https://image.hhlm1688.com/', - config: { - region: 'oss-cn-guangzhou', - accessKeyId: '***', - accessKeySecret: '***', - bucket: 'hanhaiimage', - endpoint: 'oss-cn-shenzhen.aliyuncs.com', - } - } -} -``` - -**3. UI框架配置** -```javascript -uni.$uv.setConfig({ - config: { - unit: 'rpx' // 设置默认单位 - }, -}) -``` - ## 核心模块详解 ### 1. Mixins 混入 @@ -237,59 +187,38 @@ this.$api('product.create', { - position.js: 定位与位置计算 - oss-upload: 阿里云OSS上传模块 -**使用示例：** -```javascript - -// 授权处理 -async preservationImg(img) { - await this.$authorize('scope.writePhotosAlbum') - //在执行$authorize之后，await下面的代码都是确保授权完成的情况下执行 -}, - -// 时间格式化 -const formattedTime = this.$timeUtils.formatTime(new Date()) - -// 微信网页支付调用 -import { wxPay } from '@/utils/pay' -wxPay(orderData) -``` - -#### 3.2 公共组件 -- navbar.vue: 自定义导航栏 -- tabbar.vue: 底部导航栏 -- productItem.vue: 商品列表项 - -**使用示例：** -```html - -``` - - -#### 3.3 OSS上传模块 +#### 3.2 OSS上传模块 **配置说明：** 项目使用阿里云OSS进行文件存储，相关配置位于config.js中： +```javascript +const defaultConfig = { + aliOss: { + url: 'https://image.hhlm1688.com/', + config: { + region: 'oss-cn-guangzhou', + accessKeyId: '***', + accessKeySecret: '***', + bucket: 'hanhaiimage', + endpoint: 'oss-cn-shenzhen.aliyuncs.com', + } + } +} +``` **使用示例：** 1. 单文件上传 ```javascript // 在组件中使用 +import { uploadFile } from '@/utils/oss-upload' + export default { methods: { async onUpload(file) { try { - const result = await this.$Oss.ossUpload(file) + const result = await uploadFile(file) console.log('上传成功：', result.url) } catch (error) { console.error('上传失败：', error) @@ -302,16 +231,19 @@ export default { 2. 多文件上传 ```javascript // 在组件中使用 +import { uploadFiles } from '@/utils/oss-upload' + export default { methods: { - onUploadMultiple(files) { - files.forEach(file => { - self.$Oss.ossUpload(file).then(url => { - self.fileList.push({ - url - }) - }) + async onUploadMultiple(files) { + try { + const results = await uploadFiles(files) + results.forEach(result => { + console.log('文件上传成功：', result.url) }) + } catch (error) { + console.error('上传失败：', error) + } } } } @@ -331,6 +263,8 @@ export default { @@ -364,6 +309,42 @@ export default { 3. 支持的文件类型：图片、视频、文档等 4. 上传失败时会抛出异常，请做好错误处理 +**使用示例：** +```javascript + +// 授权处理 +async preservationImg(img) { + await this.$authorize('scope.writePhotosAlbum') + //在执行$authorize之后，await下面的代码都是确保授权完成的情况下执行 +}, + +// 时间格式化 +const formattedTime = this.$timeUtils.formatTime(new Date()) + +// 微信网页支付调用 +import { wxPay } from '@/utils/pay' +wxPay(orderData) +``` + +#### 3.2 公共组件 +- navbar.vue: 自定义导航栏 +- tabbar.vue: 底部导航栏 +- productItem.vue: 商品列表项 + +**使用示例：** +```html + +``` + ## 最佳实践 ### 1. 列表页面开发 @@ -430,3 +411,52 @@ export default { - 检查mixinsListApi是否正确配置 - 确认网络请求是否正常 - 查看请求参数格式是否正确 + +## 配置文件说明 + +### config.js +项目核心配置文件，包含以下配置： + +**1. 环境配置** +```javascript +// 当前环境 +const type = 'prod' + +// 环境配置 +const config = { + dev: { + baseUrl: 'http://h5.xzaiyp.top/jewelry-admin', + }, + prod: { + baseUrl: 'https://jewelry-admin.hhlm1688.com/jewelry-admin', + } +} +``` + +**2. 默认配置** +```javascript +const defaultConfig = { + // 腾讯地图Key + mapKey: 'XMBBZ-BCPCV-SXPPQ-5Y7MY-PHZXK-YFFVU', + // 阿里云OSS配置 + aliOss: { + url: 'https://image.hhlm1688.com/', + config: { + region: 'oss-cn-guangzhou', + accessKeyId: '***', + accessKeySecret: '***', + bucket: 'hanhaiimage', + endpoint: 'oss-cn-shenzhen.aliyuncs.com', + } + } +} +``` + +**3. UI框架配置** +```javascript +uni.$uv.setConfig({ + config: { + unit: 'rpx' // 设置默认单位 + }, +}) +``` \ No newline at end of file diff --git a/api/model/index.js b/api/model/index.js index 1dc756f..c666109 100644 --- a/api/model/index.js +++ b/api/model/index.js @@ -166,6 +166,30 @@ const api = { url: '/info_common/getHanHaiMemberUser', method: 'GET' }, + // 获取祝福背景图 + getRiceBlessing: { + url: '/index_common/getRiceBlessing', + method: 'GET' + }, + // 随机获取祝福语 + getRiceBlessingWords: { + url: '/index_common/getRiceBlessingWords', + method: 'GET' + }, + // 根据订单标识修改订单祝福语背景 + updateOrderBlessing: { + url: '/index_common/updateOrderBlessing', + method: 'POST', + auth : true, + limit : 1000, + }, + // 1.收礼流程 =》点击收礼 + getGiveShop: { + url: '/index_common/getGiveShop', + method: 'GET', + auth : true, + limit : 1000, + }, } export default api \ No newline at end of file diff --git a/mixins/configList.js b/mixins/configList.js index f621471..b9e66aa 100644 --- a/mixins/configList.js +++ b/mixins/configList.js @@ -13,7 +13,7 @@ export default { } }, computed: { - ...mapState(['configList', 'userInfo']), + ...mapState(['configList', 'userInfo', 'riceInfo']), }, // 定义全局分享 // 1.发送给朋友 diff --git a/pages.json b/pages.json index 05f4c9f..e101072 100644 --- a/pages.json +++ b/pages.json @@ -140,6 +140,9 @@ }, { "path": "order/giftList" + }, + { + "path": "order/receiveGift" } ] }], diff --git a/pages/index/center.vue b/pages/index/center.vue index 4d5d93b..ecbd910 100644 --- a/pages/index/center.vue +++ b/pages/index/center.vue @@ -141,7 +141,7 @@ 礼包列表 - + 退出登录 @@ -215,6 +215,16 @@ title: '暂未开放', }) }, + logout(){ + uni.showModal({ + title: '确认退出登录吗', + success(r) { + if (r.confirm) { + this.$store.commit('logout') + } + } + }) + }, //关闭广告 closeAdvertising() { diff --git a/pages_order/order/createOrder.vue b/pages_order/order/createOrder.vue index d1f9407..67a99ec 100644 --- a/pages_order/order/createOrder.vue +++ b/pages_order/order/createOrder.vue @@ -1,11 +1,64 @@ @@ -45,24 +53,9 @@ blessing: '', countdown: 24 * 60 * 60, // 倒计时秒数 countdownTimer: null, - giftList: [ - { - name: '蛇行大运', - image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg' - }, - { - name: '蛇来运转', - image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg' - }, - { - name: '2025', - image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg' - }, - { - name: '身体健康', - image: 'https://picb3.photophoto.cn/38/090/38090873_1.jpg' - } - ] + giftList: [], + giveTitle : '', + id : 0, } }, computed: { @@ -76,6 +69,29 @@ return `${hours}时${minutes}分${seconds}秒` } }, + onShareAppMessage(res) { + let o = { + title : this.blessing || this.giveTitle, + path : '/pages_order/order/receiveGift?id=' + this.id, + imageUrl : this.giftList[this.selectedIndex].image, + } + if(this.userInfo.id){ + o.path = this.Gshare.path + '?shareId=' + this.userInfo.id + } + return o + }, + //2.分享到朋友圈 + onShareTimeline(res) { + let o = { + title : this.blessing || this.giveTitle, + path : '/pages_order/order/receiveGift?id=' + this.id, + imageUrl : this.giftList[this.selectedIndex].image, + } + if(this.userInfo.id){ + o.path = this.Gshare.path + '?shareId=' + this.userInfo.id + } + return o + }, methods: { navigateBack() { uni.navigateBack() @@ -90,6 +106,24 @@ icon: 'success' }) }, + // 获取祝福背景图 + getRiceBlessing(){ + this.$api('getRiceBlessing') + .then(res => { + if(res.code == 200){ + this.giftList = res.result + } + }) + }, + // 随机获取祝福语 + getRiceBlessingWords(){ + this.$api('getRiceBlessingWords') + .then(res => { + if(res.code == 200){ + this.giveTitle = res.result + } + }) + }, startCountdown() { this.countdownTimer = setInterval(() => { if (this.countdown > 0) { @@ -98,10 +132,27 @@ clearInterval(this.countdownTimer) } }, 1000) - } + }, + submit(){ + this.$api('updateOrderBlessing', { + orderId : this.id, + giveTitle : this.blessing || this.giveTitle, + giveImage : this.giftList[this.selectedIndex].image, + }).then(res => { + if(res.code == 200){ + // 调用微信小程序转发功能 + + } + }) + }, }, + onLoad(args){ + this.id = args.id + }, mounted() { - this.startCountdown() + // this.startCountdown() + this.getRiceBlessing() + this.getRiceBlessingWords() }, beforeDestroy() { if (this.countdownTimer) { @@ -183,11 +234,28 @@ .blessing-area { padding: 30rpx; - .blessing-title { - font-size: 30rpx; - color: #666; - margin-bottom: 20rpx; - } + .blessing-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20rpx; + + .blessing-title { + font-size: 30rpx; + color: #666; + } + + .refresh-btn { + display: flex; + align-items: center; + color: #666; + font-size: 26rpx; + + text { + margin-left: 6rpx; + } + } + } .blessing-input { background: #FFF5F5; diff --git a/pages_order/order/receiveGift.vue b/pages_order/order/receiveGift.vue index 5d4e4b5..e35e367 100644 --- a/pages_order/order/receiveGift.vue +++ b/pages_order/order/receiveGift.vue @@ -9,7 +9,7 @@ - {{giftInfo.name}} + {{giftInfo.title}} 礼品价值： ￥{{giftInfo.price}} @@ -20,18 +20,27 @@ 来自 - {{giftInfo.senderName}} + {{giftInfo.name}} 的祝福 - {{giftInfo.message}} + {{ giftInfo.giveTitle }} - 距离礼包失效：{{countdownText}} - + + + + @@ -42,13 +51,6 @@ return { giftId: '', giftInfo: { - name: '', - image: '', - price: 0, - senderName: '', - message: '', - state: 0, // 0-未领取 1-已领取 - expireTime: '' }, countdown: 24 * 60 * 60, // 倒计时秒数 countdownTimer: null @@ -66,15 +68,17 @@ // 获取礼品信息 async getGiftInfo() { try { - const res = await this.$http.get(`/gift/detail/${this.giftId}`) - this.giftInfo = res.data + const res = await this.$api('getOrderDetail', { + id: this.giftId + }) + this.giftInfo = res.result // 计算倒计时 - if (this.giftInfo.expireTime) { - const expireTime = new Date(this.giftInfo.expireTime).getTime() - const now = new Date().getTime() - this.countdown = Math.max(0, Math.floor((expireTime - now) / 1000)) - this.startCountdown() - } + // if (this.giftInfo.expireTime) { + // const expireTime = new Date(this.giftInfo.expireTime).getTime() + // const now = new Date().getTime() + // this.countdown = Math.max(0, Math.floor((expireTime - now) / 1000)) + // this.startCountdown() + // } } catch (e) { uni.showToast({ title: '获取礼品信息失败', @@ -85,14 +89,16 @@ // 领取礼品 async receiveGift() { try { - await this.$http.post('/gift/receive', { - id: this.giftId - }) - uni.showToast({ - title: '领取成功', - icon: 'success' + let res = await this.$api('getGiveShop', { + orderId : this.giftId }) - this.giftInfo.state = 1 + if(res.code == 200){ + uni.showToast({ + title: '领取成功', + icon: 'success' + }) + } + this.giftInfo.giveStatus = 1 } catch (e) { uni.showToast({ title: '领取失败', diff --git a/pages_order/product/productDetail.vue b/pages_order/product/productDetail.vue index cc76241..0c27aed 100644 --- a/pages_order/product/productDetail.vue +++ b/pages_order/product/productDetail.vue @@ -147,7 +147,14 @@ this.$utils.navigateTo('/pages_order/order/createOrder') }, toSend(){ - this.$utils.navigateTo('/pages_order/order/instantGift') + this.$store.commit('setPayOrderProduct', [ + this.productDetail + ]) + // 1893686035042070530 + + // this.$utils.navigateTo('/pages_order/order/receiveGift?id=1893686035042070530') + + this.$utils.navigateTo('/pages_order/order/createOrder?type=give') }, // 获取商品 getRiceProductDetail() { diff --git a/store/store.js b/store/store.js index d07d3ce..320a8fe 100644 --- a/store/store.js +++ b/store/store.js @@ -119,17 +119,22 @@ const store = new Vuex.Store({ }, // 退出登录 logout(state) { - uni.showModal({ - title: '确认退出登录吗', - success(r) { - if (r.confirm) { - state.userInfo = {} - uni.removeStorageSync('token') - uni.reLaunch({ - url: '/pages/index/index' - }) - } - } + // uni.showModal({ + // title: '确认退出登录吗', + // success(r) { + // if (r.confirm) { + // state.userInfo = {} + // uni.removeStorageSync('token') + // uni.reLaunch({ + // url: '/pages/index/index' + // }) + // } + // } + // }) + state.userInfo = {} + uni.removeStorageSync('token') + uni.reLaunch({ + url: '/pages/index/index' }) }, // 查询分类接口