积分商城功能
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
|
"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": {
|
"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>
|
||||||
<view class="qrcode_section" @tap="coupons">
|
<view class="qrcode_section" @tap="coupons">
|
||||||
去领个券
|
去领个券
|
||||||
<view class="iconfont iconarrow-right"></view>
|
<!-- <view class="iconfont iconarrow-right"></view> -->
|
||||||
|
|
||||||
</view>
|
</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>
|
||||||
</view>
|
</view>
|
||||||
@@ -154,6 +169,7 @@ const goScore = () => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
// main.init()
|
// main.init()
|
||||||
handGetListAds()
|
handGetListAds()
|
||||||
|
|||||||
Reference in new issue
Block a user