jsasg/yycea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
jsasg
2026-03-17 09:56:00 +08:00
commit e2c8ae752d
6827 changed files with 1211784 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
uniapp/小程序代码/pagesPoints/component/mall/goods.vue Normal file
View File

@@ -0,0 +1,146 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-商品列表 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-mall-goods" v-if="list.length">
<uv-waterfall ref="waterfall" v-model="list" style="overflow: hidden;" :add-time="10" :column-gap="12" @changeList="changeList">
<!-- 第一列数据 -->
<template v-slot:list1>
<view class="goods-list-box">
<view v-for="item in list1" :key="item.id" class="box-item" @click="toDetails(item.id)">
<view class="item-image">
<image :src="item.image" mode="aspectFill"></image>
</view>
<view class="item-name">{{item.name}}</view>
<view class="item-points" :style="{ color: themeColor }">{{item.points}}积分</view>
</view>
</view>
</template>
<!-- 第二列数据 -->
<template v-slot:list2>
<view class="goods-list-box">
<view v-for="item in list2" :key="item.id" class="box-item" @click="toDetails(item.id)">
<view class="item-image">
<image :src="item.image" mode="aspectFill"></image>
</view>
<view class="item-name">{{item.name}}</view>
<view class="item-points" :style="{ color: themeColor }">{{item.points}}积分</view>
</view>
</view>
</template>
</uv-waterfall>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "componentPointsGoods",
data() {
return {
// 数据列表
list: [],
// 瀑布流第一列数据
list1: [],
// 瀑布流第二列数据
list2: [],
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
}),
},
methods: {
// 获取列表数据
getList(list) {
this.list = list
},
// 渲染列表
changeList(e) {
this[e.name].push(e.value);
},
// 跳转详情
toDetails(id) {
this.$util.toPage({
mode: 1,
path: "/pagesPoints/goods/details?id=" + id
})
},
// 清除列表
clearList() {
this.list = [];
this.$refs.waterfall.clear();
this.list1 = [];
this.list2 = [];
},
},
}
</script>
<style lang="scss">
.component-mall-goods {
.goods-list-box {
.box-item {
width: 100%;
border-radius: 20rpx;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
border-radius: 20rpx;
margin-top: 24rpx;
padding-bottom: 16rpx;
&:first-child {
margin-top: 0;
}
.item-image {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.item-name {
font-weight: 600;
font-size: 28rpx;
line-height: 40rpx;
color: #5A5B6E;
margin-top: 16rpx;
padding: 0 16rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
word-break: break-all;
}
.item-points {
margin-top: 16rpx;
font-weight: 600;
font-size: 28rpx;
line-height: 40rpx;
padding: 0 16rpx;
}
}
}
}
</style>

188
uniapp/小程序代码/pagesPoints/component/mall/order.vue Normal file
View File

@@ -0,0 +1,188 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 组件-订单列表 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-mall-order">
<view class="order-item" v-for="(item, index) in showData" :key="index" @click="toDetails(item.id)">
<view class="item-top flex align-items-center">
<view class="top-number flex-item">订单编号：{{item.order_no}}</view>
<view class="top-status">
<text style="color: #FF9100;" v-if="item.state == 2">待发货</text>
<text :style="{color: themeColor}" v-else-if="item.state == 3">待收货</text>
<text style="color: #979797;" v-else-if="item.state == 4">已完成</text>
</view>
</view>
<view class="item-center flex align-items-center">
<image class="center-image" :src="item.goods_info.image" mode="aspectFill"></image>
<view class="center-info flex-item">
<view class="info-name text-ellipsis-more">{{item.goods_info.name}}</view>
<view class="info-box flex align-items-center">
<view class="price flex-item" :style="{color: themeColor}">{{item.goods_info.points}}积分</view>
<view class="number">×{{item.number}}</view>
</view>
</view>
</view>
<view class="item-bottom" v-if="item.state == 3">
<view class="bottom-btn" :style="{background: themeColor}" @click.stop="handleConfirm(item.id)">确认收货</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "componentMallOrder",
props: ["showData"],
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 跳转详情
toDetails(id) {
this.$util.toPage({
mode: 1,
path: `/pagesPoints/order/details?id=` + id
})
},
// 确认收货
handleConfirm(id) {
uni.showModal({
title: '提示',
content: '确认此商品已收货，\n点击确认收货后订单完成?',
confirmText: '确认收货',
confirmColor: this.themeColor,
cancelText: '我再想想',
cancelColor: '#999999',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: "加载中",
mask: true
})
this.$util.request("points.orderConfirm", { id }).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.showToast({
title: "确认成功",
duration: 1500
})
this.$emit("getOrderList")
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('确认收货', error)
})
}
}
})
},
},
}
</script>
<style lang="scss">
.component-mall-order {
.order-item {
margin-top: 32rpx;
background: #FFF;
border-radius: 16rpx;
&:first-child {
margin-top: 0;
}
.item-top {
padding: 32rpx;
.top-number {
color: #999;
font-size: 28rpx;
line-height: 40rpx;
}
.top-status {
font-size: 28rpx;
line-height: 40rpx;
}
}
.item-center {
border-top: 1px solid rgba(0, 0, 0, 0.10);
padding: 32rpx;
.center-image {
width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
}
.center-info {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 24rpx;
height: 160rpx;
.info-name {
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
color: #5A5B6E;
}
.info-box {
.price {
font-size: 32rpx;
font-weight: 600;
line-height: 40rpx;
word-break: break-all;
}
.number {
color: #5A5B6E;
font-size: 28rpx;
line-height: 32rpx;
margin-left: 16rpx;
}
}
}
}
.item-bottom {
padding: 0 32rpx 32rpx;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 24rpx;
.bottom-btn {
color: #FFF;
font-size: 28rpx;
line-height: 40rpx;
padding: 16rpx 32rpx;
min-width: 144rpx;
text-align: center;
border-radius: 8rpx;
}
}
}
}
</style>

253
uniapp/小程序代码/pagesPoints/component/modal/address.vue Normal file
View File

