会员权益
This commit is contained in:
315
pagesMall/address/add.vue
Normal file
315
pagesMall/address/add.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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="pageTitle"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-form">
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<text style="color: #E60012;">*</text>收件人
|
||||
</view>
|
||||
<view class="item-input">
|
||||
<input class="input" type="text" v-model="formData.name" placeholder="请填写收件人姓名" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<text style="color: #E60012;">*</text>收件人电话
|
||||
</view>
|
||||
<view class="item-input">
|
||||
<input class="input" type="number" maxlength="11" v-model="formData.tel" placeholder="请填写收件人电话" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">
|
||||
<text style="color: #E60012;">*</text>收件地址
|
||||
</view>
|
||||
<view class="item-address flex">
|
||||
<textarea class="textarea flex-item" :disabled="!formData.address" v-model="formData.address" auto-height />
|
||||
<view class="placeholder" @click="chooseLocation()" v-if="!formData.address">请点击选择收件地址</view>
|
||||
<image class="icon" src="/static/location.png" mode="aspectFit" @click="chooseLocation()"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="item-title">默认地址</view>
|
||||
<view class="item-switch flex">
|
||||
<view class="switch-label">是否默认地址</view>
|
||||
<view class="switch-box" :class="{select: formData.is_default == 1}" @click="formData.is_default = formData.is_default == 1 ? 0 : 1">
|
||||
<view class="round"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<view class="footer-btn" @click="handleSubmit()">{{formData.id ? "编辑" : "添加"}}</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 页面标题
|
||||
pageTitle: "",
|
||||
// 表单数据
|
||||
formData: {
|
||||
name: '',
|
||||
tel: '',
|
||||
address: '',
|
||||
is_default: 0,
|
||||
},
|
||||
// 延时器
|
||||
delayer: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.addressData) this.formData = JSON.parse(option.addressData)
|
||||
if (this.formData.id) {
|
||||
this.pageTitle = "编辑地址"
|
||||
} else {
|
||||
this.pageTitle = "添加地址"
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
onUnload() {
|
||||
clearTimeout(this.delayer)
|
||||
},
|
||||
methods: {
|
||||
// 添加/编辑地址
|
||||
handleSubmit() {
|
||||
if (!this.formData.name) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入收件人姓名"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.tel) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入收件人手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.$util.validation("phone", this.formData.tel)) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入正确的手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.formData.address) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入收货地址"
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
let url = ""
|
||||
if (this.formData.id) url = "mall.address.edit"
|
||||
else url = "mall.address.add"
|
||||
this.$util.request(url, this.formData).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: this.formData.id ? "编辑成功" : "添加成功",
|
||||
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)
|
||||
})
|
||||
},
|
||||
// 选择位置
|
||||
chooseLocation() {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.formData.address = res.address
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 48rpx 144rpx;
|
||||
|
||||
.main-form {
|
||||
.form-item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding-bottom: 32rpx;
|
||||
font-size: 32rpx;
|
||||
color: #5A5B6E;
|
||||
}
|
||||
|
||||
.item-input {
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
|
||||
.input {
|
||||
font-size: 28rpx;
|
||||
color: #5A5B6E;
|
||||
min-height: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #ACADB7;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-address {
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #5A5B6E;
|
||||
line-height: 40rpx;
|
||||
padding: 32rpx 0 32rpx 32rpx;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #ACADB7;
|
||||
line-height: 40rpx;
|
||||
padding: 32rpx;
|
||||
min-height: 40rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 34rpx;
|
||||
height: auto;
|
||||
padding: 0 32rpx 0 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-switch {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.switch-label {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #5A5B6E;
|
||||
}
|
||||
|
||||
.switch-box {
|
||||
width: 80rpx;
|
||||
height: 40rpx;
|
||||
padding: 3rpx;
|
||||
background: #D9D9D9;
|
||||
border-radius: 20rpx;
|
||||
transition: all .3s;
|
||||
|
||||
.round {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
margin-left: 0;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
&.select {
|
||||
background: var(--theme-color);
|
||||
|
||||
.round {
|
||||
margin-left: calc(100% - 34rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 12rpx 32rpx;
|
||||
background: #ffffff;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
290
pagesMall/address/index.vue
Normal file
290
pagesMall/address/index.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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-list" v-if="addressList.length">
|
||||
<view class="list-item" v-for="item in addressList" :key="item.id">
|
||||
<view class="item-info">
|
||||
<view class="info-address">{{item.address}}</view>
|
||||
<view class="info-name flex align-items-center">
|
||||
<text>{{item.name}}</text>
|
||||
<text style="margin-left: 16rpx;">{{item.tel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-operate flex justify-content-between align-items-center">
|
||||
<view class="operate-default flex justify-content-between align-items-center" @click="handleSwitch(item.id)">
|
||||
<view class="default-radio" :class="{select: item.is_default == 1}">
|
||||
<image src="/static/tick.png" mode="aspectFit" v-if="item.is_default == 1"></image>
|
||||
</view>
|
||||
<view class="default-tag">{{item.is_default == 1 ? '默认地址' : '设为默认地址'}}</view>
|
||||
</view>
|
||||
<view class="operate-btn flex align-items-center">
|
||||
<view class="btn-box flex align-items-center" @click="handleEdit(item)">
|
||||
<view class="icon" :style="{'background-image': 'url('+ iconEdit +')'}" v-if="iconEdit"></view>
|
||||
<text class="text" :style="{color: themeColor}">编辑</text>
|
||||
</view>
|
||||
<view class="btn-box flex align-items-center" @click="handleDelete(item.id)">
|
||||
<image class="icon" src="/static/mall/icon_del.png" mode="aspectFit"></image>
|
||||
<text class="text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<empty top="10vh" title="暂无相关地址~" @callback="handleAdd()" v-else></empty>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-btn">
|
||||
<view class="btn" @click="handleAdd()">添加地址</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,
|
||||
// 地址列表
|
||||
addressList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconEdit: state => {
|
||||
return svgData.svgToUrl("edit", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getAddress(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
if (this.loadEnd) this.getAddress()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getAddress(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取地址列表
|
||||
getAddress(fn) {
|
||||
this.$util.request("mall.address.list").then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.addressList = res.data
|
||||
this.$forceUpdate()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取地址列表 ', error)
|
||||
})
|
||||
},
|
||||
// 切换默认地址
|
||||
handleSwitch(id) {
|
||||
this.$util.request("mall.address.setDefault", {
|
||||
id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.getAddress(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('切换默认地址 ', error)
|
||||
})
|
||||
},
|
||||
// 添加地址
|
||||
handleAdd() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/address/add"
|
||||
})
|
||||
},
|
||||
// 修改地址
|
||||
handleEdit(item) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/address/add?addressData=" + JSON.stringify(item)
|
||||
})
|
||||
},
|
||||
// 删除地址
|
||||
handleDelete(id) {
|
||||
uni.showModal({
|
||||
title: "系统提示",
|
||||
content: "是否删除该地址？",
|
||||
confirmColor: "#E50002",
|
||||
confirmText: "删除",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "加载中"
|
||||
})
|
||||
this.$util.request("mall.address.delete", {
|
||||
id: id
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.getAddress(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "删除成功"
|
||||
})
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('删除地址 ', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-list {
|
||||
.list-item {
|
||||
margin-top: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFF;
|
||||
padding: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
.info-address {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
color: #979797;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-operate {
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.operate-default {
|
||||
.default-radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #D9D9D9;
|
||||
border-radius: 50%;
|
||||
|
||||
&.select {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.default-tag {
|
||||
margin-left: 12rpx;
|
||||
color: #979797;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.operate-btn {
|
||||
.btn-box {
|
||||
margin-left: 32rpx;
|
||||
|
||||
.icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background-size: 48rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 8rpx;
|
||||
color: #FF626E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
padding: 12rpx 32rpx;
|
||||
|
||||
.btn {
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 22rpx 32rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
415
pagesMall/cart/index.vue
Normal file
415
pagesMall/cart/index.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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 title="购物车"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-header flex justify-content-between align-items-center" v-if="cartList.length">
|
||||
<view class="header-title">商品列表</view>
|
||||
<view class="header-btn" @click="handleDelete()">清除购物车</view>
|
||||
</view>
|
||||
<view class="main-list">
|
||||
<mall-cart :show-data="cartList" @changeSelect="changeSelect" @changeNumber="changeNumber" v-if="cartList.length"></mall-cart>
|
||||
<empty top="30%" title="暂无商品，" btnText="去购物" @callback="toShopping()" v-else></empty>
|
||||
</view>
|
||||
<view class="main-footer flex align-items-center" v-if="cartList.length">
|
||||
<view class="footer-radio flex align-items-center" @click="toggleSelectAll()">
|
||||
<view class="radio-input" :class="{active: allSelected}">
|
||||
<image src="/static/tick.png" mode="aspectFit" v-if="allSelected"></image>
|
||||
</view>
|
||||
<view class="radio-label">全选</view>
|
||||
</view>
|
||||
<view class="footer-amount flex-item flex align-items-center justify-content-end">
|
||||
<text class="label">合计</text>
|
||||
<text class="amount text-ellipsis">￥{{totalPrice}}</text>
|
||||
</view>
|
||||
<view class="footer-btn" :class="{disabled: !selectedList.length}" @click="toSettlement()">去结算</view>
|
||||
</view>
|
||||
<view class="safe-padding" style="background: #FFF;"></view>
|
||||
</view>
|
||||
<!-- 选择数量弹窗 -->
|
||||
<quantity-modal ref="quantityModal" @confirm="changeQuantity" @onChange="pageChange"></quantity-modal>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import mallCart from '@/pagesMall/component/mall/cart.vue'
|
||||
import quantityModal from "@/pagesMall/component/modal/quantity.vue"
|
||||
export default {
|
||||
components: {
|
||||
mallCart,
|
||||
quantityModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 页面是否阻止滚动
|
||||
pageShow: false,
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 购物车列表
|
||||
cartList: [],
|
||||
// 是否全选
|
||||
allSelected: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
}),
|
||||
totalPrice() {
|
||||
var result = this.cartList.filter(item => item.selected).reduce((sum, item) => sum + (parseFloat(item.price) * parseInt(item.number)), 0)
|
||||
return parseFloat(result).toFixed(2);
|
||||
},
|
||||
selectedList() {
|
||||
return this.cartList.filter(item => item.selected);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
cartList: {
|
||||
handler() {
|
||||
this.allSelected = this.cartList.every(item => item.selected);
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getCartList(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
this.loadEnd = true
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if (this.loadEnd && uni.getStorageSync("token")) {
|
||||
this.getCartList()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
if (uni.getStorageSync("token")) {
|
||||
this.getCartList(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
})
|
||||
} else {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.pageShow = state
|
||||
},
|
||||
// 获取购物车列表
|
||||
getCartList(fn) {
|
||||
this.$util.request("mall.cartList").then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
var list = res.data || []
|
||||
if (list.length && this.selectedList.length) {
|
||||
list.forEach(item => {
|
||||
if (this.selectedList.some(el => el.id === item.id)) {
|
||||
this.$set(item, 'selected', true);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.cartList = list
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取购物车列表', error)
|
||||
})
|
||||
},
|
||||
// 去购物
|
||||
toShopping() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/mall/index"
|
||||
})
|
||||
},
|
||||
// 更改数量
|
||||
changeNumber(index, type) {
|
||||
var data = this.cartList[index]
|
||||
if (type == 1) {
|
||||
if (parseInt(data.number) > 1) {
|
||||
data.number = parseInt(data.number) - 1
|
||||
} else {
|
||||
this.handleDelete(data.id)
|
||||
return
|
||||
}
|
||||
} else if (type == 2) {
|
||||
data.number = parseInt(data.number) + 1
|
||||
} else if (type == 3) {
|
||||
this.$refs.quantityModal.open(data.number, index)
|
||||
return
|
||||
}
|
||||
this.updateCartNumber(data, () => {
|
||||
this.$set(this.cartList, index, data)
|
||||
})
|
||||
},
|
||||
// 选择数量弹窗回调
|
||||
changeQuantity(number, index) {
|
||||
var data = this.cartList[index]
|
||||
data.number = number
|
||||
this.updateCartNumber(data, () => {
|
||||
this.$set(this.cartList, index, data)
|
||||
})
|
||||
},
|
||||
// 更新购物车商品数量
|
||||
updateCartNumber(data, fn) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
this.$util.request("mall.updateCartNumber", {
|
||||
goods_id: data.id,
|
||||
number: data.number,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
if (fn) fn()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('更新购物车商品数量', error)
|
||||
})
|
||||
},
|
||||
// 删除购物车商品
|
||||
handleDelete(id) {
|
||||
if (id) {
|
||||
uni.showModal({
|
||||
content: "确认删除该商品吗？",
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.deleteEvent(id)
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (this.selectedList.length) {
|
||||
uni.showModal({
|
||||
content: `确认要删除这${this.selectedList.length}种商品吗？`,
|
||||
confirmColor: this.themeColor,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const idList = this.selectedList.map(item => item.id)
|
||||
this.deleteEvent(idList.join())
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请选择要删除的商品",
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 删除事件
|
||||
deleteEvent(ids) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
this.$util.request("mall.deleteCart", {
|
||||
goods_id: ids,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "删除成功",
|
||||
duration: 2000
|
||||
})
|
||||
this.getCartList()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('删除事件', error)
|
||||
})
|
||||
},
|
||||
// 更改选择
|
||||
changeSelect(index) {
|
||||
var data = this.cartList[index]
|
||||
data.selected = !data.selected
|
||||
this.$set(this.cartList, index, data)
|
||||
},
|
||||
// 切换全选状态
|
||||
toggleSelectAll() {
|
||||
this.cartList.forEach(item => {
|
||||
this.$set(item, "selected", !this.allSelected)
|
||||
});
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 去结算
|
||||
toSettlement() {
|
||||
if (!this.selectedList.length) {
|
||||
uni.showToast({
|
||||
title: "请至少选择一件商品",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return;
|
||||
}
|
||||
var isDisabled = false;
|
||||
for (var i in this.selectedList) {
|
||||
if (this.selectedList[i].goods_status == 2) {
|
||||
isDisabled = true
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isDisabled) {
|
||||
uni.showToast({
|
||||
title: "存在已下架商品",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$store.commit("app/setMallOrder", { isCartItem: true, list: this.selectedList })
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/goods/order",
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.container-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.main-header {
|
||||
padding: 32rpx 32rpx 0;
|
||||
|
||||
.header-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-list {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
|
||||
.footer-radio {
|
||||
.radio-input {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: #D6DBDE;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
margin-left: 16rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-amount {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.label {
|
||||
color: #C4C4C4;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.amount {
|
||||
margin-left: 8rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
margin-left: 20rpx;
|
||||
color: #FFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
min-width: 200rpx;
|
||||
border-radius: 36rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
background: #AAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
238
pagesMall/component/mall/cart.vue
Normal file
238
pagesMall/component/mall/cart.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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-cart" :style="{ '--theme-color': themeColor }">
|
||||
<view class="cart-item" v-for="(item, index) in showData" :key="index">
|
||||
<view class="item-radio" @click="changeSelect(index)">
|
||||
<view class="radio-input" :class="{active: item.selected}">
|
||||
<image src="/static/tick.png" mode="aspectFit" v-if="item.selected"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-goods" @click="toDetails(item.id)">
|
||||
<view class="goods-left">
|
||||
<image class="left-image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="left-disabled" v-if="item.goods_status == 2">
|
||||
<view class="box">
|
||||
<text>商品</text>
|
||||
<text>已下架</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="info-top text-ellipsis-more">{{item.name}}</view>
|
||||
<view class="info-bottom">
|
||||
<view class="bottom-price"><text>￥</text>{{item.price}}</view>
|
||||
<view class="bottom-tips" v-if="item.goods_status == 2">商品已下架</view>
|
||||
<view class="bottom-select" @click.stop v-else>
|
||||
<view class="select-btn" :class="{disabled: parseInt(item.number) <= 1}" @click.stop="changeNumber(index, 1)">
|
||||
<image class="icon" src="/static/mall/subtraction.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="select-text text-ellipsis" @click.stop="changeNumber(index, 3)">{{item.number}}</view>
|
||||
<view class="select-btn" @click.stop="changeNumber(index, 2)">
|
||||
<image class="icon" src="/static/mall/addition.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "componentMallCart",
|
||||
props: ["showData"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转商品详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/goods/details?id=" + id
|
||||
})
|
||||
},
|
||||
// 选择商品
|
||||
changeSelect(index) {
|
||||
this.$emit("changeSelect", index)
|
||||
},
|
||||
// 更改数量
|
||||
changeNumber(index, type) {
|
||||
this.$emit("changeNumber", index, type)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-mall-cart {
|
||||
.cart-item {
|
||||
border-radius: 20rpx;
|
||||
background: #FFF;
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 32rpx 24rpx 32rpx 32rpx;
|
||||
height: 160rpx;
|
||||
box-sizing: content-box;
|
||||
|
||||
.radio-input {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: #D6DBDE;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-goods {
|
||||
padding: 32rpx 32rpx 32rpx 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.goods-left {
|
||||
width: 150rpx;
|
||||
min-width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.left-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-disabled {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(0, 0, 0, 0.60);
|
||||
padding: 28rpx;
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #FFF;
|
||||
font-size: 20rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.50);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
height: 160rpx;
|
||||
margin-left: 24rpx;
|
||||
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-price {
|
||||
color: #E60012;
|
||||
font-size: 32rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-tips {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: #FF626E;
|
||||
font-size: 24rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
pagesMall/component/mall/goods.vue
Normal file
146
pagesMall/component/mall/goods.vue
Normal 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-price" :style="{ color: themeColor }">￥{{item.price}}</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-price" :style="{ color: themeColor }">￥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "componentMallGoods",
|
||||
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: "/pagesMall/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-price {
|
||||
margin-top: 16rpx;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
381
pagesMall/component/mall/order.vue
Normal file
381
pagesMall/component/mall/order.vue
Normal file
@@ -0,0 +1,381 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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: #FF626E;" v-if="item.state == 1">待付款</text>
|
||||
<text style="color: #FF9100;" v-else-if="item.state == 2">
|
||||
<text v-if="item.delivery_method == 2">待自提</text>
|
||||
<text v-else>待发货</text>
|
||||
</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">
|
||||
<!-- 单商品 -->
|
||||
<view class="center-single flex" v-if="item.goods.length == 1">
|
||||
<image class="single-image" :src="item.goods[0].image" mode="aspectFill"></image>
|
||||
<view class="single-info flex-item">
|
||||
<view class="info-name text-ellipsis-more">{{item.goods[0].name}}</view>
|
||||
<view class="info-box flex align-items-center">
|
||||
<view class="price flex-item" :style="{color: themeColor}">￥{{item.pay_price}}</view>
|
||||
<view class="number">×{{item.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 多商品 -->
|
||||
<view class="center-multiple" v-else>
|
||||
<scroll-view scroll-x class="multiple-list">
|
||||
<view class="list-goods">
|
||||
<view class="goods-box" v-for="goods in item.goods" :key="goods.id">
|
||||
<image class="image" :src="goods.image" mode="aspectFill"></image>
|
||||
<view class="name text-ellipsis">{{goods.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="multiple-total flex-direction-column flex-center">
|
||||
<view class="number">×{{item.number}}</view>
|
||||
<view class="price"><text>￥</text>{{item.pay_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-bottom" v-if="item.state != 4">
|
||||
<view class="bottom-btn" :style="{background: themeColor}" @click.stop="handlePayment(item.id, item.pay_price)" v-if="item.state == 1">去支付</view>
|
||||
<view class="bottom-btn" style="background: #FF626E" @click.stop="handleCancel(item.id)" v-if="item.state == 1">取消订单</view>
|
||||
<view class="bottom-btn" style="background: #FF626E" @click.stop="handleRefund(item.id)" v-if="item.state == 2 || item.state == 3">申请退款</view>
|
||||
<view class="bottom-btn" :style="{background: themeColor}" @click.stop="handleConfirm(item.id, item.trade_no)" v-if="item.state == 3">确认收货</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "componentMallOrder",
|
||||
props: ["showData"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
deliveryManagement: state => state.app.deliveryManagement,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesMall/order/details?order_id=` + id
|
||||
})
|
||||
},
|
||||
// 去付款
|
||||
handlePayment(id, money) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesMall/order/payment?money=${money}&id=${id}`
|
||||
})
|
||||
},
|
||||
// 取消订单
|
||||
handleCancel(id) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认取消该订单吗?',
|
||||
confirmText: '确认取消',
|
||||
confirmColor: this.themeColor,
|
||||
cancelText: '我再想想',
|
||||
cancelColor: '#999999',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mall.delOrder", {
|
||||
order_id: id,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "取消成功",
|
||||
duration: 1000
|
||||
})
|
||||
this.$emit("getOrderList")
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('取消订单', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 申请退款
|
||||
handleRefund(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/refund/apply?id=" + id
|
||||
})
|
||||
},
|
||||
// 确认收货
|
||||
handleConfirm(id, trade_no) {
|
||||
if (this.deliveryManagement == 1) {
|
||||
if (wx.openBusinessView) {
|
||||
wx.openBusinessView({
|
||||
businessType: 'weappOrderConfirm',
|
||||
extraData: { transaction_id: trade_no },
|
||||
success: e => {
|
||||
if (e.extraData.status === 'success') {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mall.orderCollect", {
|
||||
id: id,
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "签收成功",
|
||||
icon: "success",
|
||||
duration: 1500
|
||||
})
|
||||
this.$emit("getOrderList")
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('确认收货', error)
|
||||
})
|
||||
} else {
|
||||
console.error("调用微信收货", e)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("调用微信收货", err)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "您的微信版本过低，请升级微信版本后重试",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
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("mall.orderCollect", {
|
||||
id: 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);
|
||||
|
||||
.center-single {
|
||||
padding: 32rpx;
|
||||
|
||||
.single-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.single-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-multiple {
|
||||
position: relative;
|
||||
padding: 32rpx 0;
|
||||
overflow: hidden;
|
||||
|
||||
.multiple-list {
|
||||
.list-goods {
|
||||
display: inline-flex;
|
||||
padding: 0 32rpx;
|
||||
column-gap: 32rpx;
|
||||
|
||||
.goods-box {
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 12rpx;
|
||||
width: 160rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-total {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4rpx;
|
||||
bottom: 24rpx;
|
||||
z-index: 9;
|
||||
padding: 0 32rpx 0 28rpx;
|
||||
background: rgba(255, 255, 255, 0.70);
|
||||
|
||||
.number {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 40rpx;
|
||||
color: #E60012;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
279
pagesMall/component/mall/refund.vue
Normal file
279
pagesMall/component/mall/refund.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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-refund">
|
||||
<view class="refund-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: #FF626E;" v-if="item.refund_status == 2">申请中</text>
|
||||
<text style="color: #FF9100;" v-if="item.refund_status == 3">待退货</text>
|
||||
<text :style="{color: themeColor}" v-if="item.refund_status == 4">退款中</text>
|
||||
<text style="color: #979797;" v-if="item.refund_status == 5">已退款</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-center">
|
||||
<!-- 单商品 -->
|
||||
<view class="center-single flex" v-if="item.goods.length == 1">
|
||||
<image class="single-image" :src="item.goods[0].image" mode="aspectFill"></image>
|
||||
<view class="single-info flex-item">
|
||||
<view class="info-name text-ellipsis-more">{{item.goods[0].name}}</view>
|
||||
<view class="info-box flex align-items-center">
|
||||
<view class="price flex-item" :style="{color: themeColor}">￥{{item.pay_price}}</view>
|
||||
<view class="number">×{{item.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 多商品 -->
|
||||
<view class="center-multiple" v-else>
|
||||
<scroll-view scroll-x class="multiple-list">
|
||||
<view class="list-goods">
|
||||
<view class="goods-box" v-for="goods in item.goods" :key="goods.id">
|
||||
<image class="image" :src="goods.image" mode="aspectFill"></image>
|
||||
<view class="name text-ellipsis">{{goods.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="multiple-total flex-direction-column flex-center">
|
||||
<view class="number">×{{item.number}}</view>
|
||||
<view class="price"><text>￥</text>{{item.pay_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-bottom" v-if="item.refund_status == 2 || item.refund_status == 3">
|
||||
<view class="bottom-btn" style="background: #FF626E" @click.stop="handleCancel(item.id)" v-if="item.refund_status == 2">取消退款</view>
|
||||
<view class="bottom-btn" :style="{background: themeColor}" @click.stop="handleWrite(item.id)" v-if="item.refund_status == 3">填写信息</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "componentMallRefund",
|
||||
props: ["showData"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 跳转详情
|
||||
toDetails(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesMall/refund/details?id=` + id
|
||||
})
|
||||
},
|
||||
// 取消退款
|
||||
handleCancel(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("mall.cancelRefund", { id: id }).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.showToast({
|
||||
title: "取消成功",
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
})
|
||||
this.$emit("getOrderList")
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('取消退款', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 跳转填写信息
|
||||
handleWrite(id) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesMall/refund/goods?id=` + id
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-mall-refund {
|
||||
.refund-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);
|
||||
|
||||
.center-single {
|
||||
padding: 32rpx;
|
||||
|
||||
.single-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.single-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-multiple {
|
||||
position: relative;
|
||||
padding: 32rpx 0;
|
||||
overflow: hidden;
|
||||
|
||||
.multiple-list {
|
||||
.list-goods {
|
||||
display: inline-flex;
|
||||
padding: 0 32rpx;
|
||||
column-gap: 32rpx;
|
||||
|
||||
.goods-box {
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 12rpx;
|
||||
width: 160rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiple-total {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4rpx;
|
||||
bottom: 24rpx;
|
||||
z-index: 9;
|
||||
padding: 0 32rpx 0 28rpx;
|
||||
background: rgba(255, 255, 255, 0.70);
|
||||
|
||||
.number {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 40rpx;
|
||||
color: #E60012;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
146
pagesMall/component/mall/store.vue
Normal file
146
pagesMall/component/mall/store.vue
Normal 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-store flex" :style="{ '--theme-color': themeColor }">
|
||||
<image class="store-image" :src="showData.image" mode="aspectFill"></image>
|
||||
<view class="store-info">
|
||||
<view class="info-top text-ellipsis-more">{{showData.name}}</view>
|
||||
<view class="info-bottom">
|
||||
<view class="bottom-price"><text>￥</text>{{showData.price || showData.goods_price}}</view>
|
||||
<view class="bottom-select" v-if="showNumber">
|
||||
<view class="select-btn" :class="{disabled: parseInt(showNumber) <= 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)">{{showNumber}}</view>
|
||||
<view class="select-btn" @click="changeNumber(2)">
|
||||
<image class="icon" src="/static/mall/addition.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-number text-ellipsis" v-else>×{{showData.number || showData.goods_num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
name: "componentMallStore",
|
||||
props: ["showData", "showNumber"],
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 更改数量
|
||||
changeNumber(type) {
|
||||
this.$emit("changeNumber", type)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-mall-store {
|
||||
border-radius: 20rpx;
|
||||
background: #FFF;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.store-image {
|
||||
width: 160rpx;
|
||||
min-width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.store-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-price {
|
||||
color: #E60012;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-number {
|
||||
flex: 1;
|
||||
margin-left: 16rpx;
|
||||
text-align: right;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
253
pagesMall/component/modal/address.vue
Normal file
253
pagesMall/component/modal/address.vue
Normal 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>
|
||||
167
pagesMall/component/modal/quantity.vue
Normal file
167
pagesMall/component/modal/quantity.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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,
|
||||
// 参数
|
||||
parameter: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 打开模态框
|
||||
open(value, parameter) {
|
||||
this.selectQuantity = parseInt(value)
|
||||
this.parameter = parameter
|
||||
this.$refs.popupModal.open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
onClose() {
|
||||
this.$refs.popupModal.close()
|
||||
},
|
||||
// 改变事件
|
||||
onChange(e) {
|
||||
this.$emit("onChange", e.show)
|
||||
},
|
||||
// 选择事件
|
||||
onConfirm() {
|
||||
this.onClose()
|
||||
this.$emit("confirm", this.selectQuantity, this.parameter)
|
||||
},
|
||||
// 减少数量
|
||||
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>
|
||||
498
pagesMall/goods/details.vue
Normal file
498
pagesMall/goods/details.vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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="106rpx"></carousel>
|
||||
</view>
|
||||
<view class="main-info">
|
||||
<view class="info-price">
|
||||
<view class="title"><text>￥</text>{{goodsDetails.price}}</view>
|
||||
<view class="subtitle">￥{{goodsDetails.ot_price}}</view>
|
||||
</view>
|
||||
<view class="info-title">{{goodsDetails.name}}</view>
|
||||
<view class="info-parameter" @click="handleExpand()">
|
||||
<view class="parameter-title">参数</view>
|
||||
<view class="parameter-value" :class="{'multiLine': isMultiLine, 'text-ellipsis' : !isExpand && isMultiLine}">
|
||||
<text id="specsText">{{goodsDetails.paramJson}}</text>
|
||||
</view>
|
||||
<view class="parameter-more" :class="{rotate: isExpand}" v-if="isMultiLine">
|
||||
<image class="icon" src="/static/mall/icon-down.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-content">
|
||||
<view class="content-title">商品详情</view>
|
||||
<mp-html :content="goodsDetails.content" />
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<view class="flex align-items-center">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<button class="footer-item clear" open-type="share">
|
||||
<image class="item-icon" src="/static/share.png" mode="aspectFit"></image>
|
||||
<text class="item-text">分享</text>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<view class="footer-item" @click="toShoppingCart()">
|
||||
<image class="item-icon" src="/static/mall/cart.png" mode="aspectFit"></image>
|
||||
<text class="item-text">购物车</text>
|
||||
<view class="item-number" v-if="Number(cartNumber) > 0">{{cartNumber}}</view>
|
||||
</view>
|
||||
<view class="flex-item flex justify-content-end">
|
||||
<view class="footer-btn flex-item" style="background: #FFA820" @click="handleAddCart()">加入购物车</view>
|
||||
<view class="footer-btn flex-item" :style="{background: themeColor}" @click="toOrder()">立即购买</view>
|
||||
</view>
|
||||
</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 "@/pagesMall/component/modal/quantity.vue"
|
||||
export default {
|
||||
components: {
|
||||
carousel,
|
||||
quantityModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 页面是否阻止滚动
|
||||
pageShow: false,
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 商品Id
|
||||
goodsId: '',
|
||||
// 商品详情
|
||||
goodsDetails: {},
|
||||
// 商品参数是否展开
|
||||
isExpand: false,
|
||||
// 商品参数是否存在多行
|
||||
isMultiLine: false,
|
||||
// 轮播图列表
|
||||
carouselList: [],
|
||||
// 购物车数量
|
||||
cartNumber: 0,
|
||||
}
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
if (uni.getStorageSync("token")) this.getCartNumber()
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.goodsDetails.name,
|
||||
path: '/pagesMall/goods/details?id=' + this.goodsId,
|
||||
imageUrl: this.carouselList[0].image,
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: this.goodsDetails.name,
|
||||
path: '/pagesMall/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.goodsDetails.name,
|
||||
desc: "",
|
||||
link: window.location.href,
|
||||
imgUrl: this.carouselList[0].image,
|
||||
});
|
||||
wx.updateTimelineShareData({
|
||||
title: this.goodsDetails.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("mall.goodsDetails", {
|
||||
id: this.goodsId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.goodsDetails = res.data
|
||||
this.carouselList = this.splitImages(res.data.slider_images)
|
||||
if (res.data.param_json) {
|
||||
let paramJsons = JSON.parse(res.data.param_json);
|
||||
let tempJson = [];
|
||||
for (let key in paramJsons) {
|
||||
tempJson.push(key + ':' + paramJsons[key]);
|
||||
}
|
||||
this.goodsDetails.paramJson = tempJson.join(" ");
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.getCollapse()
|
||||
})
|
||||
} 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, 1)
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
animationType: "fade-in"
|
||||
})
|
||||
}
|
||||
},
|
||||
// 展示更多切换事件
|
||||
handleExpand() {
|
||||
this.isExpand = !this.isExpand
|
||||
},
|
||||
// 获取文字是否存在折叠
|
||||
getCollapse() {
|
||||
uni.createSelectorQuery().select('#specsText').boundingClientRect((rect) => {
|
||||
if (rect.height > uni.upx2px(40)) {
|
||||
this.isMultiLine = true
|
||||
this.isExpand = false
|
||||
} else {
|
||||
this.isMultiLine = false
|
||||
this.isExpand = true
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
// 获取购物车数量
|
||||
getCartNumber() {
|
||||
this.$util.request("mall.cartNumber").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.cartNumber = res.data.number || 0
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取购物车数量', error)
|
||||
})
|
||||
},
|
||||
// 加入购物车
|
||||
handleAddCart() {
|
||||
if (uni.getStorageSync("token")) {
|
||||
this.$refs.quantityModal.open(1, 2)
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/index",
|
||||
animationType: "fade-in"
|
||||
})
|
||||
}
|
||||
},
|
||||
// 改变选择的数量
|
||||
changeQuantity(number, type) {
|
||||
if (type == 1) {
|
||||
const mallOrder = {
|
||||
isCartItem: false,
|
||||
list: [{
|
||||
id: this.goodsDetails.id,
|
||||
name: this.goodsDetails.name,
|
||||
image: this.goodsDetails.image,
|
||||
price: this.goodsDetails.price,
|
||||
number: number
|
||||
}]
|
||||
}
|
||||
this.$store.commit("app/setMallOrder", mallOrder)
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/goods/order",
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
this.$util.request("mall.addCart", {
|
||||
goods_id: this.goodsDetails.id,
|
||||
number: number
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
this.cartNumber = res.data.number || 0
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "添加成功",
|
||||
duration: 2000
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('加入购物车', error)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转购物车
|
||||
toShoppingCart() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/cart/index"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding-bottom: 112rpx;
|
||||
|
||||
.main-info {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
margin-top: -74rpx;
|
||||
padding: 32rpx 40rpx;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
background: #FFF;
|
||||
|
||||
.info-price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.title {
|
||||
color: var(--theme-color);
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 10rpx 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-left: 24rpx;
|
||||
color: #8D929C;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
text-decoration-line: line-through;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-title {
|
||||
margin-top: 32rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.info-parameter {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
|
||||
.parameter-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.parameter-value {
|
||||
flex: 1;
|
||||
margin-left: 32rpx;
|
||||
height: 40rpx;
|
||||
color: #8D929C;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
&.multiLine {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.parameter-more {
|
||||
width: 24rpx;
|
||||
height: 40rpx;
|
||||
margin-left: 24rpx;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 32rpx 40rpx;
|
||||
background: #FFFFFF;
|
||||
margin-top: 12rpx;
|
||||
|
||||
.content-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
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 32rpx;
|
||||
|
||||
.footer-item {
|
||||
position: relative;
|
||||
margin-right: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 60rpx;
|
||||
|
||||
.item-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
color: #5A5B6E;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
transform: translateX(-50%);
|
||||
margin-left: -6rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 16rpx;
|
||||
line-height: 20rpx;
|
||||
min-width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 4rpx;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
text-align: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
pagesMall/goods/list.vue
Normal file
183
pagesMall/goods/list.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 商品列表 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :title="pageTitle || '商品列表'"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<mall-goods ref="mallGoods" v-if="goodsList.length"></mall-goods>
|
||||
<empty top="30%" title="分类下暂无相关商品~" v-else></empty>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import mallGoods from '@/pagesMall/component/mall/goods.vue'
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
mallGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 分类Id
|
||||
screenId: '',
|
||||
// 页面标题
|
||||
pageTitle: "",
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
// 商品列表
|
||||
goodsList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
shareImage: state => state.app.shareImage,
|
||||
shareTitle: state => state.app.shareTitle,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.screenId = option.id
|
||||
this.pageTitle = option.name ? decodeURIComponent(option.name) : "商品列表"
|
||||
this.getGoodsList(() => {
|
||||
this.loadEnd = true
|
||||
uni.hideLoading()
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
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,
|
||||
}
|
||||
},
|
||||
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
|
||||
// 获取分类筛选的商品
|
||||
getGoodsList(fn) {
|
||||
this.$util.request("mall.goodsList", {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
category_id: this.screenId
|
||||
}).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"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
612
pagesMall/goods/order.vue
Normal file
612
pagesMall/goods/order.vue
Normal file
@@ -0,0 +1,612 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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-method flex align-items-center" @click="openDeliveryMethod" v-if="mallConfig.self_pickup_status == 1">
|
||||
<view class="method-title">发货方式</view>
|
||||
<view class="method-value flex-item">{{deliveryMethod == 2 ? "到店自提" : "快递发货"}}</view>
|
||||
<image class="method-icon" src="/static/right.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<!-- 到店自提 -->
|
||||
<view class="main-address" v-if="deliveryMethod == 2">
|
||||
<view class="address-title">自提地址</view>
|
||||
<view class="address-box flex align-items-center" @click="toNavigation()">
|
||||
<view class="box-text flex-item">{{mallConfig.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="mallConfig.mobile" @click="onContact()">{{mallConfig.mobile}}</view>
|
||||
</view>
|
||||
<!-- 地址选择 -->
|
||||
<view class="main-address" @click="chooseAddress()" v-else>
|
||||
<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">
|
||||
<block v-for="(item, index) in goodsData" :key="index">
|
||||
<mall-store :show-data="item" :show-number="item.number" @changeNumber="changeNumber($event, index)"></mall-store>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 商品费用 -->
|
||||
<view class="main-cost">
|
||||
<view class="cost-info">
|
||||
<view class="title">商品总额</view>
|
||||
<view class="value">￥{{totalPrice}}</view>
|
||||
</view>
|
||||
<view class="cost-info" v-if="deliveryMethod == 1">
|
||||
<view class="title">运费总额</view>
|
||||
<view class="value">￥{{parseFloat(orderFreight).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer">
|
||||
<view class="flex align-items-center">
|
||||
<view class="footer-money text-ellipsis-more"><text>￥</text>{{getOrderAmount()}}</view>
|
||||
<view class="footer-btn flex-item" @click="submitOrder()" v-if="userMobile">提交订单</view>
|
||||
<button class="footer-btn flex-item clear" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" v-else>提交订单</button>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 发货方式选择弹窗 -->
|
||||
<select-picker ref="selectPicker" title="发货方式" @confirm="changeDeliveryMethod" @onChange="pageChange"></select-picker>
|
||||
<!-- 选择地址弹窗 -->
|
||||
<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 mallStore from "@/pagesMall/component/mall/store.vue"
|
||||
import selectPicker from "@/pages/component/picker/select.vue"
|
||||
import addressModal from "@/pagesMall/component/modal/address.vue"
|
||||
import quantityModal from "@/pagesMall/component/modal/quantity.vue"
|
||||
export default {
|
||||
components: {
|
||||
mallStore,
|
||||
selectPicker,
|
||||
addressModal,
|
||||
quantityModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 页面是否阻止滚动
|
||||
pageShow: false,
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 商品数据
|
||||
goodsData: [],
|
||||
// 发货方式
|
||||
deliveryMethod: 1,
|
||||
// 已选地址
|
||||
addressData: {},
|
||||
// 订单运费
|
||||
orderFreight: 0,
|
||||
// 是否为购物车商品
|
||||
isCartItem: false,
|
||||
// 商城配置
|
||||
mallConfig: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconMore: state => {
|
||||
return svgData.svgToUrl("more", state.app.themeColor)
|
||||
},
|
||||
userMobile: state => state.user.mobile,
|
||||
subscribeIds: state => state.app.subscribeNotifyIds,
|
||||
}),
|
||||
totalPrice() {
|
||||
var result = this.goodsData.reduce((sum, item) => sum + (parseFloat(item.price) * parseInt(item.number)), 0)
|
||||
return parseFloat(result).toFixed(2);
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getMallConfig()
|
||||
this.getGoodsDetails(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 改变页面滚动状态
|
||||
pageChange(state) {
|
||||
this.pageShow = state
|
||||
},
|
||||
// 获取商品详情
|
||||
getGoodsDetails(fn) {
|
||||
if (this.$store.state.app?.mallOrder?.list?.length) {
|
||||
this.goodsData = this.$store.state.app.mallOrder.list || []
|
||||
this.isCartItem = this.$store.state.app.mallOrder.isCartItem || false
|
||||
this.getAddress(() => {
|
||||
this.getPostage(fn)
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "请选择商品后下单",
|
||||
showCancel: false,
|
||||
confirmText: "返回",
|
||||
confirmColor: this.themeColor,
|
||||
complete: () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取商城配置
|
||||
getMallConfig() {
|
||||
this.$util.request("mall.config").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.mallConfig = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取商城配置', error)
|
||||
})
|
||||
},
|
||||
// 获取默认地址
|
||||
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)
|
||||
})
|
||||
},
|
||||
// 获取运费
|
||||
getPostage(fn) {
|
||||
if (this.deliveryMethod == 2) {
|
||||
if (fn) fn()
|
||||
return
|
||||
}
|
||||
if (!this.addressData || !this.addressData.id) {
|
||||
if (fn) fn()
|
||||
return
|
||||
}
|
||||
this.$util.request("mall.getPostage", {
|
||||
pay_price: this.totalPrice,
|
||||
address_id: this.addressData.id
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.orderFreight = parseFloat(res.data.price)
|
||||
} else {
|
||||
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.submitOrder()
|
||||
} 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'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 打开发货方式弹窗
|
||||
openDeliveryMethod() {
|
||||
const methodList = [
|
||||
{ id: 1, name: "快递发货" },
|
||||
{ id: 2, name: "到店自提" },
|
||||
]
|
||||
this.$refs.selectPicker.open(methodList, this.deliveryMethod)
|
||||
},
|
||||
// 改变发货方式
|
||||
changeDeliveryMethod(value) {
|
||||
this.deliveryMethod = value.id
|
||||
if (value.id == 1) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.getPostage(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 选择地址
|
||||
chooseAddress() {
|
||||
this.$refs.addressModal.open(this.addressData.id)
|
||||
},
|
||||
// 改变选择的地址
|
||||
changeAddress(item) {
|
||||
this.addressData = item
|
||||
this.getPostage()
|
||||
},
|
||||
// 跳转地图导航
|
||||
toNavigation() {
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: {
|
||||
latitude: this.mallConfig.latitude,
|
||||
longitude: this.mallConfig.longitude,
|
||||
address: this.mallConfig.address,
|
||||
},
|
||||
})
|
||||
},
|
||||
// 联系
|
||||
onContact() {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: this.mallConfig.mobile,
|
||||
})
|
||||
},
|
||||
// 改变商品数量
|
||||
changeNumber(type, index) {
|
||||
if (type == 1) {
|
||||
if (parseInt(this.goodsData[index].number) > 1) {
|
||||
const goodsNumber = parseInt(this.goodsData[index].number) - 1
|
||||
this.changeQuantity(goodsNumber, index)
|
||||
}
|
||||
} else if (type == 2) {
|
||||
const goodsNumber = parseInt(this.goodsData[index].number) + 1
|
||||
this.changeQuantity(goodsNumber, index)
|
||||
} else if (type == 3) {
|
||||
this.$refs.quantityModal.open(this.goodsData[index].number, index)
|
||||
}
|
||||
},
|
||||
// 选择商品数量
|
||||
changeQuantity(number, index) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "加载中"
|
||||
})
|
||||
if (this.isCartItem) {
|
||||
this.$util.request("mall.updateCartNumber", {
|
||||
goods_id: this.goodsData[index].id,
|
||||
number: number,
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
this.$set(this.goodsData[index], "number", parseInt(number))
|
||||
this.getPostage(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('更新购物车商品数量', error)
|
||||
})
|
||||
} else {
|
||||
this.$set(this.goodsData[index], "number", parseInt(number))
|
||||
this.getPostage(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取订单总额
|
||||
getOrderAmount() {
|
||||
var result = 0
|
||||
if (this.deliveryMethod == 2) result = parseFloat(this.totalPrice)
|
||||
else result = parseFloat(this.totalPrice) + parseFloat(this.orderFreight)
|
||||
return parseFloat(result).toFixed(2)
|
||||
},
|
||||
// 提交订单
|
||||
submitOrder() {
|
||||
if (this.deliveryMethod == 1 && (!this.addressData || !this.addressData.id)) {
|
||||
uni.showToast({
|
||||
title: "请选择收货地址",
|
||||
icon: "none"
|
||||
})
|
||||
return;
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "提交中",
|
||||
mask: true
|
||||
})
|
||||
this.subscribeMessage(() => {
|
||||
var data = {
|
||||
goods_id: this.goodsData.map(item => item.id).join(),
|
||||
buy_now: this.isCartItem ? 2 : 1,
|
||||
delivery_method: this.deliveryMethod,
|
||||
}
|
||||
if (!this.isCartItem) data.number = this.goodsData[0].number
|
||||
if (this.deliveryMethod == 1) data.address_id = this.addressData.id
|
||||
this.$util.request("mall.createOrder", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
this.$util.toPage({
|
||||
mode: 2,
|
||||
path: `/pagesMall/order/payment?money=${this.getOrderAmount()}&id=${res.data.order_id}`
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('创建订单', error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 订阅消息
|
||||
subscribeMessage(fn, number = 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
var tmplIds = []
|
||||
if (this.subscribeIds?.applet_order_shipping_notification) tmplIds.push(this.subscribeIds.applet_order_shipping_notification)
|
||||
if (this.subscribeIds?.applet_confirm_receipt_notification) tmplIds.push(this.subscribeIds.applet_confirm_receipt_notification)
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
success: () => {
|
||||
fn()
|
||||
},
|
||||
fail: (error) => {
|
||||
if (error.errCode == 20004) {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请前往设置打开接受通知',
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: '继续提交',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (error.errCode) {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '消息订阅失败，无法接收到订单通知，错误码：' + error.errCode,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: '继续提交',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
fn()
|
||||
}
|
||||
},
|
||||
})
|
||||
} else if (++number > 3) {
|
||||
this.subscribeMessage(fn, number)
|
||||
} else {
|
||||
fn()
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
fn()
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-method {
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.method-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.method-value {
|
||||
margin-left: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.method-icon {
|
||||
margin-left: 16rpx;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-address {
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
|
||||
.address-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 32rpx;
|
||||
}
|
||||
|
||||
.main-cost {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.cost-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #979797;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
background: #FFF;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.footer-money {
|
||||
color: var(--theme-color);
|
||||
font-size: 40rpx;
|
||||
line-height: 56rpx;
|
||||
word-break: break-all;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
min-width: 220rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
565
pagesMall/order/details.vue
Normal file
565
pagesMall/order/details.vue
Normal file
@@ -0,0 +1,565 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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 == 1">
|
||||
<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 == 2">
|
||||
<view class="status-text">
|
||||
<text v-if="orderInfo.delivery_method == 2">待自提</text>
|
||||
<text v-else>待发货</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">
|
||||
<text v-if="orderInfo.delivery_method == 2">商品待自提</text>
|
||||
<text v-else>商品待发货</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" v-if="orderInfo.delivery_method == 2">
|
||||
<view class="address-title">自提地址</view>
|
||||
<view class="address-box flex align-items-center" @click="toNavigation()">
|
||||
<view class="box-text flex-item">{{mallConfig.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="mallConfig.mobile" @click="onContact()">{{mallConfig.mobile}}</view>
|
||||
</view>
|
||||
<!-- 地址选择 -->
|
||||
<view class="main-address" v-else>
|
||||
<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-code" v-if="orderInfo.delivery_method == 2 && orderInfo.pick_up_code">
|
||||
<view class="code">{{orderInfo.pick_up_code}}</view>
|
||||
<view class="label">提货码</view>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="main-goods">
|
||||
<block v-for="(item, index) in orderInfo.goods" :key="index">
|
||||
<mall-store :show-data="item"></mall-store>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 订单信息 -->
|
||||
<view class="main-order">
|
||||
<view class="order-info">
|
||||
<view class="title">商品总额</view>
|
||||
<view class="value">￥{{orderInfo.goods_price || ''}}</view>
|
||||
</view>
|
||||
<view class="order-info" v-if="orderInfo.delivery_method == 1">
|
||||
<view class="title">运费总额</view>
|
||||
<view class="value">￥{{orderInfo.pay_postage || '0.00'}}</view>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="title">总计金额</view>
|
||||
<view class="value">￥{{orderInfo.total_price || '0.00'}}</view>
|
||||
</view>
|
||||
<view class="order-info" v-if="orderInfo.delivery_method == 2">
|
||||
<view class="title">发货方式</view>
|
||||
<view class="value" style="color: #5A5B6E;">到店自提</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer" v-if="orderInfo.state == 1 || orderInfo.state == 2 || orderInfo.state == 3">
|
||||
<view class="flex align-items-center" v-if="orderInfo.state == 1">
|
||||
<view class="footer-money"><text>￥</text>{{orderInfo.total_price}}</view>
|
||||
<view class="footer-btn flex-item" :style="{background: themeColor}" @click="handlePayment()">立即支付</view>
|
||||
<view class="footer-btn flex-item" style="background: #FF626E;" @click="handleCancel()">取消订单</view>
|
||||
</view>
|
||||
<view class="flex align-items-center" v-if="orderInfo.state == 2">
|
||||
<view class="footer-btn flex-item" style="background: #FF626E;" @click="handleRefund()">申请退款</view>
|
||||
</view>
|
||||
<view class="flex align-items-center" v-if="orderInfo.state == 3">
|
||||
<view class="footer-btn flex-item" style="background: #FF626E;" @click="handleRefund()">申请退款</view>
|
||||
<view class="footer-btn flex-item" :style="{background: themeColor}" @click="handleDelivery()">确认收货</view>
|
||||
</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import mallStore from "@/pagesMall/component/mall/store.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
components: {
|
||||
mallStore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 订单id
|
||||
orderId: null,
|
||||
// 订单号
|
||||
orderNo: null,
|
||||
// 订单详情
|
||||
orderInfo: {},
|
||||
// 商城配置
|
||||
mallConfig: {},
|
||||
// 延时器
|
||||
delayer: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconClock: state => {
|
||||
return svgData.svgToUrl("clock", state.app.themeColor)
|
||||
},
|
||||
iconMore: state => {
|
||||
return svgData.svgToUrl("more", state.app.themeColor)
|
||||
},
|
||||
deliveryManagement: state => state.app.deliveryManagement,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
if (uni.getStorageSync("token")) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
if (option.order_id) this.orderId = option.order_id;
|
||||
else if (option.id) this.orderNo = option.id;
|
||||
this.getMallConfig()
|
||||
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) {
|
||||
var data = {}
|
||||
if (this.orderId) data.id = this.orderId
|
||||
else if (this.orderNo) data.order_no = this.orderNo
|
||||
this.$util.request("mall.orderDetails", data).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.orderInfo = res.data
|
||||
this.orderInfo.goods_price = parseFloat(parseFloat(this.orderInfo.total_price) - parseFloat(this.orderInfo.pay_postage || 0)).toFixed(2)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取订单详情', error)
|
||||
})
|
||||
},
|
||||
// 获取商城配置
|
||||
getMallConfig() {
|
||||
this.$util.request("mall.config").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.mallConfig = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取商城配置', error)
|
||||
})
|
||||
},
|
||||
// 取消订单
|
||||
handleCancel() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认取消该订单吗?',
|
||||
confirmText: '确认取消',
|
||||
confirmColor: this.themeColor,
|
||||
cancelText: '我再想想',
|
||||
cancelColor: '#999999',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mall.delOrder", {
|
||||
order_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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 立即支付
|
||||
handlePayment() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: `/pagesMall/order/payment?money=${this.orderInfo.total_price}&id=${this.orderInfo.id}`
|
||||
})
|
||||
},
|
||||
// 申请退款
|
||||
handleRefund() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/refund/apply?id=" + this.orderInfo.id
|
||||
})
|
||||
},
|
||||
// 确认收货
|
||||
handleDelivery() {
|
||||
if (this.deliveryManagement == 1) {
|
||||
if (wx.openBusinessView) {
|
||||
wx.openBusinessView({
|
||||
businessType: 'weappOrderConfirm',
|
||||
extraData: { transaction_id: this.orderInfo.trade_no },
|
||||
success: e => {
|
||||
if (e.extraData.status === 'success') {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mall.orderCollect", {
|
||||
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)
|
||||
})
|
||||
} else {
|
||||
console.error("调用微信收货", e)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("调用微信收货", err)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "您的微信版本过低，请升级微信版本后重试",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} else {
|
||||
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("mall.orderCollect", {
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转地图导航
|
||||
toNavigation() {
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: {
|
||||
latitude: this.mallConfig.latitude,
|
||||
longitude: this.mallConfig.longitude,
|
||||
address: this.mallConfig.address,
|
||||
},
|
||||
})
|
||||
},
|
||||
// 联系
|
||||
onContact() {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: this.mallConfig.mobile,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</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-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.address-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.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-code {
|
||||
margin-top: 32rpx;
|
||||
padding: 40rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.code {
|
||||
text-align: center;
|
||||
color: #5A5B6E;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 12rpx;
|
||||
color: #979797;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.main-goods {
|
||||
margin-top: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 32rpx;
|
||||
}
|
||||
|
||||
.main-order {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #979797;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 96;
|
||||
background: #FFF;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.footer-money {
|
||||
color: var(--theme-color);
|
||||
font-size: 40rpx;
|
||||
line-height: 56rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
196
pagesMall/order/index.vue
Normal file
196
pagesMall/order/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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 "@/pagesMall/component/mall/order.vue"
|
||||
export default {
|
||||
components: {
|
||||
mallOrder,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 分类列表
|
||||
screenList: [{
|
||||
text: "全部",
|
||||
},
|
||||
{
|
||||
text: "待付款",
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
text: "待发货",
|
||||
state: 2
|
||||
},
|
||||
{
|
||||
text: "待收货",
|
||||
state: 3
|
||||
},
|
||||
{
|
||||
text: "已完成",
|
||||
state: 4
|
||||
}
|
||||
],
|
||||
// 已选分类
|
||||
selectScreen: 0,
|
||||
// 订单列表
|
||||
orderList: [],
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
}
|
||||
},
|
||||
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("mall.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>
|
||||
220
pagesMall/order/payment.vue
Normal file
220
pagesMall/order/payment.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 订单支付 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="订单支付"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<view class="main-info">
|
||||
<view class="info-label">订单需要支付</view>
|
||||
<view class="info-value"><text>￥</text>{{orderAmount}}</view>
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<button class="footer-btn" :style="{ background: themeColor }" @click="handlePayment()">立即支付</button>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
// #ifdef H5
|
||||
import wx from 'weixin-js-sdk';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 支付金额
|
||||
orderAmount: "",
|
||||
// 订单id
|
||||
orderId: "",
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.orderAmount = option.money
|
||||
this.orderId = option.id
|
||||
this.$nextTick(() => {
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #ifdef H5
|
||||
this.initConfig()
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
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: ['chooseWXPay']
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('通过config接口注入权限验证配置 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 支付
|
||||
handlePayment() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mall.preparePay", {
|
||||
order_id: this.orderId
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
const data = res.data
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: "wxpay",
|
||||
...data,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
if (res.errMsg == "requestPayment:ok") {
|
||||
uni.redirectTo({
|
||||
url: "/pagesMall/order/success?id=" + this.orderId
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: "支付已取消",
|
||||
icon: "none",
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
wx.ready(() => {
|
||||
uni.hideLoading()
|
||||
wx.chooseWXPay({
|
||||
timestamp: data.timeStamp,
|
||||
package: data.package,
|
||||
nonceStr: data.nonceStr,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign,
|
||||
success: (res) => {
|
||||
uni.hideLoading();
|
||||
if (res.errMsg == "chooseWXPay:ok") {
|
||||
uni.redirectTo({
|
||||
url: "/pagesMall/order/success?id=" + this.orderId
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付已取消',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
} 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-info {
|
||||
background: #FFF;
|
||||
padding: 48rpx 32rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.info-label {
|
||||
color: #5A5B6E;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
margin-top: 32rpx;
|
||||
color: #E10602;
|
||||
font-size: 72rpx;
|
||||
font-weight: 600;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #FFF;
|
||||
border-top: 1rpx solid #F6F7FB;
|
||||
|
||||
.footer-btn {
|
||||
color: #FFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
131
pagesMall/order/success.vue
Normal file
131
pagesMall/order/success.vue
Normal 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('pagesMall/order/index') > -1 || prevPage.route.indexOf('pagesMall/order/details') > -1)) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 2,
|
||||
path: "/pagesMall/order/details?order_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>
|
||||
223
pagesMall/refund/apply.vue
Normal file
223
pagesMall/refund/apply.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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-column">
|
||||
<view class="column-title">退款原因</view>
|
||||
<view class="column-list">
|
||||
<view class="list-item flex align-items-center" v-for="(item, index) in reasonList" :key="index" @click="changeReason(index)">
|
||||
<view class="item-radio" :class="{active: selectReason == index}">
|
||||
<image src="/static/tick.png" mode="aspectFill" v-if="selectReason == index"></image>
|
||||
</view>
|
||||
<view class="item-label">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-column">
|
||||
<view class="column-title">退款描述</view>
|
||||
<view class="column-content">
|
||||
<textarea class="input" placeholder="请填写您的退款描述，200字以内" v-model="formData.refund_content" placeholder-class="placeholder" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="main-footer">
|
||||
<view class="footer-btn" @click="handleSubmit()">提交退款申请</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 原因列表
|
||||
reasonList: [{
|
||||
id: 1,
|
||||
name: '产品存在质量问题'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '产品实物与描述不符'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '卖家的发货环节出现问题'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '卖家存在延迟发货问题'
|
||||
}
|
||||
],
|
||||
// 已选原因
|
||||
selectReason: null,
|
||||
// 表单内容
|
||||
formData: {
|
||||
order_id: "",
|
||||
refund_reason: "",
|
||||
refund_content: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
this.formData.order_id = option.id
|
||||
this.$nextTick(() => {
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 更换退款原因
|
||||
changeReason(index) {
|
||||
this.selectReason = index
|
||||
this.formData.refund_reason = this.reasonList[index].name
|
||||
},
|
||||
// 提交退款申请
|
||||
handleSubmit() {
|
||||
if (!this.formData.refund_reason && !this.formData.refund_content) {
|
||||
uni.showToast({
|
||||
title: "请选择退款原因或填写退款描述",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true
|
||||
})
|
||||
this.$util.request("mall.orderRefund", this.formData).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
uni.redirectTo({
|
||||
url: "/pagesMall/refund/success"
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('提交退款申请', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-column {
|
||||
padding: 24rpx 32rpx 48rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FFF;
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.column-list {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.list-item {
|
||||
padding: 24rpx 16rpx;
|
||||
|
||||
.item-radio {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #D6DBDE;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
margin-left: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-content {
|
||||
margin-top: 32rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #F6F7FB;
|
||||
height: 260rpx;
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 20rpx 44rpx;
|
||||
background: var(--theme-color);
|
||||
border-radius: 40rpx;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
411
pagesMall/refund/details.vue
Normal file
411
pagesMall/refund/details.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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.refund_status == 2 || orderInfo.refund_status == 3) ? '144rpx' : '32rpx'}" v-if="loadEnd">
|
||||
<!-- 订单状态 -->
|
||||
<view class="main-status">
|
||||
<block v-if="orderInfo.refund_status == 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-if="orderInfo.refund_status == 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-if="orderInfo.refund_status == 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>
|
||||
<block v-if="orderInfo.refund_status == 5">
|
||||
<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-reason">{{orderInfo.refund_reason}}</view>
|
||||
<!-- 到店自提 -->
|
||||
<view class="main-address" v-if="orderInfo.delivery_method == 2">
|
||||
<view class="address-title">自提地址</view>
|
||||
<view class="address-box flex align-items-center" @click="toNavigation()">
|
||||
<view class="box-text flex-item">{{mallConfig.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="mallConfig.mobile" @click="onContact()">{{mallConfig.mobile}}</view>
|
||||
</view>
|
||||
<!-- 收货地址 -->
|
||||
<view class="main-address" v-else>
|
||||
<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">
|
||||
<block v-for="(item, index) in orderInfo.goods" :key="index">
|
||||
<mall-store :show-data="item"></mall-store>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 订单信息 -->
|
||||
<view class="main-order">
|
||||
<view class="order-info">
|
||||
<view class="title">商品总额</view>
|
||||
<view class="value">￥{{orderInfo.goods_price || ''}}</view>
|
||||
</view>
|
||||
<view class="order-info" v-if="orderInfo.delivery_method == 1">
|
||||
<view class="title">运费总额</view>
|
||||
<view class="value">￥{{orderInfo.pay_postage || '0.00'}}</view>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="title">总计金额</view>
|
||||
<view class="value">￥{{orderInfo.total_price || '0.00'}}</view>
|
||||
</view>
|
||||
<view class="order-info" v-if="orderInfo.delivery_method == 2">
|
||||
<view class="title">发货方式</view>
|
||||
<view class="value" style="color: #5A5B6E;">到店自提</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer" v-if="orderInfo.refund_status == 2 || orderInfo.refund_status == 3">
|
||||
<view class="footer-btn" style="background: #FF626E;" @click="handleCancel()" v-if="orderInfo.refund_status == 2">取消退款</view>
|
||||
<view class="footer-btn" :style="{background: themeColor}" @click="handleWrite()" v-if="orderInfo.refund_status == 3">填写信息</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import mallStore from "@/pagesMall/component/mall/store.vue"
|
||||
import svgData from "@/common/svg.js"
|
||||
export default {
|
||||
components: {
|
||||
mallStore
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 订单id
|
||||
orderId: '',
|
||||
// 订单详情
|
||||
orderInfo: {},
|
||||
// 商城配置
|
||||
mallConfig: {},
|
||||
// 延时器
|
||||
delayer: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
iconClock: state => {
|
||||
return svgData.svgToUrl("clock", state.app.themeColor)
|
||||
},
|
||||
iconMore: state => {
|
||||
return svgData.svgToUrl("more", state.app.themeColor)
|
||||
},
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.orderId = option.id;
|
||||
this.getMallConfig()
|
||||
this.getOrderDetails(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
if (this.loadEnd) this.getOrderDetails()
|
||||
},
|
||||
onUnload() {
|
||||
clearTimeout(this.delayer)
|
||||
},
|
||||
methods: {
|
||||
// 获取订单详情
|
||||
getOrderDetails(fn) {
|
||||
this.$util.request("mall.orderDetails", {
|
||||
id: this.orderId
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
this.orderInfo = res.data
|
||||
this.orderInfo.goods_price = parseFloat(parseFloat(this.orderInfo.total_price) - parseFloat(this.orderInfo.pay_postage || 0)).toFixed(2)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取订单详情', error)
|
||||
})
|
||||
},
|
||||
// 获取商城配置
|
||||
getMallConfig() {
|
||||
this.$util.request("mall.config").then(res => {
|
||||
if (res.code == 1) {
|
||||
this.mallConfig = res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取商城配置', error)
|
||||
})
|
||||
},
|
||||
// 取消退款
|
||||
handleCancel() {
|
||||
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("mall.cancelRefund", {
|
||||
id: this.orderId
|
||||
}).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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 填写信息
|
||||
handleWrite() {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pagesMall/refund/goods?id=" + this.orderId
|
||||
})
|
||||
},
|
||||
// 跳转地图导航
|
||||
toNavigation() {
|
||||
this.$util.toPage({
|
||||
mode: 7,
|
||||
address: {
|
||||
latitude: this.mallConfig.latitude,
|
||||
longitude: this.mallConfig.longitude,
|
||||
address: this.mallConfig.address,
|
||||
},
|
||||
})
|
||||
},
|
||||
// 联系
|
||||
onContact() {
|
||||
this.$util.toPage({
|
||||
mode: 6,
|
||||
phone: this.mallConfig.mobile,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</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-reason {
|
||||
margin-bottom: 32rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
background: #FFF;
|
||||
color: #FF626E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.main-address {
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
background: #FFF;
|
||||
|
||||
.address-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.address-name {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 32rpx;
|
||||
}
|
||||
|
||||
.main-order {
|
||||
margin-top: 32rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #979797;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
202
pagesMall/refund/goods.vue
Normal file
202
pagesMall/refund/goods.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 退货信息填写 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="填写信息"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<!-- 商品信息 -->
|
||||
<view class="main-goods">
|
||||
<block v-for="(item, index) in orderInfo.goods" :key="index">
|
||||
<mall-store :show-data="item"></mall-store>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 填写快递单号 -->
|
||||
<view class="main-form">
|
||||
<view class="form-title">填写快递单号</view>
|
||||
<input class="form-input" type="text" v-model="trackingNumber" placeholder="填写快递单号" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="main-footer">
|
||||
<view class="footer-btn" :style="{background: themeColor}" @click="handleSubmit()">提交信息</view>
|
||||
<view class="safe-padding"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import mallStore from "@/pagesMall/component/mall/store.vue"
|
||||
export default {
|
||||
components: {
|
||||
mallStore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 订单id
|
||||
orderId: '',
|
||||
// 订单详情
|
||||
orderInfo: {},
|
||||
// 快递单号
|
||||
trackingNumber: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
})
|
||||
},
|
||||
onLoad(option) {
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.orderId = option.id;
|
||||
this.getOrderDetails(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
if (this.loadEnd) this.getOrderDetails()
|
||||
},
|
||||
methods: {
|
||||
// 获取订单详情
|
||||
getOrderDetails(fn) {
|
||||
this.$util.request("mall.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 => {
|
||||
console.error('获取订单详情', error)
|
||||
})
|
||||
},
|
||||
// 提交快递信息
|
||||
handleSubmit() {
|
||||
if (!this.trackingNumber) {
|
||||
uni.showToast({
|
||||
title: "请填写快递单号",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
mask: true,
|
||||
})
|
||||
this.$util.request("mall.receipt", {
|
||||
order_id: this.orderInfo.id,
|
||||
refund_express_no: this.trackingNumber
|
||||
}).then(res => {
|
||||
if (res.code == 1) {
|
||||
uni.redirectTo({
|
||||
url: "/pagesMall/refund/success",
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('提交快递信息', error)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 32rpx 32rpx 144rpx;
|
||||
|
||||
.main-goods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 32rpx;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
margin-top: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 32rpx 48rpx;
|
||||
background: #FFF;
|
||||
|
||||
.form-title {
|
||||
color: #5A5B6E;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
margin-top: 24rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 32rpx;
|
||||
background: #F6F7FB;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
196
pagesMall/refund/index.vue
Normal file
196
pagesMall/refund/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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-refund :show-data="orderList" @getOrderList="resetOrderList"></mall-refund>
|
||||
<empty top="36%" title="暂无相关订单~" v-if="orderList.length == 0"></empty>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<tab-bar></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
import mallRefund from "@/pagesMall/component/mall/refund.vue"
|
||||
export default {
|
||||
components: {
|
||||
mallRefund,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否加载完成
|
||||
loadEnd: false,
|
||||
// 标题栏高度
|
||||
titleBarHeight: 0,
|
||||
// 分类列表
|
||||
screenList: [{
|
||||
text: "全部",
|
||||
},
|
||||
{
|
||||
text: "申请中",
|
||||
state: 2
|
||||
},
|
||||
{
|
||||
text: "待退货",
|
||||
state: 3
|
||||
},
|
||||
{
|
||||
text: "退款中",
|
||||
state: 4
|
||||
},
|
||||
{
|
||||
text: "已退款",
|
||||
state: 5
|
||||
}
|
||||
],
|
||||
// 已选分类
|
||||
selectScreen: 0,
|
||||
// 订单列表
|
||||
orderList: [],
|
||||
// 分类查询参数
|
||||
page: 1,
|
||||
limit: 20,
|
||||
hasMore: false,
|
||||
}
|
||||
},
|
||||
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.refund_status = this.screenList[this.selectScreen].state
|
||||
this.$util.request("mall.refundList", 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>
|
||||
126
pagesMall/refund/success.vue
Normal file
126
pagesMall/refund/success.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| 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,
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.loadEnd = true
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 前往退款列表
|
||||
toOrder() {
|
||||
let prevPage = getCurrentPages()[getCurrentPages().length - 2];
|
||||
if (prevPage && (prevPage.route.indexOf('pagesMall/refund/index') > -1 || prevPage.route.indexOf('pagesMall/refund/details') > -1)) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 2,
|
||||
path: "/pagesMall/refund/index"
|
||||
})
|
||||
}
|
||||
},
|
||||
// 返回首页
|
||||
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>
|
||||
Reference in New Issue
Block a user