积分商城功能
This commit is contained in:
hupeng committed
1 parent
dc73f7428c
commit
a2e889b517
8 files changed
+1140
-2
No files matched your search
@@ -0,0 +1,52 @@
|
||||
import api from './api'
|
||||
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
export function scoreShopDetail(data) {
|
||||
return api.get('/score-product/detail', data, { login: false })
|
||||
}
|
||||
/**
|
||||
* 列表
|
||||
*/
|
||||
export function scoreShopIndex(data) {
|
||||
return api.get('/score-product/list', data, { login: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
export function scoreShopExchange(data) {
|
||||
return api.post('/score-order/submit', data, { login: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单列表
|
||||
*/
|
||||
export function scoreShopOrder(data) {
|
||||
return api.get('/score-order/list', data, { login: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单列表
|
||||
*/
|
||||
export function scoreShopOrderDetail(data) {
|
||||
return api.get('/score-order/detail', data, { login: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认收货
|
||||
*/
|
||||
export function scoreShopReceive(data) {
|
||||
return api.get('/score-order/take', data, { login: false })
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 查询物流
|
||||
*/
|
||||
export function getLogistic(data) {
|
||||
return api.get('/express/getLogistic', data, { login: false })
|
||||
}
|
||||
|
||||
|
||||
@@ -159,7 +159,43 @@
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/scoreproduct/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/scoreproduct/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "产品详情",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/scoreproduct/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单列表",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}, {
|
||||
"path": "pages/scoreproduct/orderDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/scoreproduct/confirm",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "确认",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="px-2 mt-2">
|
||||
<view class="bg-white p-2" >
|
||||
<uv-form :model="form" ref="uForm" >
|
||||
<uv-form-item>
|
||||
<view v-if="address.realName">
|
||||
<view>{{ address.address }} {{ address.detail }}</view>
|
||||
<text>{{ address.realName }} {{ address.phone }}</text>
|
||||
</view>
|
||||
<view v-else>请选择收货地址</view>
|
||||
<template #right>
|
||||
<uv-icon name="arrow-right" @click="chooseAddress"></uv-icon>
|
||||
</template>
|
||||
</uv-form-item>
|
||||
</uv-form>
|
||||
</view>
|
||||
<view class="bg-white p-2 mt-2">
|
||||
<view class="mb-5">积分商城</view>
|
||||
<view class="flex justify-between">
|
||||
<view class="flex">
|
||||
<image :src="product.image" mode="aspectFill" class="image"></image>
|
||||
<text class="font-size-medium">{{ product.title }}</text>
|
||||
</view>
|
||||
<view class="flex flex-column">
|
||||
<text class="font-size-medium">{{ product.score }}积分</text>
|
||||
<text class="font-size-medium text-color-assist mt-2 text-right">×1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between mt-5">
|
||||
<text class="font-size-medium">积分抵扣</text>
|
||||
<text class="font-size-medium">{{ product.score }}</text>
|
||||
</view>
|
||||
<view class="text-right font-size-lg mt-5 text-color-assist">合计:<text class="font-size-medium text-color-base ">¥{{ product.score }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed-bottom flex justify-between align-center bg-white ">
|
||||
<view class="mx-2 ont-weight-light">合计:<text class="text-danger">￥{{ product.score }}积分</text></view>
|
||||
<view><uv-button type="warning" color="#ffcc00" :customStyle="customStyle" size="large" text="立即兑换" @click="submit"></uv-button></view>
|
||||
</view>
|
||||
<uv-toast ref="uToast" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopExchange,
|
||||
scoreShopDetail
|
||||
} from '@/api/score'
|
||||
import cookie from '@/utils/cookie'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const { proxy } = getCurrentInstance();
|
||||
const main = useMainStore()
|
||||
const { address,isLogin} = storeToRefs(main)
|
||||
|
||||
const title = ref("确认订单")
|
||||
const product = ref({})
|
||||
|
||||
const customStyle = computed(() =>{
|
||||
return {
|
||||
paddingLeft:'60rpx',
|
||||
paddingRight:'60rpx'
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
console.log('address:',address.value)
|
||||
if(!isLogin.value) {
|
||||
uni.navigateTo({url: '/pages/components/pages/login/login'})
|
||||
}
|
||||
product.value = cookie.get('score_product')
|
||||
|
||||
})
|
||||
|
||||
// 选择地址
|
||||
const chooseAddress = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
|
||||
})
|
||||
}
|
||||
|
||||
// 提交
|
||||
const submit = async() => {
|
||||
if (!address.value.id) {
|
||||
proxy.$refs.uToast.show({
|
||||
message: '请选择收货地址',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
let data = await scoreShopExchange({
|
||||
productId: product.value.id,
|
||||
addressId: address.value.id,
|
||||
num: 1
|
||||
})
|
||||
|
||||
if (data) {
|
||||
cookie.remove('score_product')
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/order'
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="container">
|
||||
<view class="carousel">
|
||||
<swiper indicator-dots circular=true duration="400">
|
||||
<swiper-item class="swiper-item" v-for="(item,index) in product.images" :key="index">
|
||||
<view class="image-wrapper">
|
||||
<image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="introduce-section" v-if="product.id">
|
||||
<text class="title">{{product.title}}</text>
|
||||
<view class="price-box bot-row">
|
||||
<text>积分： {{product.score}}</text>
|
||||
<text>销量: {{product.sales}}</text>
|
||||
<text>库存: {{product.stock}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-desc" v-if="product.desc">
|
||||
<rich-text :nodes="product.desc"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作菜单 -->
|
||||
<view class="fixed-bottom px-2">
|
||||
<button class="btn" @click="confirm">立即兑换</button>
|
||||
</view>
|
||||
|
||||
<uv-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopExchange,
|
||||
scoreShopDetail
|
||||
} from '@/api/score'
|
||||
import cookie from '@/utils/cookie'
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const buttonText = ref("立即兑换")
|
||||
const specClass = ref('none')
|
||||
const product = ref({})
|
||||
const id = ref(false)
|
||||
const form = ref(
|
||||
{
|
||||
address: {
|
||||
id: 0,
|
||||
door_number: "",
|
||||
name: "请选择收货地址",
|
||||
address: "",
|
||||
mobile: "",
|
||||
},
|
||||
num: 1 // 兑换数量
|
||||
}
|
||||
)
|
||||
const lock = ref(false)
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
getDetail(id.value);
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
id.value = options.id;
|
||||
getDetail(options.id);
|
||||
})
|
||||
|
||||
|
||||
// 选择地址
|
||||
const chooseAddress = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/address/address?is_choose=true&scene=scoreShop'
|
||||
})
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
cookie.set('score_product',product.value)
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/confirm'
|
||||
})
|
||||
}
|
||||
// 该表购买数量
|
||||
const valChange = (e) => {
|
||||
form.value.num = e.value
|
||||
}
|
||||
// 获取商品详情
|
||||
const getDetail = async(id, flash_id) => {
|
||||
let data = await scoreShopDetail({
|
||||
id: id
|
||||
});
|
||||
uni.stopPullDownRefresh();
|
||||
product.value = data;
|
||||
}
|
||||
//规格弹窗开关
|
||||
const toggleSpec = () => {
|
||||
if (specClass.value === 'show') {
|
||||
specClass.value = 'hide';
|
||||
setTimeout(() => {
|
||||
specClass.value = 'none';
|
||||
}, 250);
|
||||
} else if (specClass.value === 'none') {
|
||||
specClass.value = 'show';
|
||||
}
|
||||
}
|
||||
//stopPrevent() {},
|
||||
// 查看图片
|
||||
const previewImage = (index) => {
|
||||
uni.previewImage({
|
||||
current: product.value.images_text[index],
|
||||
urls: product.value.images_text,
|
||||
indicator: "number",
|
||||
loop: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.icon-you {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
height: 722upx;
|
||||
position: relative;
|
||||
|
||||
swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 750upx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 标题简介 */
|
||||
.introduce-section {
|
||||
background: #fff;
|
||||
padding: 20upx 30upx;
|
||||
|
||||
.title {
|
||||
font-size: 32upx;
|
||||
color: #555555;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
height: 64upx;
|
||||
padding: 10upx 0;
|
||||
font-size: 30rpx;
|
||||
color: #5A5B5C;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.bot-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #ffcc00;
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
margin: 30upx auto 20upx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* 详情 */
|
||||
.detail-desc {
|
||||
background: #fff;
|
||||
margin-top: 16upx;
|
||||
margin-bottom: 200rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view>
|
||||
<!--商品区-->
|
||||
<uv-waterfall v-model="list" :add-time="0" ref="uWaterfall" @changeList="changeList" :left-gap="10"
|
||||
:right-gap="10"
|
||||
:column-gap="1">
|
||||
<template v-slot:list1>
|
||||
<view class="demo-warter" v-for="(item, index) in list1" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
|
||||
<view class="demo-title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="demo-price">
|
||||
消耗积分:{{item.score}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:list2>
|
||||
<view class="demo-warter" v-for="(item, index) in list2" :key="index" @click="goDetail(item)">
|
||||
<image :src="item.image" mode="widthFix" style="width: 300rpx;"></image>
|
||||
<view class="demo-title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="demo-price">
|
||||
消耗积分:{{item.score}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-waterfall>
|
||||
<uv-load-more v-if="list.length > 0" :status="status"></uv-load-more>
|
||||
<uv-empty v-if="list.length == 0" mode="list"></uv-empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { onReachBottom,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
|
||||
import {
|
||||
scoreShopIndex
|
||||
} from '@/api/score'
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const title = ref('积分商品')
|
||||
const list = ref([])
|
||||
const page = ref(1)
|
||||
const pagesize = ref(10)
|
||||
const status = ref('loadmore')
|
||||
const list1 = ref([])
|
||||
const list2 = ref([])
|
||||
|
||||
const uWaterfall = ref()
|
||||
|
||||
let currentInstance = getCurrentInstance()
|
||||
|
||||
onShow(() => {
|
||||
getProduct()
|
||||
})
|
||||
|
||||
onReachBottom(async() => {
|
||||
if (status.value == 'loading') {
|
||||
return;
|
||||
}
|
||||
page.value++
|
||||
status.value = 'loading';
|
||||
let data = await scoreShopIndex({
|
||||
page: page.value,
|
||||
pagesize: pagesize.value
|
||||
});
|
||||
if (data) {
|
||||
list.value = list.value.concat(data);
|
||||
if (data.length == 0) {
|
||||
page.value--;
|
||||
status.value = 'nomore';
|
||||
} else if (data.length < pagesize.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
page.value = 1;
|
||||
getProduct()
|
||||
})
|
||||
|
||||
const changeList = (e) => {
|
||||
console.log('e:',e)
|
||||
if(e.name == 'list1'){
|
||||
list1.value.push(e.value)
|
||||
}else{
|
||||
list2.value.push(e.value)
|
||||
}
|
||||
|
||||
}
|
||||
const goDetail = (item) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/detail?id=' + item.id
|
||||
})
|
||||
}
|
||||
const getProduct = async() => {
|
||||
status.value = 'loading';
|
||||
//proxy.$refs.uWaterfall.clear();
|
||||
|
||||
let data = await scoreShopIndex({
|
||||
page: page.value,
|
||||
pagesize: pagesize.value
|
||||
});
|
||||
console.log('data:',data)
|
||||
uni.stopPullDownRefresh();
|
||||
if (data) {
|
||||
list.value = data;
|
||||
console.log('data2:',list.value)
|
||||
if (data.length < pagesize.value) {
|
||||
status.value = 'nomore';
|
||||
}
|
||||
} else {
|
||||
status.value = 'nomore';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search {
|
||||
margin: 10rpx !important;
|
||||
}
|
||||
|
||||
.demo-warter {
|
||||
border-radius: 8px;
|
||||
margin: 5px;
|
||||
background-color: #ffcc00;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 30rpx;
|
||||
margin-top: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.demo-tag {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.demo-tag-owner {
|
||||
background-color: $uv-error;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.demo-tag-text {
|
||||
border: 1px solid $uv-primary;
|
||||
color: $uv-primary;
|
||||
margin-left: 10px;
|
||||
border-radius: 50rpx;
|
||||
line-height: 1;
|
||||
padding: 4rpx 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.demo-price {
|
||||
font-size: 30rpx;
|
||||
color: $bg-color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.demo-shop {
|
||||
font-size: 32rpx;
|
||||
color: #cdad73;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 10px 0;
|
||||
|
||||
.demo-layout {
|
||||
text-align: center;
|
||||
background-color: #c6caca;
|
||||
border-radius: 20rpx;
|
||||
margin: 5px 0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: #eea13c;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="container">
|
||||
<view class="bg-white">
|
||||
<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
|
||||
</view>
|
||||
<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
|
||||
<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;">
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="flex-fill d-flex flex-column">
|
||||
<view class="font-size-sm text-color-assist">订单编号：{{ item.orderId }}</view>
|
||||
</view>
|
||||
<view class="font-size-lg text-color-primary">
|
||||
{{ item.statusText }}
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
<list-cell :hover="false" last>
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="flex ">
|
||||
<image :src="item.product.image" mode="aspectFill" class="image"></image>
|
||||
<view>
|
||||
<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
|
||||
{{ item.product.title }}
|
||||
</view>
|
||||
<view class="font-size-sm mt-2">×{{ item.product.number }} {{ item.product.score }}积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex justify-content-between align-items-center mt-3" >
|
||||
<view class="font-size-sm text-color-assist">
|
||||
{{formatDateTime(item.createTime) }}
|
||||
</view>
|
||||
<view class="d-flex font-size-sm text-color-base align-items-center">
|
||||
<view style="margin-right: 10rpx;">共{{item.number }}件商品，消耗积分</view>
|
||||
<view class="font-size-lg"> {{ item.totalScore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="d-flex align-items-center justify-content-end mt-3">
|
||||
<view>
|
||||
<button v-if="item.havePaid > 0 && item.haveDelivered == 1 && item.haveReceived == 0"
|
||||
class="left-margin" type="primary" plain size="mini"
|
||||
@tap.stop="receive(item)">确认收到货</button>
|
||||
<button class="left-margin" plain size="mini" @tap="detail(item.id)">订单详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
</view>
|
||||
<uv-empty v-if="orders.length == 0" mode="order"></uv-empty>
|
||||
</view>
|
||||
<uv-toast ref="uToast" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
scoreShopOrder,
|
||||
scoreShopReceive
|
||||
} from '@/api/score'
|
||||
const main = useMainStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { isLogin } = storeToRefs(main)
|
||||
const title = ref('我的积分订单')
|
||||
|
||||
const type = ref(-1)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const orders = ref([])
|
||||
const tabList = ref([{
|
||||
type: -1,
|
||||
name: '全部',
|
||||
}, {
|
||||
type: 0,
|
||||
name: '待发货',
|
||||
}, {
|
||||
type: 1,
|
||||
name: '待收货'
|
||||
}, {
|
||||
type: 2,
|
||||
name: '已完成'
|
||||
}]
|
||||
)
|
||||
onLoad(() => {
|
||||
if (!isLogin.value) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/login/login'
|
||||
})
|
||||
}
|
||||
getOrders(false)
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getOrders(false)
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
getOrders(false)
|
||||
})
|
||||
|
||||
// tab栏切换
|
||||
const change = (e) => {
|
||||
type.value = e.type
|
||||
getOrders(true)
|
||||
}
|
||||
|
||||
const getOrders = async(isRefresh = false) => {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
if (isRefresh) {
|
||||
orders.value = []
|
||||
page.value = 1
|
||||
}
|
||||
let data = await scoreShopOrder({
|
||||
page: page.value,
|
||||
pagesize: pageSize.value,
|
||||
type: type.value
|
||||
});
|
||||
if (data.length > 0) {
|
||||
orders.value = orders.value.concat(data)
|
||||
page.value += 1
|
||||
}
|
||||
uni.stopPullDownRefresh();
|
||||
uni.hideLoading()
|
||||
}
|
||||
const detail = (id) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/components/pages/scoreproduct/orderDetail?id=' + id
|
||||
})
|
||||
}
|
||||
// 确认收到货
|
||||
const receive = async(order) => {
|
||||
let data = await scoreShopReceive({
|
||||
id: order.id
|
||||
});
|
||||
if (data) {
|
||||
proxy.$refs.uToast.show({
|
||||
message: '已签收',
|
||||
type: 'success',
|
||||
})
|
||||
setTimeout(function() {
|
||||
getOrders(true)
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left-margin {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
:title="title"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
/>
|
||||
<!-- #endif -->
|
||||
<view class="container" style="padding:20rpx;">
|
||||
<view style="padding-bottom: 100rpx;">
|
||||
<view class="bg-white">
|
||||
<view class="section">
|
||||
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
|
||||
<view class="w-100 d-flex align-items-center mb-40">
|
||||
<view class="d-flex flex-column w-60 overflow-hidden">
|
||||
<image class="product-image" :src="order.product.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="d-flex flex-column w-60 overflow-hidden">
|
||||
<view class="font-size-lg text-color-base mb-10 text-truncate">{{ order.product.title }}</view>
|
||||
</view>
|
||||
<view class="d-flex w-40 align-items-center justify-content-between pl-30">
|
||||
<view class="font-size-base text-color-base">x{{ order.number }}</view>
|
||||
<view class="font-size-base text-color-base font-weight-bold">{{ order.score }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
<view class="section">
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
|
||||
<view class="pay-cell">
|
||||
<view>消耗积分</view>
|
||||
<view class="font-weight-bold">{{ order.totalScore }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
</view>
|
||||
<view class="section">
|
||||
<list-cell :hover="false" padding="50rpx 30rpx">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view>订单状态</view>
|
||||
<view class="font-weight-bold">{{ order.statusText }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view>下单时间</view>
|
||||
<view class="font-weight-bold">{{ formatDateTime(order.createTime) }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view>订单号</view>
|
||||
<view class="font-weight-bold">{{ order.orderId }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
|
||||
<list-cell :hover="false">
|
||||
<view class="w-100 d-flex align-items-center">
|
||||
<view class="pay-cell">
|
||||
<view>收货地址</view>
|
||||
</view>
|
||||
<view class="d-flex flex-column">
|
||||
<view class="w-100 d-flex align-items-center overflow-hidden">
|
||||
<view class="font-size-sm text-color-assist">{{ order.customerAddress + ' ' + order.customerName + ' ' + order.customerPhone }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
|
||||
<list-cell :hover="false" padding="50rpx 30rpx" v-if="order.expressCompany">
|
||||
<view class="w-100 d-flex flex-column">
|
||||
<view class="pay-cell">
|
||||
<view>快递公司</view>
|
||||
<view class="font-weight-bold">{{order.expressCompany }}</view>
|
||||
</view>
|
||||
<view class="pay-cell">
|
||||
<view>快递单号</view>
|
||||
<view class="font-weight-bold">{{order.expressNumber }}<text class="copy" @click="copy()">复制</text></view>
|
||||
<!-- <text class="copy" @click="copy()">复制</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</list-cell>
|
||||
|
||||
|
||||
<uv-steps current="0" direction="column" dot>
|
||||
<uv-steps-item :title="activity.acceptStation" :desc="activity.acceptTime" :key="index" v-for="(activity, index) in expresssn">
|
||||
</uv-steps-item>
|
||||
</uv-steps>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uv-toast ref="uToast" />
|
||||
</view>
|
||||
<view class="fixed-bottom flex justify-end bg-white p-2" v-if="order.havePaid > 0">
|
||||
<view class="mr-1" v-if="order.haveDelivered ==0 && order.haveReceived == 0"><uv-button type="success" :plain="true" size="small" text="确认收货" @click="receive(order)"></uv-button></view>
|
||||
<view class="mr-1"><uv-button type="error" :plain="true" size="small" text="查看物流" @click="getExpresssn()"></uv-button></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
|
||||
import { formatDateTime,kmUnit } from '@/utils/util'
|
||||
import {
|
||||
scoreShopOrderDetail,
|
||||
scoreShopReceive,
|
||||
getLogistic
|
||||
} from '@/api/score'
|
||||
const main = useMainStore()
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { isLogin } = storeToRefs(main)
|
||||
const title = ref('积分订详情')
|
||||
|
||||
const order = ref({
|
||||
product: {title:'',image:''}
|
||||
})
|
||||
const id = ref(0)
|
||||
const expresssn = ref([])
|
||||
|
||||
onLoad((option) => {
|
||||
id.value = option.id
|
||||
detail(option.id)
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
detail(id.value)
|
||||
})
|
||||
|
||||
const detail = async(id) =>{
|
||||
let data = await scoreShopOrderDetail({id:id});
|
||||
uni.stopPullDownRefresh();
|
||||
if (data) {
|
||||
order.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
const getExpresssn = async() => {
|
||||
if(order.value.haveDelivered == 0){
|
||||
proxy.$refs.uToast.show({
|
||||
message: '还未发货，暂无物流信息',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
let data = await getLogistic({shipperCode:order.value.expressSn,logisticCode:order.value.expressNumber});
|
||||
if (data.success == "false") {
|
||||
uni.showToast({
|
||||
title: res.reason,
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
expresssn.value = data.traces
|
||||
}
|
||||
|
||||
const copy = () => {
|
||||
uni.setClipboardData({
|
||||
data: order.value.expressNumber
|
||||
})
|
||||
}
|
||||
|
||||
// 确认收到货
|
||||
const receive = async(order) => {
|
||||
let data = await scoreShopReceive({
|
||||
id: order.id
|
||||
});
|
||||
if (data) {
|
||||
proxy.$refs.uToast.show({
|
||||
message: '已签收',
|
||||
type: 'success',
|
||||
})
|
||||
setTimeout(function() {
|
||||
detail(order.id)
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.copy {
|
||||
color: #1296db;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
@mixin arch {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $bg-color;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
bottom: -15rpx;
|
||||
z-index: 10;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.section {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
@include arch;
|
||||
left: -15rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include arch;
|
||||
right: -15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: $font-size-base;
|
||||
color: $text-color-base;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.invote-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
background-color: #ffffff;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120rpx;
|
||||
box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
z-index: 11;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 10rpx;
|
||||
flex: 1;
|
||||
flex-shrink: 0;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
border-radius: 50rem !important;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -72,10 +72,25 @@
|
||||
</view>
|
||||
<view class="qrcode_section" @tap="coupons">
|
||||
去领个券
|
||||
<view class="iconfont iconarrow-right"></view>
|
||||
<!-- <view class="iconfont iconarrow-right"></view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="integral_section" @tap="goScore">
|
||||
<view class="top">
|
||||
<text class="title">积分商城</text>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
进入积分商城兑换奈雪券及周边好礼
|
||||
<!-- <view class="iconfont iconarrow-right"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode_section" @tap="goScore">
|
||||
<image src="/static/images/jifen.png"></image>
|
||||
<text>逛一逛</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@@ -152,6 +167,7 @@ const goScore = () => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
Reference in new issue
Block a user