@@ -0,0 +1,253 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 地址选择弹窗 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-modal-address" @click.stop>
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
<view class="modal-box" :style="{'--theme-color': themeColor}">
<view class="modal-head">
<view class="title">选择地址</view>
<image class="close" src="/static/close.png" mode="aspectFit" @click="onClose"></image>
</view>
<view class="modal-content">
<scroll-view scroll-y class="content-scroll">
<empty top="0" title="请登录后查看，" btn-text="前往登录" @callback="toLogin()" v-if="!isToken"></empty>
<view class="scroll-list" v-else-if="addressList.length">
<view class="list-item flex align-items-center" @click="onConfirm(item)" v-for="item in addressList" :key="item.id">
<view class="item-radio" :class="{select: item.id == selectId}">
<view class="point" v-if="item.id == selectId"></view>
</view>
<view class="item-info flex-item">
<view class="info-address text-ellipsis-more">{{item.address}}</view>
<view class="info-tag flex">
<text>{{item.name}}</text>
<text style="margin-left: 16rpx;">{{item.tel}}</text>
</view>
</view>
<view class="item-edit" :style="{'background-image': 'url('+ iconEdit +')'}" v-if="iconEdit" @click="editAddress(item)"></view>
</view>
</view>
<empty top="0" title="暂无相关地址~" @callback="addAddress()" v-else></empty>
</scroll-view>
</view>
<view class="modal-btn" @click="addAddress()">添加地址</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { mapState } from "vuex"
import svgData from "@/common/svg.js"
export default {
name: "componentModalAddress",
data() {
return {
// 选中地址id
selectId: null,
// 地址列表
addressList: [],
// 是否登录
isToken: false,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
iconEdit: state => {
return svgData.svgToUrl("edit", state.app.themeColor)
},
})
},
methods: {
// 打开模态框
open(value) {
if (value) this.selectId = value
else this.selectId = null
if (uni.getStorageSync("token")) {
this.isToken = true
this.getAddress(() => {
this.$refs.popupModal.open()
})
} else {
this.isToken = false
this.$refs.popupModal.open()
}
},
// 关闭弹窗
onClose() {
this.$refs.popupModal.close()
},
// 改变事件
onChange(e) {
this.$emit("onChange", e.show)
},
// 获取地址列表
getAddress(fn) {
this.$util.request("mall.address.list").then(res => {
if (fn) fn()
if (res.code == 1) {
this.addressList = res.data || []
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取地址列表 ', error)
})
},
// 跳转登录
toLogin() {
uni.navigateTo({
url: "/pages/login/index",
success: () => {
this.onClose()
}
})
},
// 跳转添加地址
addAddress() {
this.$util.toPage({
mode: 1,
path: "/pagesMall/address/index"
})
this.onClose()
},
// 跳转编辑地址
editAddress(item) {
this.$util.toPage({
mode: 1,
path: "/pagesMall/address/add?addressData=" + JSON.stringify(item)
})
this.onClose()
},
// 选择事件
onConfirm(item) {
this.onClose()
this.$emit("confirm", item)
},
},
}
</script>
<style lang="scss" scoped>
.component-modal-address {
position: relative;
z-index: 999;
.modal-box {
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
width: 100vw;
padding-top: 32rpx;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.modal-head {
display: flex;
align-items: center;
padding: 0 32rpx 0 64rpx;
.title {
color: #333;
text-align: center;
font-size: 32rpx;
font-weight: 600;
line-height: 44rpx;
flex: 1;
}
.close {
width: 32rpx;
height: 32rpx;
}
}
.modal-content {
padding: 16rpx 32rpx 0;
.content-scroll {
min-height: 25vh;
max-height: 45vh;
.scroll-list {
margin-top: 32rpx;
.list-item {
margin-top: 32rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #F6F7FB;
&:first-child {
margin-top: 0;
}
.item-radio {
width: 32rpx;
height: 32rpx;
background: #FFFFFF;
border-radius: 50%;
border: 1rpx solid #979797;
padding: 6rpx;
margin-right: 24rpx;
&.select {
border-color: var(--theme-color);
}
.point {
width: 100%;
height: 100%;
background: var(--theme-color);
border-radius: 50%;
}
}
.item-info {
.info-address {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.info-tag {
color: #979797;
font-size: 24rpx;
line-height: 34rpx;
margin-top: 8rpx;
}
}
.item-edit {
width: 48rpx;
height: 48rpx;
background-size: 48rpx;
margin-left: 24rpx;
}
}
}
}
}
.modal-btn {
color: var(--theme-color);
text-align: center;
font-size: 32rpx;
line-height: 44rpx;
padding: 32rpx;
}
}
}
</style>

164
uniapp/小程序代码/pagesPoints/component/modal/quantity.vue Normal file
View File

@@ -0,0 +1,164 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 数量选择弹窗 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="component-modal-quantity" @click.stop>
<uni-popup ref="popupModal" type="bottom" :safe-area="false" @change="onChange">
<view class="modal-box" :style="{'--theme-color': themeColor}">
<view class="modal-content flex align-items-center">
<view class="content-title">选择商品数量：</view>
<view class="content-select flex-item flex justify-content-end align-items-center">
<view class="select-btn" :class="{disabled: parseInt(selectQuantity) <= 1}" @click="handleSubtraction()">
<image class="icon" src="@/static/mall/subtraction.png" mode="aspectFit"></image>
</view>
<input class="select-number" v-model="selectQuantity" type="number" @blur="handleBlur()" />
<view class="select-btn" @click="handleAddition()">
<image class="icon" src="@/static/mall/addition.png" mode="aspectFit"></image>
</view>
</view>
</view>
<view class="modal-footer">
<view class="footer-btn" @click="onConfirm()">确认</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
name: "componentModalQuantity",
data() {
return {
// 选择数量
selectQuantity: 1,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
methods: {
// 打开模态框
open(value) {
this.selectQuantity = parseInt(value)
this.$refs.popupModal.open()
},
// 关闭弹窗
onClose() {
this.$refs.popupModal.close()
},
// 改变事件
onChange(e) {
this.$emit("onChange", e.show)
},
// 选择事件
onConfirm() {
this.onClose()
this.$emit("confirm", this.selectQuantity)
},
// 减少数量
handleSubtraction() {
if (this.selectQuantity > 1) this.selectQuantity--
this.$forceUpdate()
},
// 增加数量
handleAddition() {
this.selectQuantity++
this.$forceUpdate()
},
// 数量判断
handleBlur() {
this.selectQuantity = parseInt(this.selectQuantity) || 1
if (this.selectQuantity < 1) this.selectQuantity = 1
this.$forceUpdate()
},
},
}
</script>
<style lang="scss" scoped>
.component-modal-quantity {
position: relative;
z-index: 999;
.modal-box {
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
width: 100vw;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.modal-content {
padding: 64rpx 48rpx;
.content-title {
color: #000;
font-size: 32rpx;
line-height: 44rpx;
}
.content-select {
margin-left: 24rpx;
.select-btn {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background: var(--theme-color);
overflow: hidden;
&.disabled {
opacity: .5;
}
.icon {
width: 100%;
height: 100%;
}
}
.select-number {
color: #000;
font-size: 28rpx;
line-height: 48rpx;
height: 48rpx;
border-radius: 10rpx;
background: #F2F2F2;
padding: 0 16rpx;
text-align: center;
width: 120rpx;
box-sizing: border-box;
margin: 0 20rpx;
}
}
}
.modal-footer {
padding: 16rpx 24rpx;
border-top: 1px solid #ccc;
.footer-btn {
color: #FFF;
text-align: center;
font-size: 28rpx;
line-height: 40rpx;
padding: 20rpx 32rpx;
border-radius: 40rpx;
background: var(--theme-color);
}
}
}
}
</style>

266
uniapp/小程序代码/pagesPoints/goods/details.vue Normal file
View File

@@ -0,0 +1,266 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 商品详情 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
<view class="container" :style="{'--theme-color': themeColor}">
<!-- 标题栏 -->
<title-bar :showBack="true" title="商品详情"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-carousel">
<carousel :show-data="carouselList" height="660rpx" radius="0" right="32rpx" bottom="32rpx"></carousel>
</view>
<view class="main-info">
<view class="info-title">{{goodsInfo.name}}</view>
<view class="info-amount">{{goodsInfo.points}}积分</view>
</view>
<view class="main-content">
<view class="content-title">商品详情</view>
<mp-html :content="goodsInfo.content" />
</view>
<view class="main-footer">
<view class="footer-btn" @click="toOrder()">立即兑换</view>
<view class="safe-padding"></view>
</view>
</view>
<!-- 选择数量弹窗 -->
<quantity-modal ref="quantityModal" @confirm="changeQuantity" @onChange="pageChange"></quantity-modal>
</view>
</template>
<script>
import { mapState } from "vuex"
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
import carousel from "@/pages/component/carousel/carousel.vue"
import quantityModal from "@/pagesPoints/component/modal/quantity.vue"
export default {
components: {
carousel,
quantityModal,
},
data() {
return {
// 页面是否阻止滚动
pageShow: false,
// 是否加载完成
loadEnd: false,
// 商品Id
goodsId: null,
// 商品详情
goodsInfo: {},
// 轮播图列表
carouselList: [],
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
}),
},
onLoad(option) {
this.goodsId = option.id
uni.showLoading({
title: "加载中"
})
this.getGoodsDetails(() => {
uni.hideLoading()
this.loadEnd = true
// #ifdef H5
this.initConfig()
// #endif
})
},
onShareAppMessage() {
return {
title: this.goodsInfo.name,
path: '/pagesPoints/goods/details?id=' + this.goodsId,
imageUrl: this.carouselList[0].image,
}
},
onShareTimeline() {
return {
title: this.goodsInfo.name,
path: '/pagesPoints/goods/details?id=' + this.goodsId,
imageUrl: this.carouselList[0].image,
}
},
methods: {
// 改变页面滚动状态
pageChange(state) {
this.pageShow = state
},
// #ifdef H5
// 微信公众号初始化方法
initConfig() {
this.$util.request("main.WeChatConfig", {
url: location.href.split('#')[0]
}).then(res => {
if (res.code == 1) {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: Number(res.data.timestamp),
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "wx-open-launch-weapp"],
openTagList: ["updateAppMessageShareData", "updateTimelineShareData", 'wx-open-launch-weapp'],
})
wx.ready(() => {
wx.updateAppMessageShareData({
title: this.goodsInfo.name,
desc: "",
link: window.location.href,
imgUrl: this.carouselList[0].image,
});
wx.updateTimelineShareData({
title: this.goodsInfo.name,
link: window.location.href,
imgUrl: this.carouselList[0].image,
});
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 获取商品详情
getGoodsDetails(fn) {
this.$util.request("points.goodsDetails", {
id: this.goodsId
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.goodsInfo = res.data
this.carouselList = this.splitImages(res.data.slider_images)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取商品详情', error)
})
},
// 字符串转数组格式图片
splitImages(images) {
try {
if (images) return images.split(',');
else return []
} catch (error) {
return [];
}
},
// 前往订单确认
toOrder() {
if (uni.getStorageSync("token")) {
this.$refs.quantityModal.open(1)
} else {
uni.navigateTo({
url: "/pages/login/index",
animationType: "fade-in"
})
}
},
// 改变选择的数量
changeQuantity(number) {
const mallOrder = {
id: this.goodsInfo.id,
name: this.goodsInfo.name,
image: this.goodsInfo.image,
points: this.goodsInfo.points,
number
}
this.$store.commit("app/setPointsOrder", mallOrder)
this.$util.toPage({
mode: 1,
path: "/pagesPoints/goods/order",
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding-bottom: 112rpx;
.main-info {
padding: 32rpx;
background: #FFF;
.info-title {
color: #5A5B6E;
font-size: 32rpx;
font-weight: 600;
line-height: 48rpx;
}
.info-amount {
margin-top: 16rpx;
color: var(--theme-color);
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
}
.main-content {
padding: 32rpx;
background: #FFF;
margin-top: 16rpx;
.content-title {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 44rpx;
margin-bottom: 32rpx;
}
}
.main-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 96;
background: #FFF;
border-top: 1rpx solid #F6F7FB;
padding: 16rpx 24rpx;
.footer-btn {
color: #FFF;
text-align: center;
font-size: 32rpx;
line-height: 44rpx;
padding: 22rpx 32rpx;
border-radius: 16rpx;
background: var(--theme-color);
}
}
}
}
</style>

421
uniapp/小程序代码/pagesPoints/goods/order.vue Normal file
View File

@@ -0,0 +1,421 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 订单确认 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
<view class="container" :style="{ '--theme-color': themeColor }">
<!-- 标题栏 -->
<title-bar :showBack="true" title="订单确认"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<!-- 地址选择 -->
<view class="main-address" @click="chooseAddress()">
<view class="address-box flex align-items-center">
<view class="box-text flex-item">{{addressData.address || "请选择收货地址"}}</view>
<view class="box-icon" :style="{'background-image': 'url('+ iconMore +')'}" v-if="iconMore"></view>
</view>
<view class="address-info flex flex-wrap" v-if="addressData.name && addressData.tel">
<text>{{addressData.name || ""}}</text>
<text>{{addressData.tel || ""}}</text>
</view>
</view>
<!-- 商品信息 -->
<view class="main-goods flex align-items-center">
<image class="goods-image" :src="goodsData.image" mode="aspectFill"></image>
<view class="goods-info flex-item">
<view class="info-top text-ellipsis-more">{{goodsData.name}}</view>
<view class="info-bottom">
<view class="bottom-points">{{goodsData.points}}积分</view>
<view class="bottom-select">
<view class="select-btn" :class="{disabled: parseInt(goodsData.number) <= 1}" @click="changeNumber(1)">
<image class="icon" src="/static/mall/subtraction.png" mode="aspectFit"></image>
</view>
<view class="select-text text-ellipsis" @click="changeNumber(3)">{{goodsData.number}}</view>
<view class="select-btn" @click="changeNumber(2)">
<image class="icon" src="/static/mall/addition.png" mode="aspectFit"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 积分消耗 -->
<view class="main-points flex align-items-center">
<view class="points-title">积分消耗</view>
<view class="points-value flex-item">-{{totalPoints}}积分</view>
</view>
<!-- 底部按钮 -->
<view class="main-footer">
<view class="footer-btn" @click="handleSettlement()" v-if="userMobile">结算</view>
<button class="footer-btn clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>结算</button>
<view class="safe-padding"></view>
</view>
</view>
<!-- 选择地址弹窗 -->
<address-modal ref="addressModal" @confirm="changeAddress" @onChange="pageChange"></address-modal>
<!-- 选择数量弹窗 -->
<quantity-modal ref="quantityModal" @confirm="changeQuantity" @onChange="pageChange"></quantity-modal>
</view>
</template>
<script>
import { mapState } from "vuex"
import svgData from "@/common/svg.js"
import addressModal from "@/pagesPoints/component/modal/address.vue"
import quantityModal from "@/pagesPoints/component/modal/quantity.vue"
export default {
components: {
addressModal,
quantityModal,
},
data() {
return {
// 页面是否阻止滚动
pageShow: false,
// 是否加载完成
loadEnd: false,
// 商品数据
goodsData: {},
// 已选地址
addressData: {},
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
iconMore: state => {
return svgData.svgToUrl("more", state.app.themeColor)
},
userMobile: state => state.user.mobile,
}),
totalPoints() {
var result = parseFloat(parseFloat(this.goodsData.points) * parseInt(this.goodsData.number)).toFixed(2)
return Number(result);
},
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getGoodsDetails(() => {
uni.hideLoading()
this.loadEnd = true
})
},
methods: {
// 改变页面滚动状态
pageChange(state) {
this.pageShow = state
},
// 获取商品详情
getGoodsDetails(fn) {
if (this.$store.state.app?.pointsOrder) {
this.goodsData = this.$store.state.app.pointsOrder
this.getAddress(fn)
} else {
uni.hideLoading()
uni.showModal({
title: "提示",
content: "请选择商品后下单",
showCancel: false,
confirmText: "返回",
confirmColor: this.themeColor,
complete: () => {
uni.navigateBack()
}
})
}
},
// 获取默认地址
getAddress(fn) {
this.$util.request("mall.address.list", {
is_default: 1
}).then(res => {
if (res.code == 1) {
if (res.data[0]) this.addressData = res.data[0]
if (fn) fn()
} else {
if (fn) fn()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取默认地址', error)
})
},
// 绑定手机号
bindPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
uni.showLoading({
mask: true,
title: "加载中",
})
uni.login({
provider: 'weixin',
success: loginRes => {
let data = e.detail
data.code = loginRes.code
this.$util.request("login.bindMobile", data).then(res => {
uni.hideLoading()
if (res.code == 1) {
this.$store.commit('user/updateMobile', res.data.phoneNumber)
this.handleSettlement()
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('获取用户手机号码 ', error)
})
},
fail: () => {
uni.hideLoading()
uni.showToast({
icon: "none",
title: "授权手机号失败，请重试"
})
}
});
} else {
uni.showToast({
title: '获取手机号失败，请重新获取',
icon: 'none'
})
}
},
// 选择地址
chooseAddress() {
this.$refs.addressModal.open(this.addressData.id)
},
// 改变选择的地址
changeAddress(item) {
this.addressData = item
},
// 改变商品数量
changeNumber(type) {
if (type == 1) {
if (parseInt(this.goodsData.number) > 1) {
const goodsNumber = parseInt(this.goodsData.number) - 1
this.changeQuantity(goodsNumber)
}
} else if (type == 2) {
const goodsNumber = parseInt(this.goodsData.number) + 1
this.changeQuantity(goodsNumber)
} else if (type == 3) {
this.$refs.quantityModal.open(this.goodsData.number)
}
},
// 选择商品数量
changeQuantity(number) {
this.$set(this.goodsData, "number", parseInt(number))
},
// 提交订单
handleSettlement() {
if (!this.addressData || !this.addressData.id) {
uni.showToast({
title: "请选择收货地址",
icon: "none"
})
return;
}
uni.showLoading({
title: "加载中",
mask: true
})
this.$util.request("points.createOrder", {
goods_id: this.goodsData.id,
number: this.goodsData.number,
address_id: this.addressData.id,
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.redirectTo({
url: "/pagesPoints/goods/success?id=" + res.data.order_id
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('兑换商品', error)
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx 32rpx 144rpx;
.main-address {
border-radius: 20rpx;
padding: 32rpx;
background: #FFF;
.address-box {
.box-text {
color: #5A5B6E;
font-size: 32rpx;
line-height: 44rpx;
margin-right: 64rpx;
}
.box-icon {
width: 32rpx;
height: 32rpx;
background-size: 32rpx;
}
}
.address-info {
margin-top: 24rpx;
color: #979797;
font-size: 28rpx;
line-height: 40rpx;
gap: 16rpx;
}
}
.main-goods {
margin-top: 32rpx;
border-radius: 20rpx;
background: #FFF;
padding: 32rpx;
.goods-image {
width: 160rpx;
min-width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
}
.goods-info {
flex: 1;
height: 160rpx;
margin-left: 32rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.info-top {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.info-bottom {
display: flex;
align-items: center;
.bottom-points {
color: var(--theme-color);
font-size: 36rpx;
font-weight: 600;
line-height: 40rpx;
text {
font-size: 24rpx;
}
}
.bottom-select {
flex: 1;
margin-left: 16rpx;
display: flex;
justify-content: flex-end;
align-items: center;
overflow: hidden;
.select-btn {
width: 32rpx;
min-width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: var(--theme-color);
&.disabled {
opacity: .5;
}
.icon {
width: 100%;
height: 100%;
}
}
.select-text {
color: #000;
font-size: 28rpx;
line-height: 32rpx;
height: 32rpx;
margin: 0 16rpx;
text-align: center;
}
}
}
}
}
.main-points {
margin-top: 32rpx;
padding: 32rpx;
border-radius: 16rpx;
background: #FFF;
.points-title {
color: #979797;
font-size: 28rpx;
line-height: 40rpx;
}
.points-value {
margin-left: 32rpx;
text-align: right;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
.main-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 96;
background: #FFF;
border-top: 1rpx solid #F6F7FB;
padding: 16rpx 24rpx;
.footer-btn {
color: #FFF;
text-align: center;
font-size: 32rpx;
line-height: 44rpx;
padding: 22rpx 32rpx;
border-radius: 16rpx;
background: var(--theme-color);
}
}
}
}
</style>

131
uniapp/小程序代码/pagesPoints/goods/success.vue Normal file
View File

@@ -0,0 +1,131 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 兑换成功 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :style="{'--theme-color': themeColor}">
<!-- 标题栏 -->
<title-bar :showBack="true" title="兑换成功"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<view class="main-image">
<image class="icon" src="/static/check.png" mode="aspectFit"></image>
</view>
<view class="main-title">兑换成功</view>
<view class="main-subtitle">您已成功兑换积分商品</view>
<view class="main-btn" @click="toOrder()">前往查看</view>
<view class="main-back" @click="toIndex()">返回首页</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 订单id
orderId: null,
}
},
onLoad(option) {
this.orderId = option.id
this.$nextTick(() => {
this.loadEnd = true
})
},
computed: {
...mapState({
themeColor: state => state.app.themeColor
})
},
methods: {
// 前往兑换订单
toOrder() {
let prevPage = getCurrentPages()[getCurrentPages().length - 2];
if (prevPage && (prevPage.route.indexOf('pagesPoints/order/index') > -1 || prevPage.route.indexOf('pagesPoints/order/details') > -1)) {
uni.navigateBack()
} else {
this.$util.toPage({
mode: 2,
path: "/pagesPoints/order/details?id=" + this.orderId
})
}
},
// 返回首页
toIndex() {
uni.switchTab({
url: "/pages/index/index"
})
},
}
}
</script>
<style lang="scss">
page {
background: #FFF;
}
.container {
.container-main {
padding: 144rpx 32rpx 32rpx;
.main-image {
width: 200rpx;
height: 200rpx;
margin: 0 auto;
padding: 48rpx;
background: var(--theme-color);
border-radius: 50%;
}
.main-title {
color: #333;
font-size: 36rpx;
font-weight: 600;
line-height: 50rpx;
margin-top: 48rpx;
text-align: center;
}
.main-subtitle {
color: #979797;
font-size: 28rpx;
line-height: 40rpx;
margin-top: 16rpx;
text-align: center;
}
.main-btn {
margin-top: 64rpx;
color: #FFF;
font-size: 32rpx;
line-height: 44rpx;
padding: 22rpx 32rpx;
border-radius: 16rpx;
text-align: center;
background: var(--theme-color);
}
.main-back {
margin-top: 16rpx;
color: #979797;
font-size: 32rpx;
line-height: 44rpx;
padding: 32rpx;
text-align: center;
}
}
}
</style>

195
uniapp/小程序代码/pagesPoints/index/details.vue Normal file
View File

@@ -0,0 +1,195 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 积分明细 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" v-if="loadEnd">
<!-- 标题栏 -->
<title-bar :showBack="true" title="积分明细"></title-bar>
<!-- 内容区 -->
<view class="container-main" :style="{'--theme-color': themeColor}">
<view class="main-screen" :style="{top: titleBarHeight + 'px'}">
<view class="screen-item" :class="{active: selectScreen == index}" @click="changeScreen(index)" v-for="(item, index) in screenList" :key="index">{{item.text}}</view>
</view>
<view class="main-list" v-if="dataList.length">
<view class="list-item" v-for="item in dataList" :key="item.id">
<view class="item-top flex align-items-center">
<view class="top-name flex-item text-ellipsis-more">{{item.memo}}</view>
<view class="top-amount" :style="{color: item.change == 2 ? '#5A5B6E' : themeColor}">
{{item.change == 2 ? "-" : "+"}}{{item.points}}
</view>
</view>
<view class="item-bottom">{{item.createtime}}</view>
</view>
</view>
<empty top="30%" title="暂无相关内容~" v-else></empty>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
export default {
data() {
return {
// 加载完成
loadEnd: false,
// 标题栏高度
titleBarHeight: 0,
// 分类列表
screenList: [{
text: "全部",
},
{
text: "收入",
type: 1
},
{
text: "支出",
type: 2
},
],
// 已选分类
selectScreen: 0,
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
// 明细列表
dataList: {},
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
mounted() {
// #ifdef MP-WEIXIN
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
// #endif
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getDataList(() => {
uni.hideLoading()
this.loadEnd = true
})
},
onPullDownRefresh() {
this.page = 1
this.getDataList(() => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getDataList()
}
},
methods: {
// 更改分类
changeScreen(index) {
this.selectScreen = index
this.page = 1
this.getDataList()
},
// 获取积分明细列表
getDataList(fn) {
this.$util.request("points.record", {
page: this.page,
limit: this.limit,
...this.selectScreen ? { change: this.selectScreen } : {}
}).then(res => {
if (fn) fn()
if (res.code == 1) {
let list = res.data.data
this.hasMore = this.page < res.data.total / this.limit ? true : false
this.dataList = this.page == 1 ? list : [...this.dataList, ...list];
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取积分明细列表 ', error)
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
.main-screen {
position: sticky;
top: 0;
z-index: 99;
background: #FFF;
display: flex;
.screen-item {
flex: 1;
padding: 44rpx 32rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
text-align: center;
&.active {
color: var(--theme-color);
}
}
}
.main-list {
padding: 32rpx;
.list-item {
border-radius: 16rpx;
background: #FFF;
padding: 32rpx;
.item-top {
.top-name {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
.top-amount {
margin-left: 48rpx;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
}
.item-bottom {
margin-top: 8rpx;
color: #979797;
font-size: 24rpx;
line-height: 34rpx;
}
}
}
}
}
</style>

375
uniapp/小程序代码/pagesPoints/index/index.vue Normal file
View File

@@ -0,0 +1,375 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 积分商城 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" v-if="loadEnd">
<!-- 顶部区域 -->
<view class="container-header">
<view class="header-nav" :style="{height: titleBarHeight + 'px'}">
<title-bar positionMode="fixed" :frontColor="titleColor" :backgroundColor="titleBackground" title="积分商城"></title-bar>
</view>
<view class="header-info">
<view class="info-title">我的积分</view>
<view class="info-value">{{pointsInfo.my_points}}</view>
<view class="info-text">
<text>{{pointsInfo.points_description}}</text>
</view>
</view>
<image class="header-icon" src="/static/points.png" mode="widthFix"></image>
</view>
<!-- 内容区 -->
<view class="container-main">
<view class="main-menu">
<view class="menu-item" @click="toOrderList()">
<image class="item-icon" src="/static/mall/order.png" mode="aspectFit"></image>
<view class="item-box">
<view class="box-title">兑换订单</view>
<view class="box-subtitle">查看兑换订单列表</view>
</view>
</view>
<view class="menu-item" @click="toPointsDetails()">
<image class="item-icon" src="/static/mall/details.png" mode="aspectFit"></image>
<view class="item-box">
<view class="box-title">积分明细</view>
<view class="box-subtitle">查看积分收支明细</view>
</view>
</view>
</view>
<view class="main-column">
<view class="column-title">积分商品</view>
<view class="column-list">
<mall-goods ref="mallGoods" v-if="goodsList.length"></mall-goods>
<empty top="32rpx" title="分类下暂无相关商品~" v-else></empty>
</view>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
import mallGoods from '@/pagesPoints/component/mall/goods.vue'
// #ifdef H5
import wx from 'weixin-js-sdk';
// #endif
export default {
components: {
mallGoods
},
data() {
return {
// 是否加载完成
loadEnd: false,
// 顶部导航栏背景色
titleBackground: "rgba(255, 255, 255, 0)",
// 顶部导航栏字体颜色
titleColor: "#000",
// 标题栏高度
titleBarHeight: 0,
// 积分信息
pointsInfo: {},
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
// 商品列表
goodsList: [],
};
},
computed: {
...mapState({
shareImage: state => state.app.shareImage,
shareTitle: state => state.app.shareTitle,
})
},
mounted() {
// #ifdef MP-WEIXIN
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height + statusBarHeight
// #endif
},
onLoad() {
uni.showLoading({
title: "加载中"
})
this.getPointsInfo()
this.getGoodsList(() => {
this.loadEnd = true
uni.hideLoading()
})
// #ifdef H5
this.initConfig()
// #endif
},
onPullDownRefresh() {
this.getPointsInfo()
this.page = 1
if (this.goodsList.length) this.$refs.mallGoods.clearList()
this.getGoodsList(() => {
uni.stopPullDownRefresh();
});
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getGoodsList();
}
},
onShareAppMessage() {
return {
title: this.shareTitle,
imageUrl: this.shareImage,
}
},
onShareTimeline() {
return {
title: this.shareTitle,
imageUrl: this.shareImage,
}
},
onPageScroll(e) {
const scrollTop = e.scrollTop
if (scrollTop > 100) {
this.titleBackground = "#fff"
this.titleColor = "black"
} else {
let opacity = parseFloat(scrollTop / 100).toFixed(4)
this.titleBackground = "rgba(255, 255, 255, " + opacity + ")"
if (scrollTop > 30) {
this.titleColor = "black"
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#ffffff"
})
} else {
this.titleColor = '#000000'
uni.setNavigationBarColor({
frontColor: this.titleColor,
backgroundColor: "transparent"
})
}
}
},
methods: {
// #ifdef H5
// 微信公众号初始化方法
initConfig() {
this.$util.request("main.WeChatConfig", {
url: location.href.split('#')[0]
}).then(res => {
if (res.code == 1) {
wx.config({
debug: false,
appId: res.data.appId,
timestamp: Number(res.data.timestamp),
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
openTagList: ["updateAppMessageShareData", "updateTimelineShareData"],
})
wx.ready(() => {
wx.updateAppMessageShareData({
title: this.shareTitle,
desc: "",
link: window.location.href,
imgUrl: this.shareImage,
});
wx.updateTimelineShareData({
title: this.shareTitle,
link: window.location.href,
imgUrl: this.shareImage,
});
});
} else {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('通过config接口注入权限验证配置 ', error)
})
},
// #endif
// 获取积分信息
getPointsInfo() {
this.$util.request("points.info").then(res => {
if (res.code == 1) {
this.pointsInfo = res.data;
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
console.error('获取积分信息', error)
})
},
// 获取分类筛选的商品
getGoodsList(fn) {
this.$util.request("points.goodsList", {
page: this.page,
limit: this.limit,
}).then(res => {
if (fn) fn()
if (res.code == 1) {
let list = res.data.data
this.hasMore = this.page < res.data.total / this.limit ? true : false
this.goodsList = this.page == 1 ? list : [...this.goodsList, ...list];
this.$nextTick(() => {
if (this.goodsList.length) this.$refs.mallGoods.getList(this.goodsList)
})
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取商品列表', error)
})
},
// 瀑布流加载完成
waterfallLoadEnd() {
this.waterfallData.reset = false;
if (this.hasMore) this.waterfallData.status = 'await';
else this.waterfallData.status = "finish"
},
// 跳转订单列表
toOrderList() {
this.$util.toPage({
mode: 1,
path: "/pagesPoints/order/index"
})
},
// 跳转积分明细
toPointsDetails() {
this.$util.toPage({
mode: 1,
path: "/pagesPoints/index/details"
})
},
}
}
</script>
<style lang="scss">
.container {
.container-header {
position: relative;
z-index: 998;
background: linear-gradient(355deg, #FFEB74 4.39%, #FF5A00 121.55%);
.header-info {
position: relative;
z-index: 1;
padding: 64rpx 48rpx 48rpx;
.info-title {
color: #FFF;
font-size: 32rpx;
font-weight: 600;
line-height: 48rpx;
}
.info-value {
margin-top: 16rpx;
color: #FFF;
text-shadow: 0 4px 4px rgba(255, 77, 0, 0.25);
font-size: 72rpx;
font-weight: 700;
line-height: 88rpx;
}
.info-text {
margin-top: 16rpx;
color: #7C2C00;
font-size: 24rpx;
line-height: 40rpx;
}
}
.header-icon {
position: absolute;
right: 0;
bottom: 0;
width: 336rpx;
height: auto;
}
}
.container-main {
padding: 32rpx;
.main-menu {
display: flex;
justify-content: space-between;
.menu-item {
width: 48%;
padding: 18rpx 32rpx;
border-radius: 16rpx;
background: #FFF;
display: flex;
align-items: center;
.item-icon {
width: 64rpx;
height: 64rpx;
}
.item-box {
flex: 1;
margin-left: 16rpx;
.box-title {
color: #5A5B6E;
font-size: 28rpx;
font-weight: 600;
line-height: 40rpx;
}
.box-subtitle {
margin-top: 8rpx;
color: #979797;
font-size: 20rpx;
font-weight: 400;
line-height: 28rpx;
}
}
}
}
.main-column {
margin-top: 32rpx;
.column-title {
color: #333;
font-size: 32rpx;
font-weight: 600;
line-height: 48rpx;
}
.column-list {
margin-top: 32rpx;
}
}
}
}
</style>

389
uniapp/小程序代码/pagesPoints/order/details.vue Normal file
View File

@@ -0,0 +1,389 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 订单详情 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :style="{ '--theme-color': themeColor }">
<!-- 标题栏 -->
<title-bar :showBack="true" title="订单详情"></title-bar>
<!-- 内容区 -->
<view class="container-main" :style="{paddingBottom: (orderInfo.state == 1 || orderInfo.state == 2 || orderInfo.state == 3) ? '144rpx' : '32rpx'}" v-if="loadEnd">
<!-- 订单状态 -->
<view class="main-status">
<block v-if="orderInfo.state == 2">
<view class="status-text">待发货</view>
<view class="status-tips flex align-items-center">
<view class="icon" :style="{'background-image': 'url('+ iconClock +')'}" v-if="iconClock"></view>
<view class="text">商品正在等待发货</view>
</view>
</block>
<block v-else-if="orderInfo.state == 3">
<view class="status-text">待收货</view>
<view class="status-tips flex align-items-center">
<view class="icon" :style="{'background-image': 'url('+ iconClock +')'}" v-if="iconClock"></view>
<view class="text">商品已发货,请及时收货</view>
</view>
</block>
<block v-else-if="orderInfo.state == 4">
<view class="status-text">已完成</view>
<view class="status-tips flex align-items-center">
<view class="icon" :style="{'background-image': 'url('+ iconClock +')'}" v-if="iconClock"></view>
<view class="text">订单已完成</view>
</view>
</block>
</view>
<!-- 地址选择 -->
<view class="main-address">
<view class="address-name">{{orderInfo.user_address || ""}}</view>
<view class="address-info flex flex-wrap" v-if="orderInfo.real_name || orderInfo.user_phone">
<text v-if="orderInfo.real_name">{{orderInfo.real_name}}</text>
<text v-if="orderInfo.user_phone">{{orderInfo.user_phone}}</text>
</view>
</view>
<!-- 商品信息 -->
<view class="main-goods flex align-items-center">
<image class="goods-image" :src="orderInfo.goods_info.image" mode="aspectFill"></image>
<view class="goods-info flex-item">
<view class="info-top text-ellipsis-more">{{orderInfo.goods_info.name}}</view>
<view class="info-bottom">
<view class="bottom-points">{{orderInfo.goods_info.points || orderInfo.goods_info.points}}积分</view>
<view class="bottom-number text-ellipsis">×{{orderInfo.number || 1}}</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="main-order">
<view class="order-info">
<view class="info-title">订单编号</view>
<view class="info-value">{{orderInfo.order_no || ''}}</view>
<view class="info-btn" @click="handleCopy(orderInfo.order_no)">复制</view>
</view>
<view class="order-info">
<view class="info-title">积分消耗</view>
<view class="info-value" :style="{color: themeColor}">-{{orderInfo.total_points || 0}}积分</view>
</view>
<view class="order-info">
<view class="info-title">兑换时间</view>
<view class="info-value">{{orderInfo.redemption_time || ''}}</view>
</view>
<block v-if="orderInfo.logistics">
<view class="order-info" v-if="orderInfo.state == 3 || orderInfo.state == 4">
<view class="info-title">发货时间</view>
<view class="info-value">{{orderInfo.logistics.send_time || ''}}</view>
</view>
<view class="order-info" v-if="orderInfo.state == 3 || orderInfo.state == 4">
<view class="info-title">快递公司</view>
<view class="info-value">{{orderInfo.logistics.delivery_name || ''}}</view>
</view>
<view class="order-info" v-if="orderInfo.state == 3 || orderInfo.state == 4">
<view class="info-title">快递单号</view>
<view class="info-value">{{orderInfo.logistics.delivery_no || ''}}</view>
<view class="info-btn" @click="handleCopy(orderInfo.logistics.delivery_no)">复制</view>
</view>
</block>
</view>
<!-- 底部按钮 -->
<view class="main-footer" v-if="orderInfo.state == 3">
<view class="footer-btn" :style="{background: themeColor}" @click="handleDelivery()">确认收货</view>
<view class="safe-padding"></view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from "vuex"
import svgData from "@/common/svg.js"
export default {
data() {
return {
// 是否加载完成
loadEnd: false,
// 订单id
orderId: null,
// 订单详情
orderInfo: {},
// 延时器
delayer: null,
};
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
iconClock: state => {
return svgData.svgToUrl("clock", state.app.themeColor)
},
})
},
onLoad(option) {
this.orderId = option.id;
if (uni.getStorageSync("token")) {
uni.showLoading({
title: "加载中"
})
this.getOrderDetails(() => {
uni.hideLoading()
this.loadEnd = true
})
} else {
this.$util.verifyLogin(2)
}
},
onShow() {
if (this.loadEnd) this.getOrderDetails()
},
onUnload() {
if (this.delayer) clearTimeout(this.delayer)
},
methods: {
// 获取订单详情
getOrderDetails(fn) {
this.$util.request("points.orderDetails", {
id: this.orderId
}).then(res => {
if (fn) fn()
if (res.code == 1) {
this.orderInfo = res.data
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取订单详情', error)
})
},
// 确认收货
handleDelivery() {
uni.showModal({
title: '提示',
content: '确认此商品已收货，\n点击确认收货后订单完成?',
confirmText: '确认收货',
confirmColor: this.themeColor,
cancelText: '我再想想',
cancelColor: '#999999',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: "加载中",
mask: true
})
this.$util.request("points.orderConfirm", {
id: this.orderInfo.id,
}).then(res => {
uni.hideLoading()
if (res.code == 1) {
uni.showToast({
title: "签收成功",
icon: "success",
mask: true,
duration: 1500
})
this.delayer = setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
uni.hideLoading()
console.error('确认收货', error)
})
}
}
})
},
// 复制
handleCopy(value) {
this.$util.toPage({
mode: 8,
content: value
})
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
padding: 32rpx 32rpx 144rpx;
.main-status {
padding: 16rpx 16rpx 48rpx;
.status-text {
color: #5A5B6E;
font-size: 48rpx;
line-height: 68rpx;
}
.status-tips {
margin-top: 16rpx;
.icon {
width: 32rpx;
height: 32rpx;
background-size: 32rpx;
}
.text {
margin-left: 16rpx;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
}
.main-address {
border-radius: 20rpx;
padding: 32rpx;
background: #FFF;
.address-name {
color: #5A5B6E;
font-size: 32rpx;
line-height: 44rpx;
}
.address-info {
margin-top: 24rpx;
color: #979797;
font-size: 28rpx;
line-height: 40rpx;
gap: 16rpx;
}
}
.main-goods {
margin-top: 32rpx;
border-radius: 20rpx;
background: #FFF;
padding: 32rpx;
.goods-image {
width: 160rpx;
min-width: 160rpx;
height: 160rpx;
border-radius: 20rpx;
}
.goods-info {
flex: 1;
height: 160rpx;
margin-left: 32rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
.info-top {
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
}
.info-bottom {
display: flex;
align-items: center;
.bottom-points {
color: var(--theme-color);
font-size: 28rpx;
font-weight: 600;
line-height: 44rpx;
}
.bottom-number {
flex: 1;
margin-left: 16rpx;
text-align: right;
color: #5A5B6E;
font-size: 28rpx;
line-height: 32rpx;
}
}
}
}
.main-order {
margin-top: 32rpx;
padding: 32rpx;
border-radius: 16rpx;
background: #FFFFFF;
.order-info {
display: flex;
align-items: center;
margin-top: 32rpx;
&:first-child {
margin-top: 0;
}
.info-title {
color: #979797;
font-size: 28rpx;
line-height: 40rpx;
}
.info-value {
margin-left: 24rpx;
flex: 1;
color: #5A5B6E;
font-size: 28rpx;
line-height: 40rpx;
text-align: right;
}
.info-btn {
margin-left: 16rpx;
color: var(--theme-color);
font-size: 28rpx;
line-height: 40rpx;
}
}
}
.main-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 96;
background: #FFF;
border-top: 1rpx solid #F6F7FB;
padding: 16rpx 24rpx;
.footer-btn {
margin-left: 24rpx;
padding: 20rpx 44rpx;
background: var(--theme-color);
border-radius: 16rpx;
color: #FFF;
text-align: center;
font-size: 28rpx;
line-height: 40rpx;
&:first-child {
margin-left: 0;
}
}
}
}
}
</style>

192
uniapp/小程序代码/pagesPoints/order/index.vue Normal file
View File

@@ -0,0 +1,192 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
+----------------------------------------------------------------------
| 兑换订单 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->
<template>
<view class="container" :style="{'--theme-color': themeColor}">
<!-- 标题栏 -->
<title-bar title="兑换订单"></title-bar>
<!-- 内容区 -->
<view class="container-main" v-if="loadEnd">
<!-- 顶部导航 -->
<scroll-view scroll-x class="main-screen" :style="{top: titleBarHeight + 'px'}">
<view class="screen-item" :class="{active: selectScreen == index}" @click="changeScreen(index)" v-for="(item, index) in screenList" :key="index">{{item.text}}</view>
</scroll-view>
<!-- 订单列表 -->
<view class="main-list">
<mall-order :show-data="orderList" @getOrderList="resetOrderList"></mall-order>
<empty top="36%" title="暂无相关订单~" v-if="orderList.length == 0"></empty>
</view>
</view>
<!-- 底部导航 -->
<tab-bar></tab-bar>
</view>
</template>
<script>
import { mapState } from "vuex"
import mallOrder from "@/pagesPoints/component/mall/order.vue"
export default {
components: {
mallOrder,
},
data() {
return {
// 是否加载完成
loadEnd: false,
// 标题栏高度
titleBarHeight: 0,
// 分类列表
screenList: [{
text: "全部",
},
{
text: "待发货",
state: 2
},
{
text: "待收货",
state: 3
},
{
text: "已完成",
state: 4
}
],
// 已选分类
selectScreen: 0,
// 分类查询参数
page: 1,
limit: 20,
hasMore: false,
// 订单列表
orderList: [],
}
},
computed: {
...mapState({
themeColor: state => state.app.themeColor,
})
},
mounted() {
// #ifdef MP-WEIXIN
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.titleBarHeight = statusBarHeight + (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
// #endif
},
onLoad(option) {
if (option.id) {
this.selectScreen = this.screenList.findIndex(item => {
if (item.state == option.id) return true
})
}
uni.showLoading({
title: "加载中"
})
this.getOrderList(() => {
uni.hideLoading()
this.loadEnd = true
})
},
onShow() {
if (this.loadEnd) {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
this.page = 1
this.getOrderList()
}
},
onPullDownRefresh() {
this.page = 1
this.getOrderList(() => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
if (this.hasMore) {
this.page++
this.getOrderList()
}
},
methods: {
// 更改分类
changeScreen(index) {
this.selectScreen = index
this.page = 1
this.getOrderList()
},
// 获取订单列表
getOrderList(fn) {
let data = {
page: this.page,
limit: this.limit,
}
if (this.screenList[this.selectScreen].state) data.state = this.screenList[this.selectScreen].state
this.$util.request("points.orderList", data).then(res => {
if (fn) fn()
if (res.code == 1) {
let list = res.data.data
this.hasMore = this.page < res.data.total / this.limit ? true : false
this.orderList = this.page == 1 ? list : [...this.orderList, ...list];
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}).catch(error => {
if (fn) fn()
console.error('获取订单列表', error)
})
},
// 重新获取订单列表
resetOrderList() {
this.page = 1
this.getOrderList()
},
}
}
</script>
<style lang="scss">
.container {
.container-main {
.main-screen {
position: sticky;
top: 0;
z-index: 99;
background: #FFF;
white-space: nowrap;
.screen-item {
display: inline-block;
min-width: 20%;
padding: 40rpx 12rpx;
color: #8D929C;
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
&.active {
color: var(--theme-color);
}
}
}
.main-list {
padding: 32rpx;
}
}
}
</style>