Augcl
/
jewelry-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 8 months ago
parent
9f1865bb09
commit
17ea1e31ae
10 changed files with 566 additions and 209 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +137
    -107
      README.md
  2. +24
    -0
      api/model/index.js
  3. +1
    -1
      mixins/configList.js
  4. +3
    -0
      pages.json
  5. +11
    -1
      pages/index/center.vue
  6. +235
    -31
      pages_order/order/createOrder.vue
  7. +98
    -30
      pages_order/order/instantGift.vue
  8. +33
    -27
      pages_order/order/receiveGift.vue
  9. +8
    -1
      pages_order/product/productDetail.vue
  10. +16
    -11
      store/store.js

+ 137
- 107
README.md View File

@ -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 混入 ### 1. Mixins 混入
@ -237,59 +187,38 @@ this.$api('product.create', {
- position.js: 定位与位置计算 - position.js: 定位与位置计算
- oss-upload: 阿里云OSS上传模块 - 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
<template>
<view>
<navbar title="商品列表" />
<product-item
v-for="item in list"
:key="item.id"
:product="item"
/>
</view>
</template>
```
#### 3.3 OSS上传模块
#### 3.2 OSS上传模块
**配置说明：** **配置说明：**
项目使用阿里云OSS进行文件存储，相关配置位于config.js中： 项目使用阿里云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. 单文件上传 1. 单文件上传
```javascript ```javascript
// 在组件中使用 // 在组件中使用
import { uploadFile } from '@/utils/oss-upload'
export default { export default {
methods: { methods: {
async onUpload(file) { async onUpload(file) {
try { try {
const result = await this.$Oss.ossUpload(file)
const result = await uploadFile(file)
console.log('上传成功：', result.url) console.log('上传成功：', result.url)
} catch (error) { } catch (error) {
console.error('上传失败：', error) console.error('上传失败：', error)
@ -302,16 +231,19 @@ export default {
2. 多文件上传 2. 多文件上传
```javascript ```javascript
// 在组件中使用 // 在组件中使用
import { uploadFiles } from '@/utils/oss-upload'
export default { export default {
methods: { 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 {
</template> </template>
<script> <script>
import { uploadFile } from '@/utils/oss-upload'
export default { export default {
data() { data() {
return { return {
@ -340,19 +274,30 @@ export default {
}, },
methods: { methods: {
// 新增图片 // 新增图片
deleteImage(e) {
this.fileList.splice(e.index, 1)
},
afterRead(e) {
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.fileList.push({
url
})
})
async afterRead(event) {
let lists = [].concat(event.file)
let fileListLen = this.fileList.length
lists.map((item) => {
this.fileList.push({
...item,
status: 'uploading',
message: '上传中'
}) })
})
for (let i = 0; i < lists.length; i++) {
const result = await uploadFile(lists[i])
let item = this.fileList[fileListLen + i]
this.fileList.splice(fileListLen + i, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
}
}, },
// 删除图片
deletePic(event) {
this.fileList.splice(event.index, 1)
}
} }
} }
</script> </script>
@ -364,6 +309,42 @@ export default {
3. 支持的文件类型：图片、视频、文档等 3. 支持的文件类型：图片、视频、文档等
4. 上传失败时会抛出异常，请做好错误处理 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
<template>
<view>
<navbar title="商品列表" />
<product-item
v-for="item in list"
:key="item.id"
:product="item"
/>
</view>
</template>
```
## 最佳实践 ## 最佳实践
### 1. 列表页面开发 ### 1. 列表页面开发
@ -430,3 +411,52 @@ export default {
- 检查mixinsListApi是否正确配置 - 检查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' // 设置默认单位
},
})
```

+ 24
- 0
api/model/index.js View File

@ -166,6 +166,30 @@ const api = {
url: '/info_common/getHanHaiMemberUser', url: '/info_common/getHanHaiMemberUser',
method: 'GET' 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 export default api

+ 1
- 1
mixins/configList.js View File

@ -13,7 +13,7 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['configList', 'userInfo']),
...mapState(['configList', 'userInfo', 'riceInfo']),
}, },
// 定义全局分享 // 定义全局分享
// 1.发送给朋友 // 1.发送给朋友


+ 3
- 0
pages.json View File

@ -140,6 +140,9 @@
}, },
{ {
"path": "order/giftList" "path": "order/giftList"
},
{
"path": "order/receiveGift"
} }
] ]
}], }],


+ 11
- 1
pages/index/center.vue View File

@ -141,7 +141,7 @@
<image src="@/static/image/center/6.png" mode="widthFix" /> <image src="@/static/image/center/6.png" mode="widthFix" />
<view class="title">礼包列表</view> <view class="title">礼包列表</view>
</view> </view>
<view class="boxs" @click="$store.commit('logout')">
<view class="boxs" @click="logout">
<image src="@/static/image/center/6.png" mode="widthFix" /> <image src="@/static/image/center/6.png" mode="widthFix" />
<view class="title">退出登录</view> <view class="title">退出登录</view>
</view> </view>
@ -215,6 +215,16 @@
title: '暂未开放', title: '暂未开放',
}) })
}, },
logout(){
uni.showModal({
title: '确认退出登录吗',
success(r) {
if (r.confirm) {
this.$store.commit('logout')
}
}
})
},
//关闭广告 //关闭广告
closeAdvertising() { closeAdvertising() {


+ 235
- 31
pages_order/order/createOrder.vue View File

@ -1,11 +1,64 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 导航栏 --> <!-- 导航栏 -->
<navbar title="确认订单" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<navbar :title="titleMap[type]" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<view class="bac"></view> <view class="bac"></view>
<view class="box"> <view class="box">
<!-- 送礼 -->
<view class="give-type" v-if="type == 'give'">
<view class="tab-box">
<view class="tab-item" :class="{'active': isGive === 1}"
@click="isGive = 1">
<text>单人礼包</text>
<text class="desc">送给1位好友，可同时送多件礼品</text>
</view>
<view class="tab-item" :class="{'active': isGive === 2}"
@click="isGive = 2">
<text>多人礼包</text>
<text class="desc">送给多位好友，每人1件礼品</text>
</view>
<view class="tab-item" :class="{'active': isGive === 3}"
@click="isGive = 3">
<text>抽奖礼包</text>
<text class="desc">好友抽奖，中奖者获得礼品</text>
</view>
</view>
<!-- <view class="tips">
<text>支付后分享给好友收礼</text>
<text class="guide" @click="$refs.popup.open('gift_guide')">指南</text>
</view> -->
</view>
<!-- 多人礼包人数 -->
<view class="cell-item" v-if="type == 'give' && isGive === 2">
<view class="cell-item-left">
<uv-icon name="gift" size="40" color="#E3441A"></uv-icon>
<view class="user-name">礼包份数</view>
</view>
<view class="cell-item-right">
<view class="stepper">
<text class="minus" :class="{disabled: multiNum <= multiMinNum}"
@click="multiNum > multiMinNum && multiNum--">-</text>
<text class="num">{{multiNum}}</text>
<text class="plus" :class="{disabled: multiNum >= multiMaxNum}"
@click="multiNum < multiMaxNum && multiNum++">+</text>
</view>
</view>
</view>
<!-- 抽奖礼包说明 -->
<view class="lucky-box" v-if="type == 'give' && isGive === 3">
<view class="title">抽奖规则</view>
<view class="tips-list">
<view class="tip-item">• 好友参与抽奖</view>
<view class="tip-item">• 系统随机抽取中奖者</view>
<view class="tip-item">• 中奖者填写地址领取礼品</view>
</view>
</view>
<!-- 商品详情 --> <!-- 商品详情 -->
<view class="product-item" v-for="item in payOrderProduct" :key="item.id"> <view class="product-item" v-for="item in payOrderProduct" :key="item.id">
<view class="img-box"> <view class="img-box">
@ -50,7 +103,7 @@
<image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon"> <image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon">
</image> </image>
<view class="user-name">账户余额</view> <view class="user-name">账户余额</view>
<view class="descript">(余额: {{ userInfo.money }})</view>
<view class="descript">(余额: {{ riceInfo.balance }})</view>
</view> </view>
<view class="cell-item-right"> <view class="cell-item-right">
<uv-radio activeColor="#E3441A" <uv-radio activeColor="#E3441A"
@ -162,6 +215,15 @@
agreement: false, agreement: false,
coupon: {}, coupon: {},
payMethod : 0, payMethod : 0,
isGive : 0,
type : '',
titleMap : {
def : '确认订单',
give : '送礼清单',
},
multiNum: 2, // 多人礼包人数
multiMinNum: 2, // 最小人数
multiMaxNum: 100, // 最大人数
} }
}, },
computed: { computed: {
@ -180,7 +242,11 @@
}, },
...mapState(['userInfo', 'payOrderProduct']), ...mapState(['userInfo', 'payOrderProduct']),
}, },
onLoad() {
onLoad(args) {
this.type = args.type || 'def'
if(this.type == 'give'){
this.isGive = 1
}
this.$store.commit('getUserInfo') this.$store.commit('getUserInfo')
}, },
onShow() { onShow() {
@ -292,6 +358,8 @@
num: this.payOrderProduct[0].num, num: this.payOrderProduct[0].num,
shopId: this.payOrderProduct[0].id, shopId: this.payOrderProduct[0].id,
payType : this.payMethod, payType : this.payMethod,
isGive : this.isGive,
memberNum : 1,
} }
api = 'createOrder' api = 'createOrder'
// } // }
@ -299,6 +367,9 @@
if(this.coupon.id){ if(this.coupon.id){
data.couponId = this.coupon.id data.couponId = this.coupon.id
} }
if(this.isGive == 2){
data.memberNum = this.multiNum
}
this.$api(api, data, res => { this.$api(api, data, res => {
if (res.code == 200) { if (res.code == 200) {
@ -308,41 +379,38 @@
title: '下单成功', title: '下单成功',
icon: 'none' icon: 'none'
}) })
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
this.paySuccess(res)
return return
} }
uni.requestPaymentWxPay(res) uni.requestPaymentWxPay(res)
.then(res => {
uni.showToast({
title: '下单成功',
icon: 'none'
})
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
}).catch(n => {
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
})
} else if (res.code == 902) {
uni.showModal({
title: res.message,
success(e) {
if (e.confirm) {
uni.redirectTo({
url: '/pages/index/order'
})
}
}
})
.then(res => {
uni.showToast({
title: '下单成功',
icon: 'none'
})
this.paySuccess(res)
}).catch(n => {
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
})
} }
}) })
}, },
paySuccess(res){
if(this.type == 'def'){
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
}else{
setTimeout(uni.redirectTo, 700, {
url: `/pages_order/order/instantGift?id=${res.message}`
})
}
},
// 删除购物车 // 删除购物车
deleteCart(ids) { deleteCart(ids) {
this.$api('deleteCart', { this.$api('deleteCart', {
@ -362,6 +430,59 @@
background: $uni-color; background: $uni-color;
} }
.give-type {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.tab-box {
display: flex;
justify-content: space-between;
.tab-item {
width: 30%;
background: #F8F8F8;
border-radius: 20rpx;
padding: 20rpx;
text-align: center;
text {
display: block;
&.desc {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
}
&.active {
background: rgba($uni-color, 0.1);
color: $uni-color;
.desc {
color: $uni-color;
}
}
}
}
.tips {
margin-top: 20rpx;
font-size: 26rpx;
color: #999;
display: flex;
align-items: center;
justify-content: space-between;
.guide {
color: $uni-color;
text-decoration: underline;
}
}
}
.box { .box {
padding: 20rpx; padding: 20rpx;
margin-top: -150rpx; margin-top: -150rpx;
@ -475,6 +596,35 @@
width: 10%; width: 10%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.stepper {
display: flex;
align-items: center;
text {
display: flex;
align-items: center;
justify-content: center;
width: 44rpx;
height: 44rpx;
&.minus, &.plus {
background: #F8F8F8;
border-radius: 50%;
font-size: 32rpx;
&.disabled {
color: #ccc;
}
}
&.num {
margin: 0 20rpx;
color: $uni-color;
font-size: 28rpx;
}
}
}
} }
} }
@ -564,5 +714,59 @@
color: #ffffff; color: #ffffff;
} }
} }
.multi-box, .lucky-box {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.title {
font-size: 28rpx;
font-weight: 500;
margin-bottom: 20rpx;
}
}
.multi-box {
.stepper {
display: flex;
align-items: center;
justify-content: center;
text {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
&.minus, &.plus {
background: #F8F8F8;
border-radius: 50%;
font-size: 36rpx;
&.disabled {
color: #ccc;
}
}
&.num {
margin: 0 40rpx;
color: $uni-color;
font-size: 32rpx;
}
}
}
}
.lucky-box {
.tips-list {
.tip-item {
font-size: 26rpx;
color: #666;
line-height: 2;
}
}
}
} }
</style> </style>

+ 98
- 30
pages_order/order/instantGift.vue View File

@ -17,22 +17,30 @@
@click="selectGift(index)" @click="selectGift(index)"
> >
<image :src="item.image" mode="aspectFill"></image> <image :src="item.image" mode="aspectFill"></image>
<text class="gift-name">{{item.name}}</text>
<text class="gift-name">{{item.title}}</text>
</view> </view>
</scroll-view> </scroll-view>
<!-- 祝福语区域 --> <!-- 祝福语区域 -->
<view class="blessing-area"> <view class="blessing-area">
<view class="blessing-title">送祝福给TA</view>
<view class="blessing-header">
<view class="blessing-title">送祝福给TA</view>
<view class="refresh-btn" @click="getRiceBlessingWords">
<uv-icon name="reload" size="32" color="#666"></uv-icon>
<text>换一个</text>
</view>
</view>
<view class="blessing-input"> <view class="blessing-input">
<input type="text" v-model="blessing" placeholder="蛇年到，福气绕。钱包满满当当！" />
<input type="text" v-model="blessing" :placeholder="giveTitle" />
</view> </view>
</view> </view>
<!-- 底部区域 --> <!-- 底部区域 -->
<view class="bottom-area"> <view class="bottom-area">
<view class="countdown">距离礼包失效：{{countdownText}}</view>
<button class="send-btn" @click="sendGift">立即送礼</button>
<!-- <view class="countdown">距离礼包失效：{{countdownText}}</view> -->
<button class="send-btn"
open-type="share"
@click="submit">立即送礼</button>
</view> </view>
</view> </view>
</template> </template>
@ -45,24 +53,9 @@
blessing: '', blessing: '',
countdown: 24 * 60 * 60, // 倒计时秒数 countdown: 24 * 60 * 60, // 倒计时秒数
countdownTimer: null, 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: { computed: {
@ -76,6 +69,29 @@
return `${hours}时${minutes}分${seconds}秒` 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: { methods: {
navigateBack() { navigateBack() {
uni.navigateBack() uni.navigateBack()
@ -90,6 +106,24 @@
icon: 'success' 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() { startCountdown() {
this.countdownTimer = setInterval(() => { this.countdownTimer = setInterval(() => {
if (this.countdown > 0) { if (this.countdown > 0) {
@ -98,10 +132,27 @@
clearInterval(this.countdownTimer) clearInterval(this.countdownTimer)
} }
}, 1000) }, 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() { mounted() {
this.startCountdown()
// this.startCountdown()
this.getRiceBlessing()
this.getRiceBlessingWords()
}, },
beforeDestroy() { beforeDestroy() {
if (this.countdownTimer) { if (this.countdownTimer) {
@ -183,11 +234,28 @@
.blessing-area { .blessing-area {
padding: 30rpx; 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 { .blessing-input {
background: #FFF5F5; background: #FFF5F5;


+ 33
- 27
pages_order/order/receiveGift.vue View File

@ -9,7 +9,7 @@
<!-- 礼品信息区域 --> <!-- 礼品信息区域 -->
<view class="gift-info"> <view class="gift-info">
<view class="gift-name">{{giftInfo.name}}</view>
<view class="gift-name">{{giftInfo.title}}</view>
<view class="gift-value"> <view class="gift-value">
<text>礼品价值：</text> <text>礼品价值：</text>
<text class="price">￥{{giftInfo.price}}</text> <text class="price">￥{{giftInfo.price}}</text>
@ -20,18 +20,27 @@
<view class="blessing-area"> <view class="blessing-area">
<view class="sender-info"> <view class="sender-info">
<text class="label">来自</text> <text class="label">来自</text>
<text class="sender">{{giftInfo.senderName}}</text>
<text class="sender">{{giftInfo.name}}</text>
<text class="label">的祝福</text> <text class="label">的祝福</text>
</view> </view>
<view class="blessing-content"> <view class="blessing-content">
{{giftInfo.message}}
{{ giftInfo.giveTitle }}
</view> </view>
</view> </view>
<!-- 底部区域 --> <!-- 底部区域 -->
<view class="bottom-area"> <view class="bottom-area">
<view class="countdown">距离礼包失效：{{countdownText}}</view>
<button class="receive-btn" @click="receiveGift" :disabled="giftInfo.state !== 0">{{giftInfo.state === 0 ? '立即领取' : '已领取'}}</button>
<!-- <view class="countdown">距离礼包失效：{{countdownText}}</view> -->
<!-- <button class="receive-btn"
@click="receiveGift"
:disabled="giftInfo.giveStatus !== 0">
{{giftInfo.giveStatus === 0 ? '立即领取' : '已领取'}}
</button> -->
<button class="receive-btn"
@click="receiveGift">
立即领取
</button>
</view> </view>
</view> </view>
</template> </template>
@ -42,13 +51,6 @@
return { return {
giftId: '', giftId: '',
giftInfo: { giftInfo: {
name: '',
image: '',
price: 0,
senderName: '',
message: '',
state: 0, // 0-未领取 1-已领取
expireTime: ''
}, },
countdown: 24 * 60 * 60, // 倒计时秒数 countdown: 24 * 60 * 60, // 倒计时秒数
countdownTimer: null countdownTimer: null
@ -66,15 +68,17 @@
// 获取礼品信息 // 获取礼品信息
async getGiftInfo() { async getGiftInfo() {
try { 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) { } catch (e) {
uni.showToast({ uni.showToast({
title: '获取礼品信息失败', title: '获取礼品信息失败',
@ -85,14 +89,16 @@
// 领取礼品 // 领取礼品
async receiveGift() { async receiveGift() {
try { 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) { } catch (e) {
uni.showToast({ uni.showToast({
title: '领取失败', title: '领取失败',


+ 8
- 1
pages_order/product/productDetail.vue View File

@ -147,7 +147,14 @@
this.$utils.navigateTo('/pages_order/order/createOrder') this.$utils.navigateTo('/pages_order/order/createOrder')
}, },
toSend(){ 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() { getRiceProductDetail() {


+ 16
- 11
store/store.js View File

@ -119,17 +119,22 @@ const store = new Vuex.Store({
}, },
// 退出登录 // 退出登录
logout(state) { 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'
}) })
}, },
// 查询分类接口 // 查询分类接口


Write Preview
Loading…
Cancel
Save