iuu/cmgd-mini-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
建超
2026-01-05 12:47:14 +08:00
commit 1fc846fae3
1614 changed files with 162035 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
pages/cart/index.vue Normal file
View File

@@ -0,0 +1,342 @@
<template>
<nut-noticebar v-if="!audit" :text="cart_txt" :background="`rgba(251, 248, 220, 1)`"
:custom-color="`#D9500B`"></nut-noticebar>
<nut-noticebar v-else text="各位员工选定商品后统一给仓库管理员处理" :background="`rgba(251, 248, 220, 1)`"
:custom-color="`#D9500B`"></nut-noticebar>
<view class="content">
<view class="cart-goods-list">
<nut-empty v-if="goods_list.length === 0" description="你还没有添加商品哦">
<template #image>
<image src="@/static/empty.png" />
</template>
</nut-empty>
<nut-checkbox-group v-model="selectedGoodsIds">
<view class="cart-goods" v-for="(item, idx) in goods_list" :name="String(item.goods_id)" :key="idx">
<nut-checkbox :label="item.goods_id" />
<image class="goods-img" :src="item.goods_house.image[0]?.file_path" mode="scaleToFill"
@click="navigateTo('/pages/mall/item/index?id=' + item.goods_id)" />
<view class="middle" @click="navigateTo('/pages/mall/item/index?id=' + item.goods_id)">
<view class="middle-header">
<nut-tag custom-color="#1a1a1a">{{ item.goods_house?.degree?.degree_name }}</nut-tag>
<text class="title">{{ item.goods_house?.goods_name }}</text>
</view>
<nut-price :price="item.goods_house?.goods_price" :need-symbol="true" />
<view class="middle-footer" @click.stop>
<view class="countdown">
<nut-countdown :end-time="item.deadline_time * 1000"></nut-countdown>
<text class="t">自动移除购物车</text>
</view>
</view>
</view>
<view class="goods-del-btn" @click="confirmDel(item.goods_id)">
<nut-icon name="del2" size="24"></nut-icon>
</view>
</view>
</nut-checkbox-group>
</view>
</view>
<view class="fixed_footer" v-if="!audit">
<view>
<nut-checkbox v-model="toggle_all_val" @change="toggleAll()">全选</nut-checkbox>
</view>
<view style="display: flex; flex-direction: row; gap: 10px">
<view class="price">
<text v-if="selectedGoodsIds.length > 0">{{ selectedGoodsIds.length }}件&nbsp;</text>
<text>合计:</text>
<nut-price :price="total_price" size="large" :need-symbol="true" />
</view>
<nut-button type="primary" @click="submitOrder()">立即下单</nut-button>
</view>
</view>
<view class="fixed_footer" v-else>
<view>
<nut-checkbox v-model="toggle_all_val" @change="toggleAll()">全选</nut-checkbox>
</view>
<view style="display: flex; flex-direction: row; gap: 10px">
<view class="price">
<text v-if="selectedGoodsIds.length > 0">{{ selectedGoodsIds.length }}件&nbsp;</text>
<text>合计:</text>
<nut-price :price="total_price" size="large" :need-symbol="true" />
</view>
<nut-button type="primary" @click="submitOrderGL()">立即下单</nut-button>
</view>
</view>
</template>
<script setup>
import {
computed,
onMounted,
reactive,
ref
} from 'vue';
import {
onLoad,
onShow,
onHide
} from '@dcloudio/uni-app';
import {
fetchDelCart,
fetchCartList
} from '@/api/goods';
import {
fetchConfig
} from '@/api/index';
import {
navigateTo
} from '@/utils/helper';
const audit = ref(true);
const selectedGoodsIds = ref([]);
const goods_cart_ids = ref([]);
const cart_txt = ref('')
const goods_list = reactive([]);
const toggle_all_val = ref(false);
const confirmDel = id => {
uni.showModal({
content: '确定要删除吗？',
success(res) {
if (res.confirm) {
delGoodsCart(id);
}
},
});
};
const delGoodsCart = id => {
fetchDelCart(id).then(res => {
let tmp_goods_list = goods_list.filter(item => item.goods_id !== id);
goods_list.length = 0;
Object.assign(goods_list, tmp_goods_list);
uni.setTabBarBadge({
index: 1,
text: goods_list.length.toString()
})
});
};
const toggleAll = () => {
let goods_ids = goods_list.reduce((acc, item) => {
if ('goods_id' in item) {
acc.push(item.goods_id);
}
return acc;
}, []);
if (toggle_all_val.value === true) {
selectedGoodsIds.value = goods_ids;
} else {
selectedGoodsIds.value.length = 0;
}
};
const submitOrderGL = () =>{
uni.showToast({
title: '仓管已收到清单',
icon: 'none',
});
return;
}
const submitOrder = () => {
if (selectedGoodsIds.value.length === 0) {
uni.showToast({
title: '请选择商品',
icon: 'none',
});
return;
}
navigateTo('/pages/order/preview/index?ids=' + selectedGoodsIds.value + '&from=cart');
};
const init = () => {
console.log("手机购物车初始化");
// 加载配置
fetchConfig().then(res => {
audit.value = (res.audit === "true");
console.log('audit', audit.value);
console.log(res.cart_txt);
cart_txt.value = res.cart_txt
})
// 进来购物车就清空已经选择的
selectedGoodsIds.value = [];
toggle_all_val.value = false;
console.log("手机购物车选中商品ids", selectedGoodsIds.value);
goods_list.length = 0;
fetchCartList().then(res => {
Object.assign(goods_list, res.list);
uni.setTabBarBadge({
index: 1,
text: goods_list.length.toString()
})
});
};
onMounted(() => {
// 进入购物车就清空已经选择的
// selectedGoodsIds.value = [];
// toggle_all_val.value = false;
// console.log('1111', selectedGoodsIds.value);
init();
});
onShow(() => {
console.log("onshow");
init();
});
// 计算总价格
const total_price = computed(() => {
let total_price = 0;
console.log('goods_list', goods_list);
goods_list.forEach((item, idx) => {
if (selectedGoodsIds.value.includes(item.goods_id)) {
total_price = parseFloat(total_price) + parseFloat(item.goods_house.goods_price);
}
});
return total_price;
});
</script>
<style scoped lang="scss">
.content {
display: flex;
flex-direction: column;
/* align-items: center; */
// justify-content: center;
background-color: #f2f3f5;
padding: 20rpx;
// height: calc(100% - 140rpx);
}
.fixed_footer {
position: fixed;
bottom: 0;
left: 0;
height: 100rpx;
background: #fff;
width: calc(100% - 40rpx);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 10rpx 20rpx;
.price {
display: flex;
justify-content: center;
align-items: center;
}
}
.cart-goods-list {
background: #fff;
display: flex;
height: calc(100vh - 230rpx);
gap: 30rpx;
flex-direction: column;
border-radius: 10rpx;
--nut-checkbox-label-margin-left: 0rpx;
--nut-checkbox-margin-right: 0rpx;
overflow-y: auto;
// padding-bottom: 20rpx;
.cart-goods {
display: flex;
align-items: center;
gap: 30rpx;
width: calc(100% - 40rpx);
padding: 20rpx;
background: #fff;
margin-top: 20rpx;
.goods-img {
flex-shrink: 0;
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
}
.middle {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5rpx;
width: 100%;
.middle-header {
display: flex;
gap: 10rpx;
.title {
font-size: 30rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
}
.middle-footer {
display: flex;
flex-direction: row;
align-items: center;
gap: 20rpx;
.countdown {
display: flex;
align-items: center;
--nut-countdown-color: #000;
--nut-countdown-font-size: 26rpx;
.t {
color: #000;
font-size: 26rpx;
}
}
}
}
// 删除按钮
.goods-del-btn {
// width: 140rpx;
height: 100%;
color: #fa2c19;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.touch-dom {
width: 100rpx;
// height: 100rpx;
background: #f52222;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>

413
pages/config/goodsAdd.vue Normal file
View File

@@ -0,0 +1,413 @@
<template>
<view class="page-content">
<view style=" padding: 20rpx;">
<nut-form>
<nut-form-item label="名称">
<nut-input v-model="form.goods_name" class="nut-input-text" placeholder="请输入名称" type="text" />
</nut-form-item>
<nut-form-item label="串号">
<nut-input v-model="form.goods_no" class="nut-input-text" placeholder="请输入串号" type="text">
<template #right>
<nut-icon @click="onScan" name="scan2" size="30" custom-color="#000000" />
</template>
</nut-input>
</nut-form-item>
<nut-form-item label="售价">
<nut-input v-model="form.goods_price" class="nut-input-text" placeholder="请输入售价" type="nubmer" />
</nut-form-item>
<nut-form-item label="说明">
<nut-textarea v-model="form.content" autosize placeholder="请输入说明" type="text" />
</nut-form-item>
<nut-form-item label="介绍">
<nut-textarea v-model="form.details_content" autosize placeholder="请输入介绍" type="text" />
</nut-form-item>
<!-- <nut-form-item label="上架人">
<nut-input v-model="form.add_person" class="nut-input-text" placeholder="请输入上架人" type="text" />
</nut-form-item> -->
<!-- <nut-form-item label="排序">
<nut-input v-model="form.goods_sort" class="nut-input-text" placeholder="请输入排序" type="number" />
</nut-form-item> -->
<nut-form-item label="状态">
<nut-radio-group direction="horizontal" v-model="form.status">
<nut-radio label="10">下架</nut-radio>
<nut-radio label="20">上架</nut-radio>
</nut-radio-group>
</nut-form-item>
<nut-form-item>
<template v-slot:label>成色</template>
<template v-slot:default>
<view style="color: black;" @click="show_degree_popup = true">
<text>{{form.degree_name}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>机型</template>
<template v-slot:default>
<view style="color: black;" @click="show_product_cascader = true">
<text>{{form.type_name}},{{form.brand_name}},{{form.product_name}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>商品图片</template>
<template v-slot:default>
<shmily-drag-image v-model="form.images" :number=9 :add-image="addGoodsImg"
keyName="file_path"></shmily-drag-image></template>
</nut-form-item>
<!-- <nut-form-item>
<template v-slot:label>商品视频</template>
<template v-slot:default>
<nut-uploader :url="uploadVideoUrl" name="iFile" v-model:file-list="uploadVideoList"
:source-type="['album','camera']" :media-type="['video']" maximum="1" :multiple="false"
@success="onUploadSuccess" @fail="onUploadFail" @delete="onDeleteFile" :timeout="1000*60">
</nut-uploader>
</template>
</nut-form-item> -->
<view style="align-items: center;text-align: center; padding: 20rpx 60rpx;">
<nut-button type="primary" block @click="onSubmit">
新增商品
</nut-button>
</view>
</nut-form>
</view>
<nut-popup v-model:visible="show_degree_popup" position="bottom" safe-area-inset-bottom>
<nut-picker v-model="popup_degree_val" :columns="filter_params.degree_list"
:field-names="{text:'degree_name',value:'degree_id'}" title="选择成色" @confirm="onConfirmDegree"
@cancel="show_degree_popup = false">
</nut-picker>
</nut-popup>
<nut-cascader title="机型选择" v-model:visible="show_product_cascader" v-model="cascader_product_val"
@change="onProductChange" @pathChange="onProcutPathChange" text-key="label" value-key="value"
:title-ellipsis="false" children-key="children" :options="filter_params.drop_down_options"></nut-cascader>
</view>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
toValue
} from 'vue';
import {
fetchFilterParmas,
fetchGoodsAdd,
} from '@/api/goods';
import {
getUploadImageUrl,
} from '@/api/request';
// import {
// fetchControlAddGoods,
// } from '@/api/control';
// const uploadVideoUrl = ref('')
// uploadVideoUrl.value = getUploadVideoUrl()
// const uploadVideoOk = ref('https://qnxsd.19year.cn/wechat_2025-08-12_130250_716.png')
// const uploadVideoList = ref([])
// const videoUrl = ref('')
// const onUploadSuccess = (res) => {
// uploadVideoList.value[0].url = uploadVideoOk
// let respStr = res.data.data
// let resp = JSON.parse(respStr)
// if (resp.code === 1) {
// form.video_url = resp.data.url
// uni.showToast({
// title: '上传成功',
// icon: 'success'
// })
// } else {
// uni.showToast({
// title: '上传失败',
// icon: 'none'
// })
// }
// }
// const onDeleteFile = (files, fileList, index) => {
// uploadVideoList.value = []
// form.video_url = ""
// console.log('uploadVideoList3', uploadVideoList)
// console.log('form3', form)
// }
// const onUploadFail = (err) => {
// console.error('上传失败:', err)
// uni.showToast({
// title: '上传失败',
// icon: 'none'
// })
// }
// 扫码
const onScan = () => {
uni.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res);
form.goods_no = res.result
},
fail: () => {
uni.showToast({
icon: 'none',
title: '扫码失败'
})
}
})
}
const filter_params = reactive({})
// const report_tags = reactive([])
// const all_report_tag_ids = ref([])
// 默认展开
// const defaultExpandKeys = ref([0])
// 显示机型选择
const show_product_cascader = ref(false)
// 显示成色
const show_degree_popup = ref(false)
// const show_disk_popup = ref(false)
// 显示验机报告
// const show_report_tags_popup = ref(false)
const popup_degree_val = ref([])
const cascader_product_val = ref([])
// const popup_disk_val = ref(["未选择"])
const form = reactive({
// goods_id: 0,
goods_name: '',
goods_no: '',
goods_price: '',
goods_stock: '',
content: '',
details_content: '',
status: '10',
images: [],
add_person: '',
// disk: '未选择',
degree_id: 0,
degree_name: '未选择',
type_id: 0,
type_name: '未选择',
brand_id: 0,
brand_name: '未选择',
product_id: 0,
product_name: '未选择',
// video_url: ''
// goods_no: '',
// goods_status: '10',
// goods_sort: 0,
})
const onProductChange = (...args) => {
}
const onSubmit = () => {
console.log('form====>', form);
fetchGoodsAdd(form).then(res => {
uni.showToast({
icon: 'none',
title: '新增商品成功'
})
// setTimeout(() => {
// uni.switchTab({
// url: '/pages/mine/index'
// });
// }, 500)
setTimeout(() => {
// uni.switchTab({
// url: '/pages/mine/index'
// });
uni.navigateBack({
delta: 1 // 返回上一页
});
}, 500)
})
}
// 选择机型
const onProcutPathChange = (args) => {
console.log(args);
form.type_id = 0
form.type_name = ''
form.brand_id = 0
form.brand_name = ''
form.product_id = 0
form.product_name = ''
if (args.length >= 1 && args[0] !== null) {
form.type_id = args[0].value
form.type_name = args[0].text
}
if (args.length >= 2 && args[1] !== null) {
form.brand_id = args[1].value
form.brand_name = args[1].text
}
if (args.length >= 3 && args[2] !== null) {
form.product_id = args[2].value
form.product_name = args[2].text
}
}
// 选择成色
const onConfirmDegree = () => {
form.degree_id = popup_degree_val.value[0]
filter_params.degree_list.forEach(item => {
if (item.degree_id === form.degree_id) {
form.degree_name = item.degree_name
}
})
show_degree_popup.value = false
}
// const onConfirmDisk = () => {
// form.disk = popup_disk_val.value[0]
// console.log('form.disk', form.disk);
// console.log('popup_disk_val.value', popup_disk_val.value);
// // filter_params.disk_list.forEach(item => {
// // if (item.value === form.disk) {
// // form.disk = item.value
// // }
// // })
// show_disk_popup.value = false
// }
onMounted(() => {
fetchFilterParmas(1).then(res => {
Object.assign(filter_params, res)
filter_params.degree_list.unshift({
degree_id: 0,
degree_name: '未选择'
})
console.log('filter_params', filter_params)
// console.log('filter_params.disk_list', filter_params.disk_list)
// filter_params.disk_list.unshift({
// // id: 0,
// value: '未选择'
// })
})
})
// 上传商品图片
const addGoodsImg = () => {
uni.chooseImage({
count: 9 - (form.image?.length || 0),
sourceType: ['album', 'camera'],
success: res => {
res.tempFiles.forEach(file => {
uni.uploadFile({
url: getUploadImageUrl(),
filePath: file.path,
name: 'iFile',
formData: {
group_id: 1,
},
success: (res) => {
let data = JSON.parse(res.data).data
form.images.push({
id: parseInt(data.file_id),
file_path: data.file_path,
})
}
})
})
}
})
}
</script>
<style lang="scss" scoped>
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.list {
display: flex;
justify-content: center;
flex-direction: column;
background: #ffffff;
align-items: center;
max-height: 300rpx;
overflow-y: scroll;
padding: 10px;
.list-item {
border-bottom: 1px solid #eee;
padding: 20rpx 10rpx;
}
}
</style>

341
pages/config/goodsDetail.vue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<view class="content">
<nut-watermark v-if="detail.status?.value === 10" class="mark1" :z-index="1" content="此商品已下架"></nut-watermark>
<nut-watermark v-if="detail.status?.value === 30" class="mark1" :z-index="1" content="此商品已锁定"></nut-watermark>
<nut-watermark v-if="detail.status?.value === 40" class="mark1" :z-index="1" content="此商品已售出"></nut-watermark>
<swiper class="swiper" circular indicator-dots autoplay>
<swiper-item @click="showGoodsImages(idx)" v-for="(item,idx) in detail.image" :key="idx">
<image :src="item.file_path" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class='goods_info'>
<nut-cell-group>
<view class="price">
<text class="unit">￥</text>
<text class="value">{{detail.goods_price}}</text>
</view>
</nut-cell-group>
<nut-cell-group>
<view class="name">
<view class="top">
<view class="tag">
<text>{{detail.degree?.degree_name}}</text>
</view>
<text class="title">{{detail.goods_name}}</text>
</view>
<view>
<text class="info">{{detail.content}}</text>
</view>
</view>
</nut-cell-group>
<view class="service">
<view class="info">
<text class="title">服务</text>
<text class="value">{{serviceTxt}}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
reactive,
ref
} from 'vue';
import {
navigateTo,
switchTab,
goToLoginPage
} from '@/utils/helper';
import {
onShareAppMessage,
onShareTimeline,
onLoad
} from '@dcloudio/uni-app'
import {
fetchGoodsDetail,
} from '@/api/goods';
import {
fetchGetConfig,
} from '@/api/config';
// 审核模式 默认开启 true
// const audit = ref(true);
const serviceTxt = ref('')
const id = ref(0)
const detail = reactive({})
onLoad(options => {
console.log('init');
// 获取配置
getConfig()
// 获取商品详情
id.value = options.id
fetchGoodsDetail(id.value).then(res => {
Object.assign(detail, res)
})
})
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
// audit.value = res.appConfig.is_audit == 1
serviceTxt.value = res.appConfig.service_txt
})
}
// 分享给朋友圈
onShareTimeline((res) => {
return {
title: detail.goods_name,
path: '/pages/mall/detail?id=' + detail.goods_id,
imageUrl: detail.image[0].file_path
};
})
// 分享
onShareAppMessage((res) => {
return {
title: detail.goods_name,
path: '/pages/mall/detail?id=' + detail.goods_id,
imageUrl: detail.image[0].file_path
}
})
// 显示图片
const showGoodsImages = (index) => {
uni.previewImage({
current: index, // 指定当前显示的图片索引
urls: detail.image.map(e => {
return e.file_path
}),
});
}
</script>
<style scoped lang="scss">
.bottom-action {
position: fixed;
bottom: 0;
left: 0;
height: 50px;
background: #fff;
width: calc(100% - 20px);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 5px 10px;
.bottom-action-icon {
align-items: center;
display: flex;
justify-content: center;
.bottom-action-icon-item {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text {
color: rgba(0, 0, 0, .5);
font-size: 11px;
}
}
}
.bottom-action-btn {
-ms-flex-align: center;
-ms-flex-pack: end;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 5px;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
}
.content {
display: flex;
flex-direction: column;
min-height: calc(100vh - 50px); //100vh;
/* align-items: center; */
// justify-content: center;
background-color: #f2f3f5;
// height: calc(100% - 50px);
--nut-cell-group-title-color: #000;
--nut-collapse-item-padding: 10px 10px 10px 10px;
--nut-collapse-wrapper-content-padding: 10px 10px 10px 10px;
--nut-collapse-item-color: #000;
padding-bottom: 50px;
}
.report-inner {
display: flex;
flex-direction: column;
gap: 5px;
.report-item {
.report-item-name {
color: rgba(0, 0, 0, .9);
font-weight: 700;
}
.report-item-content {
display: flex;
flex-wrap: wrap;
.report-item-content-item {
padding-top: 2px;
padding-bottom: 2px;
width: 50%;
display: flex;
align-items: center;
}
}
}
}
.count-item {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
}
.swiper {
width: 100%;
height: 414px;
image {
width: 100%;
height: 100%;
}
}
.goods_info {
padding: 5px;
color: #000;
.price {
border-radius: 5px;
padding: 10px;
background: #fff;
.unit {
font-size: 12px;
}
.value {
font-size: 24px;
}
}
.name {
border-radius: 5px;
padding: 10px;
background: #fff;
display: flex;
gap: 5px;
flex-direction: column;
.top {
display: flex;
gap: 5px;
.tag {
background: #000;
padding: 1px 2px;
justify-content: center;
align-items: center;
display: flex;
border-radius: 2px;
text {
font-size: 10px;
color: #fff;
}
}
.title {
font-size: 16px;
}
}
.info {
color: rgba(0, 0, 0, .7);
font-size: 13px;
}
}
.service {
border-radius: 5px;
padding: 10px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
.title {
font-size: 16px;
}
.value {
color: rgba(0, 0, 0, .7);
font-size: 13px;
}
}
.right_icon {
background-color: currentColor;
mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiMxQTFBMUEiIGQ9Ik0zNTMuODMgMTU4LjE3YTQyLjY3IDQyLjY3IDAgMSAxIDYwLjM0LTYwLjM0bDM4NCAzODRhNDIuNjcgNDIuNjcgMCAwIDEgMCA2MC4zNmwtMzg0IDM4NGE0Mi42NyA0Mi42NyAwIDEgMS02MC4zNC02MC4zNkw3MDcuNjcgNTEyeiIvPjwvc3ZnPg==') 0 0/100% 100% no-repeat;
width: 12px;
height: 12px;
}
}
.report {
border-radius: 5px;
padding: 1px;
background: #fff;
}
}
</style>

339
pages/config/goodsEdit.vue Normal file
View File

@@ -0,0 +1,339 @@
<template>
<view class="page-content">
<view v-if="is_show_edit" style=" padding: 20rpx;">
<nut-form>
<nut-form-item label="名称">
<nut-input v-model="form.goods_name" class="nut-input-text" placeholder="请输入名称" type="text" />
</nut-form-item>
<nut-form-item label="串号">
<nut-input v-model="form.goods_no" class="nut-input-text" placeholder="请输入串号" type="text">
<template #right>
<nut-icon @click="onScan" name="scan2" size="30" custom-color="#000000" />
</template>
</nut-input>
</nut-form-item>
<nut-form-item label="售价">
<nut-input v-model="form.goods_price" class="nut-input-text" placeholder="请输入售价" type="nubmer" />
</nut-form-item>
<nut-form-item label="说明">
<nut-textarea v-model="form.content" autosize placeholder="请输入说明" type="text" />
</nut-form-item>
<nut-form-item label="介绍">
<nut-textarea v-model="form.details_content" autosize placeholder="请输入介绍" type="text" />
</nut-form-item>
<!-- <nut-form-item label="上架人">
<nut-input v-model="form.add_person" class="nut-input-text" placeholder="请输入上架人" type="text" />
</nut-form-item> -->
<!-- <nut-form-item label="排序">
<nut-input v-model="form.goods_sort" class="nut-input-text" placeholder="请输入排序" type="number" />
</nut-form-item> -->
<nut-form-item label="状态">
<nut-radio-group direction="horizontal" v-model="form.status">
<nut-radio label="10">下架</nut-radio>
<nut-radio label="20">上架</nut-radio>
</nut-radio-group>
</nut-form-item>
<nut-form-item>
<template v-slot:label>成色</template>
<template v-slot:default>
<view style="color: black;" @click="show_degree_popup = true">
<text>{{form.degree_name}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>机型</template>
<template v-slot:default>
<view style="color: black;" @click="show_product_cascader = true">
<text>{{form.type_name}},{{form.brand_name}},{{form.product_name}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>商品图片</template>
<template v-slot:default>
<shmily-drag-image v-model="form.images" :number=9 :add-image="addGoodsImg"
keyName="file_path"></shmily-drag-image></template>
</nut-form-item>
<view style="align-items: center;text-align: center; padding: 20rpx 60rpx;">
<nut-button type="primary" block @click="onSubmit">
保存修改
</nut-button>
</view>
</nut-form>
</view>
<nut-popup v-model:visible="show_degree_popup" position="bottom" safe-area-inset-bottom>
<nut-picker v-model="popup_degree_val" :columns="filter_params.degree_list"
:field-names="{text:'degree_name',value:'degree_id'}" title="选择成色" @confirm="onConfirmDegree"
@cancel="show_degree_popup = false">
</nut-picker>
</nut-popup>
<nut-cascader title="机型选择" v-model:visible="show_product_cascader" v-model="cascader_product_val"
@change="onProductChange" @pathChange="onProcutPathChange" text-key="label" value-key="value"
:title-ellipsis="false" children-key="children" :options="filter_params.drop_down_options"></nut-cascader>
</view>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
toValue,
computed
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app'
import {
fetchFilterParmas,
fetchGoodsEdit,
fetchGoodsDetail,
} from '@/api/goods';
import {
getUploadImageUrl,
} from '@/api/request';
const id = ref(0)
// 是否显示结果页
const is_show_edit = ref(false);
// 显示机型选择
const show_product_cascader = ref(false)
// 显示成色
const show_degree_popup = ref(false)
const popup_degree_val = ref([])
const cascader_product_val = ref([])
const filter_params = reactive({})
const form = reactive({
goods_id: 0,
goods_name: '',
goods_no: '',
goods_price: '',
goods_stock: '',
content: '',
details_content: '',
status: '10',
images: [],
add_person: '',
degree_id: 0,
degree_name: '未选择',
type_id: 0,
type_name: '未选择',
brand_id: 0,
brand_name: '未选择',
product_id: 0,
product_name: '未选择',
})
//
onMounted(() => {
fetchFilterParmas(1).then(res => {
Object.assign(filter_params, res)
filter_params.degree_list.unshift({
degree_id: 0,
degree_name: '未选择'
})
console.log('filter_params', filter_params)
})
})
onLoad(options => {
console.log("goods_id===>", options.id);
// 获取商品详情
id.value = options.id
is_show_edit.value = false;
fetchGoodsDetail(id.value).then(res => {
is_show_edit.value = true;
console.log("====>", res);
form.goods_id = res.goods_id
form.goods_name = res.goods_name
form.goods_no = res.goods_no
form.goods_price = res.goods_price
// form.goods_stock = res.goods_stock
form.content = res.content
form.details_content = res.details_content
form.status = res.status.value.toString()
form.degree_id = res.degree?.degree_id ?? 0
form.degree_name = res.degree?.degree_name ?? '未选择'
form.type_id = res.type?.type_id ?? 0
form.type_name = res.type?.name ?? '未选择'
form.brand_id = res.brand?.brand_id ?? 0
form.brand_name = res.brand?.name ?? '未选择'
form.product_id = res.product?.product_id ?? 0
form.product_name = res.product?.name ?? '未选择'
popup_degree_val.value = [res.degree?.degree_id ?? 0]
cascader_product_val.value = [res.type?.type_id ?? 0, res.brand?.brand_id ?? 0, res.product
?.product_id ?? 0
]
form.images = []
res.image?.forEach(item => {
form.images.push({
id: item.image_id,
file_path: item.file_path,
})
})
})
})
const onProductChange = (...args) => {
console.log(0, ...args)
console.log(cascader_product_val)
}
const onSubmit = () => {
console.log('form===>', form);
fetchGoodsEdit(form).then(res => {
uni.showToast({
icon: 'none',
title: '编辑商品成功'
})
setTimeout(() => {
uni.navigateBack({
delta: 1 // 返回上一页
});
}, 500)
})
}
// 扫码
const onScan = () => {
uni.scanCode({
onlyFromCamera: true,
success: (res) => {
console.log(res);
form.goods_no = res.result
},
fail: () => {
uni.showToast({
icon: 'none',
title: '扫码失败'
})
}
})
}
const onProcutPathChange = (args) => {
console.log(args);
form.type_id = 0
form.type_name = ''
form.brand_id = 0
form.brand_name = ''
form.product_id = 0
form.product_name = ''
if (args.length >= 1 && args[0] !== null) {
form.type_id = args[0].value
form.type_name = args[0].text
}
if (args.length >= 2 && args[1] !== null) {
form.brand_id = args[1].value
form.brand_name = args[1].text
}
if (args.length >= 3 && args[2] !== null) {
form.product_id = args[2].value
form.product_name = args[2].text
}
}
const onConfirmDegree = () => {
form.degree_id = popup_degree_val.value[0]
filter_params.degree_list.forEach(item => {
if (item.degree_id === form.degree_id) {
form.degree_name = item.degree_name
}
})
show_degree_popup.value = false
}
// 上传商品图片
const addGoodsImg = () => {
uni.chooseImage({
count: 9 - (form.image?.length || 0),
sourceType: ['album', 'camera'],
success: res => {
res.tempFiles.forEach(file => {
uni.uploadFile({
url: getUploadImageUrl(),
filePath: file.path,
name: 'iFile',
formData: {
group_id: 1,
},
success: (res) => {
let data = JSON.parse(res.data).data
form.images.push({
id: parseInt(data.file_id),
file_path: data.file_path,
})
}
})
})
}
})
}
</script>
<style lang="scss" scoped>
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
--nut-searchbar-input-height: 40px;
}
// .list {
// display: flex;
// justify-content: center;
// flex-direction: column;
// background: #ffffff;
// align-items: center;
// max-height: 300rpx;
// overflow-y: scroll;
// padding: 10px;
// .list-item {
// border-bottom: 1px solid #eee;
// padding: 20rpx 10rpx;
// }
// }
</style>

793
pages/config/goodsList.vue Normal file
View File

@@ -0,0 +1,793 @@
<template>
<view class="page-content">
<z-paging ref="paging" :refresher-enabled="false" :auto-clean-list-when-reload="false"
:auto-scroll-to-top-when-reload="false" v-model="dataList" @query="queryList">
<view style="z-index: 10000;position: sticky;" :style="'top:0px'">
<view class="top-bar">
<nut-button type="primary" block plain @click="navigateTo('/pages/config/goodsAdd')">
新增商品
</nut-button>
</view>
<nut-searchbar placeholder="请输入商品名称" clearable v-model="state.search_val" input-background="#eee"
@search="onSearch" @clear="onClear">
<template #rightout>
<nut-button type="primary" @click="onSearch">搜索</nut-button>
</template>
</nut-searchbar>
<nut-menu title-class="titleClass">
<!-- 价格排序 -->
<nut-menu-item :title="state.price_sort_name" ref="selectPriceSortRef">
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
<view class="degree-inner">
<view class="degree-item" :class="{active: state.price_sort === item.value}"
v-for="(item,idx) in state.price_sort_params" :key="idx"
@click="selectPriceSort(item)">
<text>{{item.text}}</text>
</view>
</view>
</view>
</nut-menu-item>
<!-- 价格排序 -->
<!-- 机型选择 -->
<nut-menu-item :title="state.product_name" ref="selectProductRef">
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 0px;">
<view class="filter-types">
<view class="filter-type-inner" v-for="(type,idx) in state.type_params" :key="idx"
@click="selectType(type)" :class="{active: state.type_id == type.type_id}">
<text>{{type.name}}</text>
</view>
</view>
<view class="tabs-container">
<scroll-view :show-scrollbar="false" scroll-y class="tabs-inner" enable-flex>
<view class="tab-inner"
v-for="(item,idx) in state?.drop_down_options[state.type_id]?.children"
:key="idx" @click="selectBrand(item)"
:class="{'tab-inner-active':item.value == state.brand_id}">
<view class="line"></view>
<text>{{item.label}}</text>
</view>
</scroll-view>
<scroll-view scroll-y class="tab-pane-inner" enable-flex>
<view style="display: flex;flex-direction: column;width: 100%;padding: 10rpx;">
<view class="degree-inner">
<view class="degree-item" v-for="(item,idx) in productOptions" :key="idx"
:class="{active: state.product_ids.includes(item.value)}"
@click="selectProduct(item)">
<text>{{item.label}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="product-btns">
<view class="reset">
<nut-button plain @click="onResetProduct()" type="default">重置</nut-button>
</view>
<view class="confirm">
<nut-button block @click="onConfirmProduct()" type="primary">确认</nut-button>
</view>
</view>
</view>
</nut-menu-item>
<!-- 机型选择 -->
<!-- 成色选择 -->
<nut-menu-item :title="state.degree_name" ref="selectDegreeRef">
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
<view class="degree-inner">
<view class="degree-item" :class="{active: state.degree_ids.includes(item.value)}"
v-for="(item,idx) in state.degree_params" :key="idx" @click="selectDegree(item)">
<text>{{item.text}}</text>
</view>
</view>
<view class="degree-btns">
<view class="reset">
<nut-button plain @click="onResetDegree()" type="default">重置</nut-button>
</view>
<view class="confirm">
<nut-button block @click="onConfirmDegree()" type="primary">确认</nut-button>
</view>
</view>
</view>
</nut-menu-item>
<!-- 成色选择 -->
</nut-menu>
</view>
<view class="goods-item" v-for="(item, index) in dataList" :key="index">
<view class="goods-item-image">
<!-- @click="showGoodsImages(item)" -->
<image class="goods-item-image-img" :src="getImg(item)" @click="navigateTo('/pages/config/goodsDetail?id=' + item.goods_id)"
mode="scaleToFill">
</image>
</view>
<view class="goods-item-content">
<!-- @click="navigateTo('/pages/control/goods/edit?id=' + item.goods_id)" -->
<view class="goods-item-content-header">
<nut-tag custom-color="#1a1a1a">{{ item.degree.degree_name }}</nut-tag>
<view>{{item.goods_name}}</view>
</view>
<!-- @click="navigateTo('/pages/control/goods/edit?id=' + item.goods_id)" -->
<view class="goods-item-content-body">
<view class="goods-item-content-body-desc">
{{item.content}}
</view>
</view>
<view class="goods-item-content-footer">
<view style="font-size: 24rpx;color: red;">
<text>¥{{item.goods_price}}</text>
</view>
<view style="font-size: 24rpx;">
状态:<text>{{item.status.text}}</text>
</view>
<view class="goods-item-content-footer-btn">
<nut-button size="small" type="primary"
v-if="item.status.value == 10 || item.status.value == 20"
@click="navigateTo('/pages/config/goodsEdit?id=' + item.goods_id)">
编辑商品
</nut-button>
<nut-button size="small" type="primary" v-if="item.status.value == 40 "
@click="navigateTo('/pages/config/goodsEdit?id=' + item.goods_id)">
售后(重新上架)
</nut-button>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue'
import {
onLoad,
onShow,
} from '@dcloudio/uni-app'
// import {
// fetchFilterParmas
// } from '@/api/goods';
import {
fetchFilterParmas,
fetchSysGoodsList
} from '@/api/goods';
import {
navigateTo,
// switchTab,
// goToOtherMiniProgram
} from '@/utils/helper';
// 显示商品图片
const showGoodsImages = (goods) => {
console.log(goods);
uni.previewImage({
// current: index, // 指定当前显示的图片索引
urls: goods?.image.map(e => {
return e.file_path
}),
});
}
const getImg = (goods) => {
const url = goods?.image?.[0]?.file_path
return url ? url + '?imageView2/1/w/200/h/200' : ''
}
// zp
const paging = ref(null);
// 商品列表
const dataList = ref([]);
// 价格排序
const selectPriceSortRef = ref(null);
// 成色选择
const selectDegreeRef = ref(null);
// 机型选择
const selectProductRef = ref(null)
const state = reactive({
type_params: [], // 产品类型
drop_down_options: [], // 产品类型下的品牌列表
o_drop_down_options: [],
// 价格排序
price_sort_params: [{
text: '默认排序',
value: ''
},
{
text: '价格升序',
value: 'ascend'
},
{
text: '价格降序',
value: 'descend'
}
],
// 成色所有选项
degree_params: [],
price_sort: '',
price_sort_name: "默认排序",
degree_ids: [],
degree_name: "成色",
product_name: "机型",
type_id: 1, // 产品类型id 默认 1 手机
type_name: '手机',
brand_id: 0, // 品牌id // 默认 0 全部
brand_name: '全部',
product_ids: [0], // 机型ids 默认 0 全部
search_val: '', // 搜索
});
// 搜索
const onSearch = () => {
console.log("搜索：", state.search_val);
paging.value.reload();
}
// 清空搜索框
const onClear = () => {
console.log("搜索：", state.search_val);
paging.value.reload();
}
// 机型重置
const onResetProduct = () => {
console.log("重置产品");
state.type_id = 1
state.type_name = '手机'
state.brand_id = 0
state.brand_name = '全部'
state.product_ids = [0]
state.product_name = '机型'
}
// 机型确定
const onConfirmProduct = () => {
console.log("当前产品类型", {
"type_id": state.type_id,
"type_name": state.type_name,
"brand_id": state.brand_id,
"brand_name": state.brand_name,
"product_ids": state.product_ids,
});
selectProductRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
}
// 选择机型
const selectProduct = (product) => {
if (product.value === 0) {
state.product_ids = [0]
} else {
state.product_ids = state.product_ids.filter(e => e != 0)
// 判断是否存在
const index = state.product_ids.indexOf(product.value);
if (index > -1) {
state.product_ids.splice(index, 1); // 存在则删除
if (state.product_ids.length === 0) {
state.product_ids = [0]
}
} else {
state.product_ids.push(product.value); // 新增
}
}
console.log(product);
}
const productOptions = computed(() => {
return state?.o_drop_down_options[state.type_id]?.children[state.brand_id].children
})
// 选择品牌
const selectBrand = (brand) => {
console.log(brand);
// 选中的品牌id
state.brand_id = brand.value;
state.brand_name = brand.label
// 品牌下的产品ids
state.product_ids = [0];
state.product_name = brand.label
}
// 选择type
const selectType = (type) => {
console.log(type);
// 选中产品类型id
state.type_id = type.type_id;
state.type_name = type.name;
// 选中的品牌id
state.brand_id = 0;
state.brand_name = '全部';
// 品牌下的产品ids
state.product_ids = [0];
}
// 选择价格排序
const selectPriceSort = (item) => {
if (state.price_sort !== item.value) {
state.price_sort = item.value
state.price_sort_name = item.text
} else {
state.price_sort_name = '默认排序'
state.price_sort = ''
}
selectPriceSortRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
};
// 选择成色
const selectDegree = (item) => {
const index = state.degree_ids.indexOf(item.value);
if (index > -1) {
state.degree_ids.splice(index, 1);
} else {
state.degree_ids.push(item.value);
}
if (state.degree_ids.length > 0) {
state.degree_name = '已选' + state.degree_ids.length.toString() + '项'
} else {
state.degree_name = '成色'
}
}
// 重置选择成色
const onResetDegree = () => {
state.degree_ids = [];
state.degree_name = '成色'
selectDegreeRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
}
// 确认选择成色
const onConfirmDegree = () => {
if (state.degree_ids.length > 0) {
state.degree_name = '已选' + state.degree_ids.length.toString() + '项'
} else {
state.degree_name = '成色'
}
selectDegreeRef.value?.toggle(false);
// 4. 刷新数据
paging.value.reload();
}
// 获取列表
const queryList = (pageNo, pageSize) => {
const params = {
pageSize,
page: pageNo,
price_sort: state.price_sort,
degree_ids: state.degree_ids,
type_id: state.type_id,
brand_id: state.brand_id,
product_ids: state.product_ids,
search: state.search_val,
}
console.log(params);
fetchSysGoodsList(params).then(res => {
console.log('res=>', res.list);
paging.value.complete(res.list);
}).catch(res => {
paging.value.complete(false);
});
};
const init = () => {
console.log('init111');
// 加载默认筛选项内容
fetchFilterParmas().then(res => {
console.log(res);
// 处理成色
let degree_params = res.degree_list;
state.degree_params = degree_params.reduce((it, cit) => {
it.push({
text: cit.degree_name,
value: cit.degree_id
});
return it;
}, state.degree_params) || [];
// 产品类型
state.type_params = res.type_list
// 产品下品牌列表
state.drop_down_options = res.drop_down_options
state.o_drop_down_options = res.o_drop_down_options
})
}
onShow(() => {
console.log("onshow---");
console.log('paging.value', paging.value);
if (paging.value) {
// paging.value.pageNo = 1;
paging.value.refresh();
// paging.value.refreshToPage(1)
// paging.value.reload();
}
});
onMounted(() => {
init();
})
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
--nut-menu-bar-box-shadow: none;
--nut-menu-item-content-padding: 20rpx;
--nut-menu-item-content-max-height: 900rpx;
// --nut-searchbar-input-padding:5px 0 5px 13px;
--nut-searchbar-input-height: 40px;
}
:deep(.titleClass) .nut-menu__title-text {
font-size: 30rpx;
font-weight: bold;
color: black;
}
.top-bar {
background: #fff;
// padding: 20rpx;
align-items: center;
text-align: center;
padding: 20rpx 60rpx;
// display: flex;
// justify-content: space-between;
// border-top: 1px solid #eee;
// position: sticky;
// bottom: 0;
// z-index: 999;
}
.goods-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
background-color: #ffffff;
// border-radius: 20rpx;
margin-bottom: 20rpx;
gap: 20rpx;
.goods-item-image {
width: 180rpx;
height: 180rpx;
.goods-item-image-img {
width: 100%;
height: 100%;
}
}
.goods-item-content {
// width: 100%;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
/* 首尾贴边，中间均分 */
// gap: 15px;
.goods-item-content-header {
display: flex;
align-items: center;
padding: 6rpx 0;
gap: 20rpx;
}
.goods-item-content-body {
padding: 6rpx 0;
.goods-item-content-body-desc {
color: #7c7c7c;
font-size: 26rpx;
/* 关键属性 */
display: -webkit-box;
/* 使用弹性盒子布局 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
-webkit-line-clamp: 2;
/* 限制显示两行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出时显示省略号 */
}
}
.goods-item-content-stock {
display: flex;
justify-content: space-between;
.goods-item-content-stock-desc {
font-size: 26rpx;
color: #999999;
}
.goods-item-content-status-desc {
font-size: 26rpx;
color: red;
}
}
.goods-item-content-footer {
padding: 6rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
// width: 100%;
// flex-direction: row;
.goods-item-content-footer-btn {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10rpx;
.share-btn {
border-radius: 50rpx;
border: 2rpx solid red;
font-size: 26rpx;
align-items: center;
height: 54rpx;
color: red;
display: flex;
justify-content: center;
}
}
}
}
}
.filter-types {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
overflow: auto;
gap: 10rpx;
padding: 10rpx;
// position: fixed;
// top: 0;
height: 60rpx;
// z-index: 9999;
background-color: #fff;
border-bottom: 2rpx solid gainsboro;
border-top: 2rpx solid gainsboro;
.filter-type-inner {
align-items: center;
background-color: rgba(0, 0, 0, .05);
border-radius: 16rpx;
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex: 0 0 auto;
font-size: 28rpx;
gap: 15rpx;
padding: 10rpx 20rpx;
// image {
// height: 22px;
// width: 22px;
// }
}
.filter-type-inner.active {
background-color: rgba(250, 44, 25, .1);
color: var(--nutui-color-primary);
}
}
.tabs-container {
display: flex;
.tab-pane-inner {
height: 600rpx;
}
.tabs-inner {
overflow-y: scroll;
height: 600rpx;
width: 160rpx;
background-color: #F5F5F5;
.tab-inner {
display: flex;
height: 60rpx;
padding: 10rpx;
font-size: 28rpx;
display: flex;
align-items: center;
background: #F5F5F5;
text {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
}
.tab-inner-active {
// background: #FFF;
background-color: rgba(250, 44, 25, .1);
color: var(--nutui-color-primary);
}
}
}
.degree-inner {
display: flex;
flex: 1;
flex-wrap: wrap;
// gap: 20rpx;
gap: 10rpx;
// padding: 11px;
width: 100%;
margin-bottom: 60rpx;
}
.degree-item {
align-items: center;
background-color: rgba(0, 0, 0, .05);
border-radius: 10rpx;
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
font-size: 26rpx;
gap: 10rpx;
justify-content: center;
min-height: 80rpx;
width: calc(50% - 10rpx);
}
.degree-item.active {
background-color: rgba(250, 44, 25, .1);
color: var(--nutui-color-primary);
}
.product-btns {
display: flex;
width: 100%;
padding: 20rpx 0;
// border-bottom: 2rpx solid gainsboro;
// border-top: 2rpx solid gainsboro;
.reset {
flex: 1;
}
.confirm {
flex: 2;
}
}
.degree-btns {
display: flex;
width: 100%;
.reset {
flex: 1;
/* 重置按钮占 1 份 */
}
.confirm {
flex: 2;
/* 确认按钮占 2 份 */
}
}
.main-nav-container {
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 20rpx;
}
.nav-button {
display: flex;
align-items: center;
width: 45%;
height: 160rpx;
border-radius: 20rpx;
overflow: hidden;
padding: 0 10rpx;
}
.phone-button {
background: linear-gradient(135deg, #6a5ae0, #8d7bfb);
color: white;
}
.parts-button {
background: linear-gradient(135deg, #ff6b6b, #ee5253);
color: white;
}
.nav-button-bg {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
opacity: 0.2;
object-fit: cover;
}
.nav-button-icon {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
// border-radius: 20rpx;
z-index: 2;
}
.nav-button-content {
z-index: 2;
display: flex;
flex-direction: column;
}
.nav-button-title {
font-size: 34rpx;
font-weight: bold;
margin-bottom: 8rpx;
}
.nav-button-desc {
font-size: 24rpx;
opacity: 0.85;
}
</style>

1238
pages/config/price.vue Normal file
View File

File diff suppressed because it is too large Load Diff

188
pages/config/shopOrder/detail.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<view class="page-content">
<nut-steps :current="detail.progress">
<nut-step title="待付款">1</nut-step>
<nut-step title="待发货">2</nut-step>
<nut-step title="待收货">3</nut-step>
<nut-step title="已完成">4</nut-step>
</nut-steps>
<nut-cell-group>
<nut-cell>
<view class="address-inner" v-if="detail.address_info">
<text>{{detail.address_info.user_name}} - {{detail.address_info.tel_number}}</text>
<text>{{detail.address_info.province_name + detail.address_info.city_name + detail.address_info.county_name + detail.address_info.street_name + detail.address_info.detail_info_new}}</text>
</view>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell v-for="(goods,index) in detail.goods" :key="index" center
@click="navigateTo('/pages/mall/detail?id=' + goods.goods_id)">
<template #title>
<view class="goods-info-row">
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
</view>
<text class="goods-no">串号：{{goods.goods_no}}</text>
</view>
</view>
</template>
<template #link>
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
</template>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell>
<view class="total-price-inner">
<text>商品总额</text>
<nut-price :price="detail.pay_price" size="normal" :need-symbol="true" />
</view>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell title="订单编号" :desc="detail.order_no" />
<nut-cell title="下单时间" :desc="detail.create_time" />
</nut-cell-group>
<nut-cell-group v-if="detail.progress >= 3">
<nut-cell title="物流公司" :desc="detail.express_company" />
<nut-cell title="物流单号" :desc="detail.express_no" />
</nut-cell-group>
<!-- <view v-if="detail.progress === 1 && !audit" class="wechat-img-inner">
<nut-button type="primary" block @click="showPayImgs()">
点我付款
</nut-button>
</view> -->
</view>
</template>
<script setup>
import {
reactive,
ref
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
fetchOrderDetail
} from '@/api/order';
import {
navigateTo,
} from '@/utils/helper';
import {
fetchGetConfig
} from '@/api/config';
// 审核模式 默认开启 true
const audit = ref(true);
// 订单ID
const id = ref(0)
// 订单详情
const detail = reactive({})
// 支付码
const images = ref([]);
onLoad((options) => {
id.value = options.id
})
/**
* 页面显示生命周期钩子
* 每次页面显示时都会执行
*/
onShow(() => {
// 获取配置
getConfig()
// 获取订单详情
fetchOrderDetail(id.value).then(res => {
Object.assign(detail, res)
})
})
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
console.log(res.appConfig.pay_imgs);
let pay_imgs = JSON.parse(res.appConfig.pay_imgs) || [];
let wechat_imgs = JSON.parse(res.appConfig.wechat_imgs) || [];
let pay_imgs_arr = pay_imgs.map(item => item.file_path) || [];
let wechat_imgs_arr = wechat_imgs.map(item => item.file_path) || [];
const merged_imgs_arr = pay_imgs_arr.concat(wechat_imgs_arr);
images.value = merged_imgs_arr;
})
}
// // 显示支付码
// const showPayImgs = () => {
// if (images.value.length === 0) {
// uni.showToast({
// title: '暂无图片',
// icon: 'none'
// });
// return;
// }
// console.log('preview images:', images);
// uni.previewImage({
// urls: images.value
// });
// }
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
padding: 20rpx;
}
.address-inner {
display: flex;
flex-direction: column;
justify-content: center;
}
.total-price-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
// flex-direction: row;
view:nth-child(2) {
color: #fa2c19;
}
}
.wechat-img-inner {
margin-top: 60rpx;
padding: 0rpx 80rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
// gap: 5px;
}
</style>

634
pages/config/shopOrder/index.vue Normal file
View File

@@ -0,0 +1,634 @@
<template>
<view class="page-content">
<nut-dialog title="取消订单" content="确认取消吗?此操作不可恢复!" v-model:visible="visibleCancelOrderDialog"
@cancel="visibleCancelOrderDialog = false" @ok="onClickCancelOrder" />
<nut-dialog title="标记付款" content="确认标记吗?此操作不可恢复!" v-model:visible="visiblePayOrderDialog"
@cancel="visiblePayOrderDialog = false" @ok="onClickPayOrder" />
<nut-sticky>
<nut-searchbar placeholder="请输入商品串号" clearable v-model="search_val" input-background="#eee"
@search="onSearch" @clear="onClear">
<template #rightout>
<nut-button size="small" type="primary" @click="onSearch">搜索</nut-button>
</template>
</nut-searchbar>
<nut-tabs v-model="current_tab_idx" background="#fff">
<template #titles>
<div class="title-list">
<view v-for="(item,idx) in tabs_config" :key="idx" class="title-item"
:class="{ 'tabs-active': idx === current_tab_idx }" @click="onChangeTab(item,idx)">
<view class="nut-tabs__titles-item__text">
{{item.title}}
</view>
<view class="item__line" />
</view>
</div>
</template>
</nut-tabs>
</nut-sticky>
<z-paging ref="paging" :fixed="false" style="height: 88vh;" class="order-list" v-model="dataList"
@query="apiFetchOrderList">
<view class="order-inner" v-for="(order,index) in dataList" :key="index">
<view class="order-inner-header">
<text>{{order.create_time}}</text>
<nut-tag custom-color="#1a1a1a">{{getStatusText(order)}}</nut-tag>
<!-- <text>{{order.order_no}}</text> -->
</view>
<view class="goods-info-row" v-for="(goods,iidx) in order.goods" :key="iidx"
@click="navigateToDetail(order.order_id)">
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
</view>
<text class="goods-no">串号：{{goods.goods_no}}</text>
</view>
<view class="price">
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
</view>
</view>
<view class="footer">
<view class="order-inner-price">
总计:<nut-price :price="order.total_price" size="normal" :need-symbol="true" />
</view>
<view class="order-inner-action" v-if="order.order_status.value === 10">
<view style="margin-left:10rpx;">
<!-- v-if="order.pay_status.value === 10 " -->
<nut-button plain size="small" v-if="order.delivery_status.value !== 20 "
@click="visibleCancelOrderDialog = true;current_cancel_order_id=order.order_id;">
取消订单
</nut-button>
</view>
<view style="margin-left:10rpx;">
<nut-button type="primary" size="small"
@click="visiblePayOrderDialog = true;current_pay_order_id=order.order_id;"
v-if="order.pay_status.value === 10 && !audit">
标记付款
</nut-button>
</view>
<view style="margin-left:10rpx;">
<nut-button type="primary" size="small" @click="onClickDeliveryOrder(order)"
v-if="order.pay_status.value === 20 && order.delivery_status.value === 10">
去发货
</nut-button>
</view>
</view>
</view>
</view>
</z-paging>
<!-- 弹出 -->
<nut-popup :custom-style="{ height: '65%' }" v-model:visible="openDeliveryPopup" position="bottom"
safe-area-inset-bottom @close="onCloseDeliveryPopup">
<view>
<view class="order-popup">
<nut-cell-group>
<nut-cell>
<view class="address-inner" v-if="orderDetail.address_info">
<text>
{{orderDetail.address_info.user_name}} -
{{orderDetail.address_info.tel_number}}
</text>
<text>
{{orderDetail.address_info.province_name +
orderDetail.address_info.city_name +
orderDetail.address_info.county_name +
orderDetail.address_info.street_name +
orderDetail.address_info.detail_info_new}}
</text>
</view>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell v-for="(goods,index) in orderDetail.goods" :key="index" center>
<template #title>
<view class="goods-info-row">
<view class="left-text">
<view class="goods-name">
<nut-tag
custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
</view>
<text class="goods-no">串号：{{goods.goods_no}}</text>
</view>
</view>
</template>
<template #link>
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
</template>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell>
<view class="total-price-inner">
<text>商品总额</text>
<nut-price :price="orderDetail.pay_price" size="normal" :need-symbol="true" />
</view>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell title="订单编号" :desc="orderDetail.order_no" />
<nut-cell title="下单时间" :desc="orderDetail.create_time" />
</nut-cell-group>
<nut-form>
<nut-form-item label="物流公司名称">
<nut-input v-model="form.express_company" class="nut-input-text" placeholder="请输入物流公司"
type="text" />
</nut-form-item>
<nut-form-item label="物流单号">
<nut-input v-model="form.express_no" class="nut-input-text" placeholder="请输入物流单号"
type="text" />
</nut-form-item>
</nut-form>
</view>
<view class="wechat-img-inner">
<nut-button type="primary" block @click="deliveryOrder">
确定发货
</nut-button>
</view>
</view>
</nut-popup>
</view>
</template>
<script setup>
import {
onMounted,
reactive,
ref
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
navigateTo,
} from '@/utils/helper';
import {
fetchDeliveryOrder,
fetchPayOrder,
fetchCancelOrder,
fetchOrderList,
fetchReceiptOrder
} from '@/api/order';
import {
fetchGetConfig
} from '@/api/config';
// 审核模式 默认开启 true
const audit = ref(true);
// 支付码
const images = ref([]);
// 展示发货弹窗
const openDeliveryPopup = ref(false)
// 发货订单
const orderDetail = reactive({})
const form = reactive({
order_id: 0,
express_company: '',
express_no: '',
})
// 发货
const deliveryOrder = () => {
form.order_id = orderDetail.order_id
console.log('form===>', form);
fetchDeliveryOrder(form).then(res => {
uni.showToast({
icon: 'none',
title: '发货成功'
})
onCloseDeliveryPopup()
paging.value.reload();
})
}
// 打开发货弹窗
const onClickDeliveryOrder = (order) => {
console.log(order);
Object.assign(orderDetail, order)
openDeliveryPopup.value = true
}
// 关闭发货弹窗
const onCloseDeliveryPopup = () => {
// 重置 发货订单
Object.assign(orderDetail, {})
Object.assign(form, {
order_id: 0,
express_company: '',
express_no: '',
})
openDeliveryPopup.value = false
console.log("关闭");
};
// 默认tab
const current_tab_idx = ref(0);
// 订单列表数据
const dataList = ref([]);
// zp
const paging = ref(null);
// 定义tab切换
const tabs_config = [{
title: '全部',
status: 'all'
},
{
title: '待付款',
status: 'payment'
},
{
title: '待发货',
status: 'delivery'
},
{
title: '待收货',
status: 'received'
},
{
title: '已完成',
status: 'finish'
}
]
// 取消订单弹窗
const visibleCancelOrderDialog = ref(false);
// 被取消订单id
const current_cancel_order_id = ref(0);
// 订单付款弹窗
const visiblePayOrderDialog = ref(false);
// 付款订单id
const current_pay_order_id = ref(0);
// 搜索内容
const search_val = ref('')
// tab切换
const onChangeTab = (item, idx) => {
current_tab_idx.value = idx
paging.value.reload();
}
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
console.log(res.appConfig.pay_imgs);
let pay_imgs = JSON.parse(res.appConfig.pay_imgs) || [];
let wechat_imgs = JSON.parse(res.appConfig.wechat_imgs) || [];
let pay_imgs_arr = pay_imgs.map(item => item.file_path) || [];
let wechat_imgs_arr = wechat_imgs.map(item => item.file_path) || [];
const merged_imgs_arr = pay_imgs_arr.concat(wechat_imgs_arr);
images.value = merged_imgs_arr;
})
}
// 显示支付码
const showPayImgs = () => {
if (images.value.length === 0) {
uni.showToast({
title: '暂无图片',
icon: 'none'
});
return;
}
console.log('preview images:', images);
uni.previewImage({
urls: images.value
});
}
// 跳转详情页面
const navigateToDetail = (id) => {
console.log(id);
if (!id) {
console.warn('导航ID不能为空')
return
}
uni.navigateTo({
url: `/pages/config/shopOrder/detail?id=${encodeURIComponent(id)}`
})
}
// 取消订单
const onClickCancelOrder = () => {
fetchCancelOrder(current_cancel_order_id.value).then(res => {
uni.showToast({
title: '取消成功',
icon: 'none'
})
paging.value.reload();
})
}
// 标记付款
const onClickPayOrder = () => {
fetchPayOrder(current_pay_order_id.value).then(res => {
uni.showToast({
title: '标记付款成功',
icon: 'none'
})
paging.value.reload();
})
}
// 获取订单列表
const apiFetchOrderList = (pageNo = 1, pageSize = 10) => {
console.log(tabs_config[current_tab_idx.value]['status']);
const params = {
page: pageNo,
pageSize: 10,
status: tabs_config[current_tab_idx.value]['status'],
goods_no: search_val.value,
}
fetchOrderList(params).then(res => {
console.log(res);
paging.value.complete(res.list);
}).catch(res => {
paging.value.complete(false);
})
}
onLoad((options) => {
current_tab_idx.value = parseInt(options.tab)
})
/**
* 页面显示生命周期钩子
* 每次页面显示时都会执行
*/
onShow(() => {
// 获取配置
getConfig()
if (paging.value) {
// paging.value.pageNo = 1;
paging.value.refresh();
// paging.value.refreshToPage(1)
// paging.value.reload();
}
})
// 搜索
const onSearch = () => {
console.log("搜索：", search_val.value);
paging.value.reload();
}
// 清空搜索框
const onClear = () => {
console.log("搜索：", search_val.value);
paging.value.reload();
}
// 订单状态
const getStatusText = (order) => {
if (order.order_status.value == 20) {
return order.order_status.text
} else if (order.order_status.value == 30) {
return order.order_status.text
} else if (order.order_status.value == 10) {
if (order.pay_status.value == 10) {
return order.pay_status.text
} else if (order.pay_status.value == 20) {
if (order.delivery_status.value == 10) {
return order.delivery_status.text
} else if (order.delivery_status.value == 20) {
return order.receipt_status.text
}
}
}
}
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.order-popup {
.address-inner {
display: flex;
flex-direction: column;
justify-content: center;
}
.total-price-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
// flex-direction: row;
view:nth-child(2) {
color: #fa2c19;
}
}
}
.wechat-img-inner {
margin-top: 60rpx;
padding: 0rpx 80rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
// gap: 5px;
}
.order-list {
display: flex;
flex-direction: column;
width: 100%;
}
.order-inner {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 15rpx;
overflow: hidden;
margin: 20rpx;
.order-inner-header {
display: flex;
align-items: center;
background-color: #dcdcdc;
color: rgba(0, 0, 0, .5);
font-size: 24rpx;
justify-content: space-between;
line-height: 45rpx;
padding: 15rpx 20rpx;
}
/* 信息行布局 */
.goods-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
border-bottom: 2rpx solid #f2f3f5;
/* 左侧文字样式 */
.left-text {
flex: 1;
}
.goods-name {
font-size: 30rpx;
color: #000000;
display: block;
margin-bottom: 8rpx;
}
.goods-no {
font-size: 26rpx;
color: #000000;
display: block;
}
/* 右侧价格样式 */
.price {
margin-left: 20rpx;
align-self: center;
/* 垂直居中在两行文字之间 */
}
}
.footer {
display: flex;
flex-direction: column;
.order-inner-price {
display: flex;
justify-content: flex-end;
padding-top: 10rpx;
padding-right: 20rpx;
padding-bottom: 20rpx;
font-size: 24rpx;
align-items: center;
}
.order-inner-action {
display: flex;
padding-top: 10rpx;
padding-bottom: 30rpx;
align-items: center;
justify-content: flex-end;
}
}
}
.title-list {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
.title-item {
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
}
.tabs-active {
font-weight: bold;
color: $tabs-titles-item-active-color;
opacity: $tabs-titles-item-line-opacity;
transition: width 0.3s ease;
.item__line {
position: absolute;
bottom: -10%;
left: 50%;
overflow: hidden;
content: ' ';
border-radius: $tabs-titles-item-line-border-radius;
opacity: $tabs-titles-item-line-opacity;
transition: width 0.3s ease;
transform: translate(-50%, 0);
width: $tabs-horizontal-titles-item-active-line-width;
height: 3px;
content: ' ';
background: $tabs-horizontal-tab-line-color;
}
}
}
</style>

318
pages/config/store.vue Normal file
View File

@@ -0,0 +1,318 @@
<template>
<view class="page-content">
<view style=" padding: 20rpx;">
<nut-cell-group>
<nut-cell v-if="!form.address_info?.address_id" title="收货地址" is-link @click="chooseAddress"></nut-cell>
<nut-cell v-else :title="form.address_info.user_name + ' ' + form.address_info.tel_number" is-link
:sub-title="
form.address_info.province_name +
form.address_info.city_name +
form.address_info.county_name +
form.address_info.street_name +
form.address_info.detail_info_new
" @click="chooseAddress"></nut-cell>
</nut-cell-group>
<view class="wechat-img-inner">
<nut-button type="primary" block @click="saveAddress()">
保存收货地址
</nut-button>
</view>
<nut-form>
<nut-form-item label="商城名称">
<nut-input v-model="form.shop_name" class="nut-input-text" placeholder="请输入店铺名称" type="text" />
</nut-form-item>
<nut-form-item label="商城介绍">
<nut-textarea v-model="form.shop_desc" autosize placeholder="请输入店铺介绍" type="text" />
</nut-form-item>
<nut-form-item label="手机号码">
<nut-input v-model="form.shop_phone" class="nut-input-text" placeholder="请输入手机号码" type="text" />
</nut-form-item>
<nut-form-item label="首页公告">
<nut-textarea v-model="form.bulletin_txt" autosize placeholder="请输入首页公告" type="text" />
</nut-form-item>
<nut-form-item label="服务描述">
<nut-textarea v-model="form.service_txt" autosize placeholder="请输入服务描述" type="text" />
</nut-form-item>
<nut-form-item label="是否审核模式">
<nut-switch v-model="isAudit" @change="onIsAuditChange" />
<!-- <nut-switch v-model:modelValue="isAudit" @change="onIsAuditChange" /> -->
</nut-form-item>
<nut-form-item v-if="isBucket">
<template v-slot:label>收款二维码</template>
<template v-slot:default>
<shmily-drag-image v-model="form.pay_imgs" :number=9 :add-image="addPayImg"
keyName="file_path"></shmily-drag-image></template>
</nut-form-item>
<nut-form-item v-if="isBucket">
<template v-slot:label>微信二维码</template>
<template v-slot:default>
<shmily-drag-image v-model="form.wechat_imgs" :number=9 :add-image="addWechatImg"
keyName="file_path"></shmily-drag-image></template>
</nut-form-item>
<view style="align-items: center;text-align: center; padding: 20rpx 80rpx;">
<nut-button type="primary" block @click="onSubmit">
保存配置
</nut-button>
</view>
</nut-form>
</view>
</view>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
toValue
} from 'vue';
import {
fetchGetConfig,
fetchSetConfig,
} from '@/api/config';
import {
getUploadImageUrl
} from '@/api/request';
import {
houseFetchUpdateAddress
} from '@/api/house_order';
const isBucket = ref(false);
// 是否开启审核模式
const isAudit = ref(false)
const form = reactive({
shop_name: '',
shop_desc: '',
shop_phone: '',
is_audit: 0,
bulletin_txt: '',
service_txt: '',
pay_imgs: [],
wechat_imgs: [],
address_info: {}
})
// 是否开启整仓调价
const onIsAuditChange = (val) => {
form.is_audit = Number(isAudit.value)
console.log(form);
}
const chooseAddress = () => {
uni.chooseAddress({
success(res) {
console.log(res);
form.address_info = {
address_id: res.addressID || 1,
user_name: res.userName,
tel_number: res.telNumber,
city_name: res.cityName || '',
county_name: res.countyName || '',
detail_info: res.detailInfo || '',
detail_info_new: res.detailInfoNew || '',
national_code: res.nationalCode || '',
national_code_full: res.nationalCodeFull || '',
postal_code: res.postalCode || '',
province_name: res.provinceName || '',
street_name: res.streetName || '',
}
},
});
};
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('res=====>', res)
form.shop_name = res.appConfig.shop_name
form.shop_desc = res.appConfig.shop_desc
form.shop_phone = res.appConfig.shop_phone
form.bulletin_txt = res.appConfig.bulletin_txt
form.service_txt = res.appConfig.service_txt
form.address_info = res.appConfig.address_info
form.is_audit = res.appConfig.is_audit
isAudit.value = res.appConfig.is_audit == 1
if (res.appConfig.bucket) {
isBucket.value = true
}
let pay_imgs = JSON.parse(res.appConfig.pay_imgs)
let wechat_imgs = JSON.parse(res.appConfig.wechat_imgs)
pay_imgs.forEach(item => {
form.pay_imgs.push({
id: item.image_id,
file_path: item.file_path,
})
})
wechat_imgs.forEach(item => {
form.wechat_imgs.push({
id: item.image_id,
file_path: item.file_path,
})
})
console.log('form=====>', form)
})
}
const onSubmit = () => {
fetchSetConfig(form).then(res => {
uni.showToast({
icon: 'none',
title: '更新商城配置成功'
})
setTimeout(() => {
uni.redirectTo({
url: '/pages/config/store',
success: res => {},
fail: () => {},
complete: () => {}
});
}, 500)
})
}
// 保存收货地址
const saveAddress = () => {
houseFetchUpdateAddress({
address: form.address_info,
}).then(res => {
uni.showToast({
icon: 'none',
title: '保存收货地址成功'
})
setTimeout(() => {
uni.redirectTo({
url: '/pages/config/store',
success: res => {},
fail: () => {},
complete: () => {}
});
}, 500)
})
}
onMounted(() => {
getConfig()
})
// 上传支付图片
const addPayImg = () => {
uni.chooseImage({
count: 9 - (form.pay_imgs.length || 0),
sourceType: ['album', 'camera'],
success: res => {
res.tempFiles.forEach(file => {
uni.uploadFile({
url: getUploadImageUrl(),
filePath: file.path,
name: 'iFile',
formData: {
group_id: 1,
},
success: (res) => {
let data = JSON.parse(res.data).data
form.pay_imgs.push({
id: parseInt(data.file_id),
file_path: data.file_path,
})
}
})
})
}
})
}
// 上传微信图片
const addWechatImg = () => {
uni.chooseImage({
count: 9 - (form.wechat_imgs.length || 0),
sourceType: ['album', 'camera'],
success: res => {
res.tempFiles.forEach(file => {
uni.uploadFile({
url: getUploadImageUrl(),
filePath: file.path,
name: 'iFile',
formData: {
group_id: 1,
},
success: (res) => {
let data = JSON.parse(res.data).data
form.wechat_imgs.push({
id: parseInt(data.file_id),
file_path: data.file_path,
})
}
})
})
}
})
}
</script>
<style lang="scss" scoped>
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.wechat-img-inner {
// margin-top: 60rpx;
padding: 0rpx 80rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
// gap: 5px;
}
.list {
display: flex;
justify-content: center;
flex-direction: column;
background: #ffffff;
align-items: center;
max-height: 300rpx;
overflow-y: scroll;
padding: 10px;
.list-item {
border-bottom: 1px solid #eee;
padding: 20rpx 10rpx;
}
}
</style>

429
pages/control/goods/index.vue- Normal file
View File

@@ -0,0 +1,429 @@
<template>
<view class="page-content">
<nut-searchbar shape="square" placeholder="请输入商品串号" clearable v-model="search_val" input-background="#eee" @search="onSearch"
@clear="onClear">
<template #rightout>
<nut-icon @click="onScan" name="scan2" size="30" custom-color="#000000" />
</template>
</nut-searchbar>
<view v-if="goods_ids_with_goods_no_list.length > 0" class="list">
<view @click="getGoodsDetail(item.goods_id)" class="list-item" :key="idx"
v-for="(item,idx) in goods_ids_with_goods_no_list">
{{ item.goods_no }}
</view>
</view>
<view v-if="is_show_detail" style=" padding: 20rpx;">
<nut-form>
<nut-form-item label="名称">
<nut-input v-model="form.goods_name" class="nut-input-text" placeholder="请输入名称" type="text" />
</nut-form-item>
<nut-form-item label="价格">
<nut-input v-model="form.goods_price" class="nut-input-text" placeholder="请输入价格" type="nubmer" />
</nut-form-item>
<nut-form-item label="串号">
<nut-input v-model="form.goods_no" class="nut-input-text" placeholder="请输入串号" type="text" readonly disabled/>
</nut-form-item>
<nut-form-item label="介绍">
<nut-textarea v-model="form.content" autosize placeholder="请输入介绍" type="text" />
</nut-form-item>
<!-- <nut-form-item label="上架人">
<nut-input v-model="form.add_person" class="nut-input-text" placeholder="请输入上架人" type="text" />
</nut-form-item> -->
<!-- <nut-form-item label="排序">
<nut-input v-model="form.goods_sort" class="nut-input-text" placeholder="请输入排序" type="number" />
</nut-form-item> -->
<!-- <nut-form-item label="状态">
<nut-radio-group direction="horizontal" v-model="form.goods_status">
<nut-radio label="10">上架</nut-radio>
<nut-radio label="20">下架</nut-radio>
</nut-radio-group>
</nut-form-item> -->
<nut-form-item>
<template v-slot:label>成色</template>
<template v-slot:default>
<view style="color: black;" @click="show_degree_popup = true">
<text>{{form.degree_name}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>机型</template>
<template v-slot:default>
<view style="color: black;" @click="show_product_cascader = true">
<text>{{form.type_name}},{{form.brand_name}},{{form.product_name}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>商品图片</template>
<template v-slot:default>
<shmily-drag-image v-model="form.images" :number=9 :add-image="addGoodsImg"
keyName="file_path"></shmily-drag-image></template>
</nut-form-item>
<nut-form-item>
<template v-slot:label>验机报告</template>
<template v-slot:default>
<view @click="show_report_tags_popup = true">
<text>点击勾选</text>
</view>
</template>
</nut-form-item>
<view style="align-items: center;text-align: center; padding: 20rpx 0rpx;">
<nut-button type="primary" @click="onSubmit">
保存修改
</nut-button>
</view>
</nut-form>
</view>
<nut-popup :custom-style="{ height: '50%' }" v-model:visible="show_report_tags_popup" position="bottom"
safe-area-inset-bottom>
<view style="margin-left: 200rpx; margin-top: 30rpx;">
<!-- <DaTree ref="DaTreeRef" :data="report_tags" childrenField="value_list" labelField="name" valueField="id"
defaultExpandAll showCheckbox @change="handleTreeChange">
</DaTree> -->
<DaTree ref="DaTreeRef" :data="report_tags" childrenField="value_list" labelField="name" valueField="id"
:defaultExpandedKeys="defaultExpandKeys" showCheckbox @change="handleTreeChange">
</DaTree>
</view>
</nut-popup>
<nut-popup v-model:visible="show_degree_popup" position="bottom" safe-area-inset-bottom>
<nut-picker v-model="popup_degree_val" :columns="filter_params.degree_list"
:field-names="{text:'degree_name',value:'degree_id'}" title="选择成色" @confirm="onConfirmDegree"
@cancel="show_degree_popup = false">
</nut-picker>
</nut-popup>
<nut-cascader title="机型选择" v-model:visible="show_product_cascader" v-model="cascader_product_val"
@change="onProductChange" @pathChange="onProcutPathChange" text-key="label" value-key="value"
:title-ellipsis="false" children-key="children" :options="filter_params.drop_down_options"></nut-cascader>
</view>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
toValue
} from 'vue';
import {
fetchGoodsDetail,
fetchGoodsList,
fetchFilterParmas,
fetchGoodsReportTags,
} from '../../../api/goods';
import {
getUploadImageUrl
} from '../../../api/request';
import {
DaTree
} from '@/components/da-tree/index.vue'
import {
fetchControlEditGoods,
fetchControlGoodsDetail,
fetchGoodsListByGoodsNo,
} from '../../../api/control';
import {
clearReactiveData
} from '../../../utils/helper';
// 是否显示结果页
const is_show_detail = ref(false);
// 搜索内容
const search_val = ref('')
// 商品详情
const detail = reactive({})
const filter_params = reactive({})
const report_tags = reactive([])
const all_report_tag_ids = ref([])
// 默认展开
const defaultExpandKeys = ref([0])
// 显示机型选择
const show_product_cascader = ref(false)
// 显示成色
const show_degree_popup = ref(false)
// 显示验机报告
const show_report_tags_popup = ref(false)
const popup_degree_val = ref([])
const cascader_product_val = ref([])
const DaTreeRef = ref()
// 搜索串号列表
const goods_ids_with_goods_no_list = ref([])
// 搜索
const onSearch = () => {
goods_ids_with_goods_no_list.value = [];
is_show_detail.value = false;
fetchGoodsListByGoodsNo(search_val.value).then(res => {
goods_ids_with_goods_no_list.value = res || []
})
}
// 清空搜索内容
const onClear = () => {
search_val.value = ''
is_show_detail.value = false;
goods_ids_with_goods_no_list.value = []
}
const form = reactive({
goods_name: '',
goods_id: 0,
content: '',
goods_price: '',
goods_no: '',
images: [],
// add_person: '',
// goods_status: '10',
// goods_sort: 0,
degree_id: 0,
degree_name: '未选择',
type_id: 0,
type_name: '未选择',
brand_id: 0,
brand_name: '未选择',
product_id: 0,
product_name: '未选择',
report_tag_ids: []
})
// 获取商品详情
const getGoodsDetail = (id) => {
fetchControlGoodsDetail(id).then(res => {
// 显示商品详情
is_show_detail.value = true;
Object.assign(detail, res)
goods_ids_with_goods_no_list.value = []
form.goods_name = res.goods_name
form.goods_id = res.goods_id
form.content = res.content
form.goods_price = res.goods_price
form.goods_no = res.goods_no
// form.add_person = res.add_person
// form.goods_status = res.goods_status.value.toString()
// form.goods_sort = res.goods_sort
form.degree_id = res.degree?.degree_id ?? 0
form.degree_name = res.degree?.degree_name ?? '未选择'
form.type_id = res.type?.type_id ?? 0
form.type_name = res.type?.name ?? '未选择'
form.brand_id = res.brand?.brand_id ?? 0
form.brand_name = res.brand?.name ?? '未选择'
form.product_id = res.product?.product_id ?? 0
form.product_name = res.product?.name ?? '未选择'
form.images = []
DaTreeRef.value?.setCheckedKeys(all_report_tag_ids.value, false)
let tag_ids = (res.report_tag_ids?.split(',') || []).map(Number)
form.report_tag_ids = tag_ids
DaTreeRef.value?.setCheckedKeys(tag_ids, true)
popup_degree_val.value = [res.degree?.degree_id ?? 0]
cascader_product_val.value = [res.type?.type_id ?? 0, res.brand?.brand_id ?? 0, res.product?.product_id??0]
res.image?.forEach(item => {
form.images.push({
id: item.image_id,
file_path: item.file_path,
})
})
})
}
const onProductChange = (...args) => {
// console.log(0,...args)
// console.log(cascader_product_val)
}
const handleTreeChange = (allSelectedKeys, currentItem) => {
form.report_tag_ids = allSelectedKeys
// console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
}
const onSubmit = () => {
fetchControlEditGoods(form).then(res => {
uni.showToast({
icon: 'none',
title: '成功'
})
setTimeout(() => {
uni.redirectTo({
url: '/pages/control/goods/index',
success: res => {},
fail: () => {},
complete: () => {}
});
}, 500)
})
}
const onProcutPathChange = (args) => {
console.log(args);
form.type_id = 0
form.type_name = ''
form.brand_id = 0
form.brand_name = ''
form.product_id = 0
form.product_name = ''
if (args.length >= 1 && args[0] !== null) {
form.type_id = args[0].value
form.type_name = args[0].text
}
if (args.length >= 2 && args[1] !== null) {
form.brand_id = args[1].value
form.brand_name = args[1].text
}
if (args.length >= 3 && args[2] !== null) {
form.product_id = args[2].value
form.product_name = args[2].text
}
}
const onConfirmDegree = () => {
form.degree_id = popup_degree_val.value[0]
filter_params.degree_list.forEach(item => {
if (item.degree_id === form.degree_id) {
form.degree_name = item.degree_name
}
})
show_degree_popup.value = false
}
// 扫码
const onScan = () => {
uni.scanCode({
onlyFromCamera: true,
success: (res) => {
form.goods_no = res.result
search_val.value = res.result
fetchGoodsListByGoodsNo(res.result).then(res => {
if (res.length >= 1) {
getGoodsDetail(res[0]?.goods_id)
}
})
},
fail: () => {
uni.showToast({
icon: 'none',
title: '扫码失败'
})
}
})
}
onMounted(() => {
fetchFilterParmas(1).then(res => {
Object.assign(filter_params, res)
filter_params.degree_list.unshift({
degree_id: 0,
degree_name: '未选择'
})
console.log(filter_params)
})
fetchGoodsReportTags().then(res => {
Object.assign(report_tags, res)
console.log('report_tags',report_tags);
all_report_tag_ids.value = []
report_tags.forEach((report_tag, i) => {
all_report_tag_ids.value.push(report_tag.id)
console.log(report_tag.value_list)
report_tag.value_list.forEach((val, ii) => {
all_report_tag_ids.value.push(val.id)
val.value_list.forEach((vv, iii) => {
all_report_tag_ids.value.push(vv.id)
})
})
})
console.log(all_report_tag_ids)
})
})
// 上传商品图片
const addGoodsImg = () => {
uni.chooseImage({
count: 9 - (detail.image?.length || 0),
sourceType: ['album', 'camera'],
success: res => {
res.tempFiles.forEach(file => {
uni.uploadFile({
url: getUploadImageUrl(),
filePath: file.path,
name: 'iFile',
formData: {
group_id: 1,
},
success: (res) => {
let data = JSON.parse(res.data).data
form.images.push({
id: parseInt(data.file_id),
file_path: data.file_path,
})
}
})
})
}
})
}
</script>
<style lang="scss" scoped>
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.list {
display: flex;
justify-content: center;
flex-direction: column;
background: #ffffff;
align-items: center;
max-height: 300rpx;
overflow-y: scroll;
padding: 10px;
.list-item {
border-bottom: 1px solid #eee;
padding: 20rpx 10rpx;
}
}
</style>

283
pages/index/index - 副本.vue Normal file
View File

@@ -0,0 +1,283 @@
<template>
<page-meta :page-style="'overflow:'+(is_lock_scroll?'hidden':'visible')"></page-meta>
<IndexCustomNavigationbar :statusBarHeight="statusBarHeight" :windowWidth="windowWidth"
:navbarHeight="navbarHeight" :onIndexPageSearch="onIndexPageSearch" :onIndexPageClear="onIndexPageClear"/>
<view class="content">
<view class="index-content-inner"></view>
<view class="index-class-card-box">
<view class="index-class-card-body">
<view class="navbar-list-content">
<view v-for="(item,idx) in nav_list" :key="idx" class="navbar-item-content"
@click="navigateTo('/pages/mall/index/index?brand_id='+item.brand_id + '&type_id=' + item.type_id)">
<image class="navbar-item-content-img" :src='item.image?.file_path'></image>
<view class="navbar-item-content-name">{{item.name}}</view>
</view>
</view>
</view>
</view>
<view class="index-kefu-card-box">
<view class="index-kefu-card-header">
<text class="index-kefu-card-header-title">远阳数码售后</text>
<text class="index-kefu-card-header-text">7天内有质量问题可退可换</text>
<text class="index-kefu-card-header-text">30天内有质量问题只换不修</text>
</view>
<view class="index-kefu-card-body">
<view class="index-kefu-item">
<view class="index-kefu-item-profile">
<image class="index-kefu-item-profile-avatar" @click="showWechatImg()" src="/static/wechat.jpg"
alt="陈汉彬" />
<view class="index-kefu-item-profile-info">
<view class="index-kefu-item-profile-info-name-phone">
<text class="index-kefu-item-profile-info-name-phone-name">陈一鸣</text>
<text class="index-kefu-item-profile-info-name-phone-phone">13156107870</text>
</view>
<view class="index-kefu-item-profile-info-address">山东省济南市天桥区凤凰广场B座803室</view>
</view>
</view>
</view>
<view class="index-kefu-item">
<view class="index-kefu-item-profile">
<image class="index-kefu-item-profile-avatar" @click="showWechatImg()" src="/static/wechat.jpg"
alt="陈汉阳" />
<view class="index-kefu-item-profile-info">
<view class="index-kefu-item-profile-info-name-phone">
<text class="index-kefu-item-profile-info-name-phone-name">陈一鸣</text>
<text class="index-kefu-item-profile-info-name-phone-phone">13156107870</text>
</view>
<view class="index-kefu-item-profile-info-address">山东省济南市天桥区凤凰广场B座803室</view>
</view>
</view>
</view>
</view>
</view>
</view>
<MallFilter :offset-top="topHeight" :is-lock-scroll="isLockScroll" ref="mall_filter" :offset="mall_offset" />
<!-- <TabBar v-model="currentTab" /> -->
</template>
<script setup>
// import TabBar from '@/components/TabBar/TabBar.vue';
import {
nextTick,
onMounted,
reactive,
ref
} from 'vue'
import IndexCustomNavigationbar from '@/components/index-custom-navigationbar/index.vue'
import MallFilter from '@/components/mall-filter/index.vue'
import {
fetchFilterParmas,
fetchNavList
} from '../../api'
import {
navigateTo,
showWechatImg
} from '@/utils/helper.ts'
import {
onPullDownRefresh,
onShareAppMessage
} from '@dcloudio/uni-app'
const statusBarHeight = uni.getWindowInfo().statusBarHeight
const windowWidth = uni.getWindowInfo().windowWidth
const menu_top = ref(0)
const menu_bottom = ref(0)
// #ifdef MP
const menu_button_info = uni.getMenuButtonBoundingClientRect()
menu_top.value = menu_button_info.top
menu_bottom.value = menu_button_info.bottom
// #endif
const navbarHeight = (menu_bottom.value - statusBarHeight) + (menu_top.value - statusBarHeight)
const topHeight = navbarHeight + statusBarHeight + 50
// const topHeight = navbarHeight + statusBarHeight
const nav_list = reactive([])
const mall_filter = ref(null)
const mall_offset = ref(0)
// 默认选中第一个tab
const currentTab = ref(0);
onMounted(() => {
mall_offset.value = topHeight + 48
fetchNavList().then(res => {
Object.assign(nav_list, res.list)
})
})
onPullDownRefresh(async () => {
await mall_filter.value?.refresh()
uni.stopPullDownRefresh()
})
const onIndexPageSearch = (val) => {
mall_filter.value?.filterGoodsName(val)
}
const onIndexPageClear = () => {
mall_filter.value?.filterGoodsName('')
}
const is_lock_scroll = ref(false)
const isLockScroll = (e) => {
is_lock_scroll.value = e
/* uni.pageScrollTo({
scrollTop: uni.getWindowInfo().windowHeight - mall_filter.value.offsetTop,
duration: 0
}) */
}
</script>
<style scoped lang="scss">
.content {
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
background-color: #f2f3f5;
}
.index-content-inner {
padding-top: 10px
}
.index-class-card-box {
flex: 1;
border-radius: 10px;
margin: 0 10px 10px;
}
.index-class-card-body {
background-color: #fff;
background: #fff;
border-radius: 10px;
}
.navbar-list-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.navbar-item-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 20%;
padding-top: 10px;
padding-bottom: 10px;
.navbar-item-content-img {
width: 37px;
height: 37px;
}
.navbar-item-content-name {
font-size: 10px;
}
}
/*************客服******************/
.index-kefu-card-box {
flex: 1;
border-radius: 10px;
margin: 0 10px 10px;
overflow: hidden;
background-image: -webkit-gradient(linear, left top, right top, from(#8d7bfb), color-stop(30%, #8d7bfb), to(#8d7bfb));
background-image: -webkit-linear-gradient(left, #8d7bfb, #8d7bfb 30%, #8d7bfb);
background-image: linear-gradient(90deg, #8d7bfb 0, #8d7bfb 30%, #8d7bfb);
}
.index-kefu-card-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 垂直居中 */
padding: 5px 20px
}
.index-kefu-card-header-title {
font-size: 32rpx;
font-weight: bold;
color: white;
}
.index-kefu-card-header-text {
flex: 1;
font-size: 13px;
color: #e7e8ea;
}
.index-kefu-card-body {
display: flex;
justify-content: space-between;
overflow: hidden;
padding: 10px;
background-color: white;
background: #fff;
border-radius: 10px;
}
.index-kefu-item {
width: 49%;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: #e7e8ea;
padding: 5px;
border-radius: 5px;
}
.index-kefu-item-profile {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.index-kefu-item-profile-avatar {
width: 45px;
height: 45px;
border-radius: 10%;
}
.index-kefu-item-profile-info {
text-align: left;
margin-left: 5px;
}
.index-kefu-item-profile-info-name-phone {
display: flex;
align-items: center;
}
.index-kefu-item-profile-info-name-phone-name {
font-size: 13px;
color: #333;
margin-right: 3px;
}
.index-kefu-item-profile-info-name-phone-phone {
font-size: 11px;
color: #888;
}
.index-kefu-item-profile-info-address {
font-size: 10px;
color: #888;
}
/*************客服******************/
</style>

1427
pages/index/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

115
pages/login/index.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<view class="content">
<view class="avatar">
<nut-avatar size="80">
<nut-icon size="30" name="my" />
</nut-avatar>
</view>
<view class="divider">
</view>
</view>
<view class="tip-infos">
<text>申请获取以下权限</text>
<text>获得你的公开信息（昵称、头像等）</text>
</view>
<view class="authorize-btn-inner">
<nut-button type="success" size="large" open-type="getUserInfo" @getuserinfo="getUserInfo">授权登录</nut-button>
</view>
<view class="authorize-btn-inner">
<nut-button type="danger" size="large" @click="switchTab('/pages/index/index')">暂不登录</nut-button>
</view>
</template>
<script setup>
import {
onMounted,
ref
} from 'vue';
import {
login
} from '@/api/user';
import {
onLoad
} from '@dcloudio/uni-app'
import {
navigateTo,
switchTab
} from '@/utils/helper';
const code = ref('')
const redirect_url = ref('')
onLoad((options) => {
redirect_url.value = options.redirect_url
})
onMounted(() => {
uni.login({
provider: "weixin",
success(res) {
if (res.errMsg === 'login:ok') {
code.value = res.code
}
}
})
})
const getUserInfo = (res) => {
if (code.value === '') {
uni.showToast({
icon: 'none',
title: '请稍后再试'
})
return;
}
login(code.value, JSON.stringify(res.detail.userInfo)).then(res => {
console.log(res);
uni.setStorageSync('token', res.token)
uni.setStorageSync('uid', res.user_id)
if(res.is_bind_phone){
navigateTo('/pages/login/phoneAuthorization');
return
}
uni.showToast({
title: '授权成功',
icon: 'none'
})
if (redirect_url.value !== 'undefined') {
navigateTo(redirect_url.value)
} else {
uni.navigateBack()
}
})
}
</script>
<style scoped lang="scss">
.divider {
height: 1px;
background: #eee;
width: 100%;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
padding: 25px 15px;
align-items: center;
gap: 20px;
}
.tip-infos {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 10px 25px;
gap: 10px;
text:nth-child(2) {
font-size: 15px;
color: #666;
}
}
.authorize-btn-inner {
padding: 15px;
}
</style>

108
pages/login/phoneAuthorization.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<!-- <view class="content">
<view class="avatar">
<nut-avatar size="80">
<nut-icon size="30" name="my" />
</nut-avatar>
</view>
<view class="divider">
</view>
</view> -->
<view class="tip-infos">
<text>申请获取以下权限</text>
<text>获得你的手机号信息</text>
</view>
<view class="authorize-btn-inner">
<nut-button type="success" size="large" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</nut-button>
</view>
</template>
<script setup>
import {
onMounted,
ref
} from 'vue';
import {
login,
fetchUserPhone
} from '../../api/user';
import {
onLoad
} from '@dcloudio/uni-app'
import {
navigateTo
} from '../../utils/helper';
const code = ref('')
const redirect_url = ref('')
onLoad((options) => {
redirect_url.value = options.redirect_url
})
onMounted(() => {
uni.login({
provider: "weixin",
success(res) {
if (res.errMsg === 'login:ok') {
code.value = res.code
}
}
})
})
const getPhoneNumber = (res) => {
if(res.detail.code){
fetchUserPhone(res.detail.code).then(res=>{
console.log(res);
if(res.msg==='success' && res.code ===1){
uni.showToast({
title: '授权成功',
icon: 'none'
})
console.log("code");
uni.switchTab({
url: '/pages/mine/index'
})
// uni.navigateBack()
}else{
uni.switchTab({
url: '/pages/mine/index'
})
}
})
}
}
</script>
<style scoped lang="scss">
.divider {
height: 1px;
background: #eee;
width: 100%;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
padding: 25px 15px;
align-items: center;
gap: 20px;
}
.tip-infos {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 10px 25px;
gap: 10px;
text:nth-child(2) {
font-size: 15px;
color: #666;
}
}
.authorize-btn-inner {
padding: 15px;
}
</style>

379
pages/mall/detail.vue Normal file
View File

@@ -0,0 +1,379 @@
<template>
<view class="content">
<nut-watermark v-if="detail.status?.value === 10" class="mark1" :z-index="1" content="此商品已下架"></nut-watermark>
<nut-watermark v-if="detail.status?.value === 30" class="mark1" :z-index="1" content="此商品已锁定"></nut-watermark>
<nut-watermark v-if="detail.status?.value === 40" class="mark1" :z-index="1" content="此商品已售出"></nut-watermark>
<!-- <nut-watermark v-if="detail.is_locked" class="mark1" :z-index="1" content="此商品被锁单"></nut-watermark> -->
<swiper class="swiper" circular indicator-dots autoplay>
<swiper-item @click="showGoodsImages(idx)" v-for="(item,idx) in detail.image" :key="idx">
<image :src="item.file_path" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class='goods_info'>
<nut-cell-group>
<view class="price">
<text class="unit">￥</text>
<text class="value">{{detail.goods_price}}</text>
</view>
</nut-cell-group>
<nut-cell-group>
<view class="name">
<view class="top">
<view class="tag">
<text>{{detail.degree?.degree_name}}</text>
</view>
<text class="title">{{detail.goods_name}}</text>
</view>
<view>
<text class="info">{{detail.content}}</text>
</view>
</view>
</nut-cell-group>
<view class="service">
<view class="info">
<text class="title">服务</text>
<text class="value">{{serviceTxt}}</text>
</view>
</view>
</view>
<view class="bottom-action">
<view class="bottom-action-icon">
<button plain open-type="contact" style="border:none;border-width: 0;" class="bottom-action-icon-item">
<nut-icon name='service'></nut-icon>
<text>客服</text>
</button>
<!-- <button plain style="border:none;border-width: 0;" class="bottom-action-icon-item"
@click="switchTab('/pages/cart/index')">
<nut-icon name='cart'></nut-icon>
<text>购物车</text>
</button> -->
</view>
<!-- detail.goods_status?.value === 10 && -->
<!-- @click="navigateTo('/pages/order/preview?ids=' + detail.goods_id+'&from=item')" -->
<view class="bottom-action-btn" v-if="detail.status?.value === 20">
<nut-button type="primary" v-if="!audit" @click="buyNow(detail.goods_id)">立即购买</nut-button>
</view>
<view class="bottom-action-btn" v-else>
<nut-button plain v-if="!audit">暂不支持购买</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import {
reactive,
ref
} from 'vue';
import {
navigateTo,
switchTab,
goToLoginPage
} from '@/utils/helper';
import {
onShareAppMessage,
onShareTimeline,
onLoad
} from '@dcloudio/uni-app'
import {
fetchGoodsDetail,
} from '@/api/goods';
import {
fetchGetConfig,
} from '@/api/config';
// 审核模式 默认开启 true
const audit = ref(true);
const serviceTxt = ref('')
const id = ref(0)
const detail = reactive({})
onLoad(options => {
console.log('init');
// 获取配置
getConfig()
// 获取商品详情
id.value = options.id
fetchGoodsDetail(id.value).then(res => {
Object.assign(detail, res)
})
})
// 立即购买
const buyNow = (goodsId) => {
let token = uni.getStorageSync('token')
if (token) {
console.log("已经登陆");
uni.navigateTo({
url: `/pages/order/preview?ids=${goodsId}&from=item`
})
} else {
goToLoginPage(); // 未登陆
}
}
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
serviceTxt.value = res.appConfig.service_txt
})
}
// 分享给朋友圈
onShareTimeline((res) => {
return {
title: detail.goods_name,
path: '/pages/mall/detail?id=' + detail.goods_id,
imageUrl: detail.image[0].file_path
};
})
// 分享
onShareAppMessage((res) => {
return {
title: detail.goods_name,
path: '/pages/mall/detail?id=' + detail.goods_id,
imageUrl: detail.image[0].file_path
}
})
// 显示图片
const showGoodsImages = (index) => {
uni.previewImage({
current: index, // 指定当前显示的图片索引
urls: detail.image.map(e => {
return e.file_path
}),
});
}
</script>
<style scoped lang="scss">
.bottom-action {
position: fixed;
bottom: 0;
left: 0;
height: 50px;
background: #fff;
width: calc(100% - 20px);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 5px 10px;
.bottom-action-icon {
align-items: center;
display: flex;
justify-content: center;
.bottom-action-icon-item {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text {
color: rgba(0, 0, 0, .5);
font-size: 11px;
}
}
}
.bottom-action-btn {
-ms-flex-align: center;
-ms-flex-pack: end;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 5px;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
}
.content {
display: flex;
flex-direction: column;
min-height: calc(100vh - 50px); //100vh;
/* align-items: center; */
// justify-content: center;
background-color: #f2f3f5;
// height: calc(100% - 50px);
--nut-cell-group-title-color: #000;
--nut-collapse-item-padding: 10px 10px 10px 10px;
--nut-collapse-wrapper-content-padding: 10px 10px 10px 10px;
--nut-collapse-item-color: #000;
padding-bottom: 50px;
}
.report-inner {
display: flex;
flex-direction: column;
gap: 5px;
.report-item {
.report-item-name {
color: rgba(0, 0, 0, .9);
font-weight: 700;
}
.report-item-content {
display: flex;
flex-wrap: wrap;
.report-item-content-item {
padding-top: 2px;
padding-bottom: 2px;
width: 50%;
display: flex;
align-items: center;
}
}
}
}
.count-item {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
}
.swiper {
width: 100%;
height: 414px;
image {
width: 100%;
height: 100%;
}
}
.goods_info {
padding: 5px;
color: #000;
.price {
border-radius: 5px;
padding: 10px;
background: #fff;
.unit {
font-size: 12px;
}
.value {
font-size: 24px;
}
}
.name {
border-radius: 5px;
padding: 10px;
background: #fff;
display: flex;
gap: 5px;
flex-direction: column;
.top {
display: flex;
gap: 5px;
.tag {
background: #000;
padding: 1px 2px;
justify-content: center;
align-items: center;
display: flex;
border-radius: 2px;
text {
font-size: 10px;
color: #fff;
}
}
.title {
font-size: 16px;
}
}
.info {
color: rgba(0, 0, 0, .7);
font-size: 13px;
}
}
.service {
border-radius: 5px;
padding: 10px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
.title {
font-size: 16px;
}
.value {
color: rgba(0, 0, 0, .7);
font-size: 13px;
}
}
.right_icon {
background-color: currentColor;
mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiMxQTFBMUEiIGQ9Ik0zNTMuODMgMTU4LjE3YTQyLjY3IDQyLjY3IDAgMSAxIDYwLjM0LTYwLjM0bDM4NCAzODRhNDIuNjcgNDIuNjcgMCAwIDEgMCA2MC4zNmwtMzg0IDM4NGE0Mi42NyA0Mi42NyAwIDEgMS02MC4zNC02MC4zNkw3MDcuNjcgNTEyeiIvPjwvc3ZnPg==') 0 0/100% 100% no-repeat;
width: 12px;
height: 12px;
}
}
.report {
border-radius: 5px;
padding: 1px;
background: #fff;
}
}
</style>

579
pages/mall/houseDetail.vue Normal file
View File

@@ -0,0 +1,579 @@
<template>
<view class="content">
<nut-watermark v-if="detail.shelves_status?.value === 10" class="mark1" :z-index="1"
content="此商品已下架"></nut-watermark>
<nut-watermark v-if="detail.shelves_status?.value === 30" class="mark1" :z-index="1"
content="此商品已售出"></nut-watermark>
<nut-watermark v-if="detail.is_locked" class="mark1" :z-index="1" content="此商品被锁单"></nut-watermark>
<swiper class="swiper" circular indicator-dots autoplay>
<swiper-item @click="showGoodsImages(idx)" v-for="(item,idx) in detail.image" :key="idx">
<image :src="item.file_path" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class='goods_info'>
<nut-cell-group>
<view class="price">
<text class="unit">￥</text>
<text class="value">{{getPrice(detail)}}</text>
</view>
</nut-cell-group>
<nut-cell-group>
<view class="name">
<view class="top">
<view class="tag">
<text>{{detail.degree?.degree_name}}</text>
</view>
<text class="title">{{detail.goods_name}}</text>
</view>
<view>
<text class="info">{{detail.content}}</text>
</view>
</view>
</nut-cell-group>
<view class="service">
<view class="info">
<text class="title">服务</text>
<text class="value">{{detail.service_txt}}</text>
</view>
</view>
<nut-cell-group title="验机报告">
<nut-collapse v-model="activeNames" @change="onChange">
<nut-collapse-item :name="1" icon="rect-down">
<template v-slot:title>
瑕疵项
</template>
<template v-slot:value>
<view class="count-item">
<nut-icon name="tips" size="12"
custom-color='#ff3535'></nut-icon><text>{{detail.report_tags?.bad_count}}项</text>
</view>
</template>
<view class="report-inner">
<view class="report-item" v-for="(item,idx) in detail?.report_tags?.bad" :key="idx">
<view class="report-item-name">{{item.name}}</view>
<view class="report-item-content">
<view class="report-item-content-item" v-for="(iitem,iidx) in item.value_list"
:key="iidx">
<nut-icon name="tips" size="12" custom-color="#ff3535"></nut-icon>
<text>{{iitem.name}}</text>
</view>
</view>
</view>
</view>
</nut-collapse-item>
<nut-collapse-item :name="2" icon="rect-down">
<template v-slot:title>
正常项
</template>
<template v-slot:value>
<view class="count-item">
<nut-icon name="success" size="12" custom-color="#5dcc30"></nut-icon>
<text>{{detail.report_tags?.ok_count}}项</text>
</view>
</template>
<view class="report-inner">
<view class="report-item" v-for="(item,idx) in detail?.report_tags?.ok" :key="idx">
<view class="report-item-name">{{item.name}}</view>
<view class="report-item-content">
<view class="report-item-content-item" v-for="(iitem,iidx) in item.value_list"
:key="iidx">
<nut-icon name="success" size="12" custom-color="#5dcc30"></nut-icon>
<text>{{iitem.name}}</text>
</view>
</view>
</view>
</view>
</nut-collapse-item>
</nut-collapse>
</nut-cell-group>
</view>
<view class="bottom-action">
<view class="bottom-action-icon">
<button plain open-type="contact" style="border:none;border-width: 0;" class="bottom-action-icon-item">
<nut-icon name='service'></nut-icon>
<text>客服</text>
</button>
</view>
<!-- detail.goods_status?.value === 10 && -->
<view class="bottom-action-btn"
v-if="detail.shelves_status?.value === 20 && !goods_cart_ids.includes(detail.goods_id) ">
<!-- @click="navigateTo('/pages/order/housePreview?ids=' + detail.goods_id+'&from=item')" -->
<nut-button type="primary" v-if="!audit" @click="buyNow(detail.goods_id)">立即购买</nut-button>
</view>
<!-- detail.goods_status?.value === 10 && -->
<!-- <view class="bottom-action-btn"
v-else-if="detail.shelves_status?.value === 20 && goods_cart_ids.includes(detail.goods_id) && user_goods_cart_ids.includes(detail.goods_id)">
<nut-button plain>已在购物车</nut-button>
</view> -->
<view class="bottom-action-btn" v-else>
<nut-button plain v-if="!audit">已锁定</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import {
reactive,
ref
} from 'vue';
import {
navigateTo,
switchTab,
goToLoginPage
} from '@/utils/helper';
import {
onShareAppMessage,
onShareTimeline,
onLoad
} from '@dcloudio/uni-app'
import {
houseFetchCartGoodsIds,
houseFetchGoodsDetail
} from '@/api/house_goods';
import {
// fetchOrderbuyNow,
houseFetchCheckGoods
} from '@/api/house_order';
import {
fetchGetConfig,
fetchGetPriceRules,
} from '@/api/config';
// 审核模式
const audit = ref(true);
// 是否开启整仓调价
const isWarehouse = ref(false)
// 单个商品规则列表
const singleRule = ref([])
// 价格区间规则列表
const rangeRule = ref([])
// 整仓规则
const warehouseRule = reactive({
val: 0,
val_type: 1,
})
// 获取全部调价规则
const GetPriceRules = () => {
fetchGetPriceRules().then(res => {
console.log('res', res);
// 区间调价
rangeRule.value = res?.range ?? [];
// 单机调价
singleRule.value = res?.single ?? [];
// 整仓调价
Object.assign(warehouseRule, res?.warehouse?.[0] ?? {
val: 0,
val_type: 1,
})
})
}
// 获取价格
const getPrice = (goods) => {
// 判断是否开启整仓调价
if (isWarehouse.value) {
console.log("开启整仓调价");
// 查找单机器加价规则
const list = singleRule.value || singleRule; // 兼容 ref 和 reactive
// 根据 product_id == goods_id 找对应规则
const rule = list.find(item => item.product_id === goods.goods_id);
if (rule) {
// 存在单机加价规则
const basePrice = Number(goods.goods_price);
const val = Number(rule.val);
let finalPrice = basePrice;
// val_type 处理
if (rule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (rule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
} else {
// 不存在则使用整仓加价
const basePrice = Number(goods.goods_price);
const val = Number(warehouseRule.val);
let finalPrice = basePrice;
// val_type 处理
if (warehouseRule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (warehouseRule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
}
} else {
console.log("未开启整仓调价");
// 查找单机器加价规则
const singleRuleList = singleRule.value || singleRule; // 兼容 ref 和 reactive
// 根据 product_id == goods_id 找对应规则
const oneRule = singleRuleList.find(item => item.product_id === goods.goods_id);
if (oneRule) {
// 存在单机加价规则
const basePrice = Number(goods.goods_price);
const val = Number(oneRule.val);
let finalPrice = basePrice;
// val_type 处理
if (oneRule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (oneRule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
} else {
// 不存在则使用区间加价
const basePrice = Number(goods.goods_price)
// // 查找区间加价规则
const rangeRulelist = rangeRule.value || rangeRule; // 兼容 ref 和 reactive
const quRule = rangeRulelist.find(item => {
const min = Number(item.min_price)
const max = Number(item.max_price)
return basePrice >= min && basePrice < max
}) || null
if (quRule) {
// 存在区间加价
const val = Number(quRule.val);
let finalPrice = basePrice;
// val_type 处理
if (quRule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (quRule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
} else {
// 不存在区间加价
return basePrice
}
}
}
}
const id = ref(0)
const detail = reactive({})
// 用户购物车商品列表
const user_goods_cart_ids = ref([]);
// 全部购物车商品列表
const goods_cart_ids = ref([]);
// 立即购买
const buyNow = (goodsId) => {
let token = uni.getStorageSync('token')
if (token) {
// 检测是否可以购买
houseFetchCheckGoods({
goods_id: goodsId,
}).then(res => {
console.log(res);
console.log("已经登陆");
uni.navigateTo({
url: `/pages/order/housePreview?ids=${goodsId}&from=item`
})
});
} else {
goToLoginPage(); // 未登陆
}
}
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
isWarehouse.value = res.appConfig.is_warehouse == 1
})
}
onLoad(options => {
console.log('init');
// 获取配置
getConfig()
GetPriceRules()
// 获取商品详情
id.value = options.id
houseFetchGoodsDetail(id.value).then(res => {
Object.assign(detail, res)
})
// 获取购买记录
houseFetchCartGoodsIds().then(res => {
console.log(res);
user_goods_cart_ids.value = res.user_cart_goods_ids;
goods_cart_ids.value = res.cart_goods_ids;
})
})
// 分享给朋友圈
onShareTimeline((res) => {
return {
title: detail.goods_name,
path: '/pages/mall/houseDetail?id=' + detail.goods_id,
imageUrl: detail.image[0].file_path
};
})
// 分享
onShareAppMessage((res) => {
return {
title: detail.goods_name,
path: '/pages/mall/houseDetail?id=' + detail.goods_id,
imageUrl: detail.image[0].file_path
}
})
const activeNames = ref([1, 2]);
const onChange = (modelValue, currName, status) => {
// currName: 当前操作的 collapse-item 的 name
// status: true 打开 false 关闭
console.log(modelValue, currName, status);
}
// 显示图片
const showGoodsImages = (index) => {
uni.previewImage({
current: index, // 指定当前显示的图片索引
urls: detail.image.map(e => {
return e.file_path
}),
});
}
</script>
<style scoped lang="scss">
.bottom-action {
position: fixed;
bottom: 0;
left: 0;
height: 50px;
background: #fff;
width: calc(100% - 20px);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 5px 10px;
.bottom-action-icon {
align-items: center;
display: flex;
justify-content: center;
.bottom-action-icon-item {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
text {
color: rgba(0, 0, 0, .5);
font-size: 11px;
}
}
}
.bottom-action-btn {
-ms-flex-align: center;
-ms-flex-pack: end;
-webkit-align-items: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 5px;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
}
.content {
display: flex;
flex-direction: column;
/* align-items: center; */
// justify-content: center;
background-color: #f2f3f5;
height: calc(100% - 50px);
--nut-cell-group-title-color: #000;
--nut-collapse-item-padding: 10px 10px 10px 10px;
--nut-collapse-wrapper-content-padding: 10px 10px 10px 10px;
--nut-collapse-item-color: #000;
padding-bottom: 50px;
}
.report-inner {
display: flex;
flex-direction: column;
gap: 5px;
.report-item {
.report-item-name {
color: rgba(0, 0, 0, .9);
font-weight: 700;
}
.report-item-content {
display: flex;
flex-wrap: wrap;
.report-item-content-item {
padding-top: 2px;
padding-bottom: 2px;
width: 50%;
display: flex;
align-items: center;
}
}
}
}
.count-item {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
}
.swiper {
width: 100%;
height: 414px;
image {
width: 100%;
height: 100%;
}
}
.goods_info {
padding: 5px;
color: #000;
.price {
border-radius: 5px;
padding: 10px;
background: #fff;
.unit {
font-size: 12px;
}
.value {
font-size: 24px;
}
}
.name {
border-radius: 5px;
padding: 10px;
background: #fff;
display: flex;
gap: 5px;
flex-direction: column;
.top {
display: flex;
gap: 5px;
.tag {
background: #000;
padding: 1px 2px;
justify-content: center;
align-items: center;
display: flex;
border-radius: 2px;
text {
font-size: 10px;
color: #fff;
}
}
.title {
font-size: 16px;
}
}
.info {
color: rgba(0, 0, 0, .7);
font-size: 13px;
}
}
.service {
border-radius: 5px;
padding: 10px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
.title {
font-size: 16px;
}
.value {
color: rgba(0, 0, 0, .7);
font-size: 13px;
}
}
.right_icon {
background-color: currentColor;
mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiMxQTFBMUEiIGQ9Ik0zNTMuODMgMTU4LjE3YTQyLjY3IDQyLjY3IDAgMSAxIDYwLjM0LTYwLjM0bDM4NCAzODRhNDIuNjcgNDIuNjcgMCAwIDEgMCA2MC4zNmwtMzg0IDM4NGE0Mi42NyA0Mi42NyAwIDEgMS02MC4zNC02MC4zNkw3MDcuNjcgNTEyeiIvPjwvc3ZnPg==') 0 0/100% 100% no-repeat;
width: 12px;
height: 12px;
}
}
.report {
border-radius: 5px;
padding: 1px;
background: #fff;
}
}
</style>

278
pages/mine/index.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<view class="page-content">
<view class="user-inner" v-if="uid > 0">
<view>
<nut-avatar size="large">用户</nut-avatar>
</view>
<!--<image :src="user_info.image"></image>-->
<view class="user-info-style">
<text class="nickname">{{ userInfo.nickName }}</text>
<text class="user-id">UID：{{ userInfo.user_id }}</text>
</view>
</view>
<view class="user-inner" v-else>
<view @click="goToLoginPage()">
<nut-avatar size="large">
<nut-icon name="my" />
</nut-avatar>
</view>
<view @click="goToLoginPage()">
<text>点击登录</text>
</view>
</view>
<view class="content">
<nut-cell-group title="店铺管理">
<nut-grid>
<nut-grid-item text="商城配置" @click="navigateTo('/pages/config/store')">
<nut-icon name="people"></nut-icon>
</nut-grid-item>
<nut-grid-item text="价格调整" @click="navigateTo('/pages/config/price')">
<nut-icon name="refresh"></nut-icon>
</nut-grid-item>
<nut-grid-item text="商品管理" @click="navigateTo('/pages/config/goodsList')">
<nut-icon name="shop"></nut-icon>
</nut-grid-item>
<nut-grid-item text="店铺订单" @click="navigateTo('/pages/config/shopOrder/index?tab=0')">
<nut-icon name="order"></nut-icon>
</nut-grid-item>
<!-- <nut-grid-item text="仓库订单" @click="navigateTo('/pages/order/list/index?tab=3')">
<nut-icon name="order"></nut-icon> -->
<!-- </nut-grid-item> -->
</nut-grid>
</nut-cell-group>
<nut-cell-group title="我的订单" v-if="showMyOrder && !audit">
<nut-grid>
<nut-grid-item text="全部"
@click="navigateTo('/pages/order/index?tab=0')">{{ countInfo.all }}</nut-grid-item>
<nut-grid-item text="待付款"
@click="navigateTo('/pages/order/index?tab=1')">{{ countInfo.payment }}</nut-grid-item>
<nut-grid-item text="待发货"
@click="navigateTo('/pages/order/index?tab=2')">{{ countInfo.delivery }}</nut-grid-item>
<nut-grid-item text="待收货"
@click="navigateTo('/pages/order/index?tab=3')">{{ countInfo.received }}</nut-grid-item>
</nut-grid>
</nut-cell-group>
<!-- <nut-cell-group title="控制台">
<nut-cell title="商城配置" @click="navigateTo('')"></nut-cell>
<nut-cell title="价格调整" @click="navigateTo('/pages/config/index')"></nut-cell>
<nut-cell title="店内机器管理" @click="navigateTo('/pages/config/index')"></nut-cell>
<nut-cell title="订单管理" @click="navigateTo('/pages/config/index')"></nut-cell> -->
<!-- <nut-cell v-if="user_info.super_user_from.includes('parts')" title="配件管理"
@click="navigateTo('/pages/control/parts/index')"></nut-cell> -->
<!-- </nut-cell-group> -->
<!-- <nut-cell-group title="控制台" v-if="user_info.is_super_user">
<nut-cell v-if="user_info.super_user_from.includes('store')" title="手机管理"
@click="navigateTo('/pages/control/goods/index')"></nut-cell> -->
<!-- <nut-cell v-if="user_info.super_user_from.includes('parts')" title="配件管理"
@click="navigateTo('/pages/control/parts/index')"></nut-cell> -->
<!-- </nut-cell-group> -->
<nut-cell-group title="联系我们">
<nut-cell :title="phone" @click="makePhoneCall(phone)"></nut-cell>
</nut-cell-group>
</view>
</view>
</template>
<script setup>
// 导入Vue的响应式函数
import {
reactive,
ref
} from 'vue';
import {
onLoad,
onShow,
} from '@dcloudio/uni-app';
// import TabBar from '@/components/TabBar/TabBar.vue';
// 默认选中第一个tab
// const currentTab = ref(3);
// 导入获取用户信息的API函数
import {
fetchUserInfo
} from '@/api/user';
// 导入页面跳转工具函数
import {
goToLoginPage,
navigateTo
} from '@/utils/helper';
// 导入uni-app生命周期钩子
// 导入获取订单总数的API函数
import {
fetchOrderTotalCount
} from '@/api/order';
import {
fetchGetConfig
} from '@/api/config';
const audit = ref(true);
const showMyOrder = ref(false);
const phone = ref('');
// 用户ID
const uid = ref(0);
/**
* 用户信息响应式对象
*/
const userInfo = reactive({});
/**
* 订单统计信息响应式对象
*/
const countInfo = reactive({
all: 0,
payment: 0,
delivery: 0,
received: 0
});
onLoad(options => {
});
const makePhoneCall = (phoneNumber) => {
console.log(123);
uni.makePhoneCall({
phoneNumber: phoneNumber,
success: () => {
console.log('拨打电话成功');
},
fail: (err) => {
console.error('拨打电话失败:', err);
}
});
}
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
phone.value = res.appConfig.shop_phone
})
}
/**
* 页面显示生命周期钩子
* 每次页面显示时都会执行
*/
onShow(() => {
console.log('init');
let userId = uni.getStorageSync('uid');
console.log("userId", userId);
uid.value = userId
// 获取配置
getConfig()
// 如果用户登陆
if (uid.value > 0) {
// 获取用户信息
fetchUserInfo().then(res => {
// if (res.is_bind_phone) {
// navigateTo('/pages/login/phoneAuthorization');
// return
// }
// 将API返回的数据合并到userInfo响应式对象中
Object.assign(userInfo, res);
// 显示订单
showMyOrder.value = true
// 获取订单总数统计
fetchOrderTotalCount().then(res => {
// 将API返回的数据合并到count_info响应式对象中
Object.assign(countInfo, res);
});
});
}
});
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.user-inner {
background: linear-gradient(30deg, rgba(198, 77, 255, 0.99), rgba(102, 204, 255, 0.99));
height: 150px;
width: calc(100% - 20px);
display: flex;
align-items: center;
padding: 0px 10px;
gap: 15px;
}
.user-info-style {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.nickname {
font-size: 20px;
/* 大字体 */
font-weight: bold;
/* 加粗 */
color: #333;
/* 深色文字 */
margin-bottom: 5px;
/* 与UID的间距 */
}
.user-id {
font-size: 14px;
/* 小字体 */
color: #fff;
/* 浅色文字 */
}
.content {
display: flex;
flex-direction: column;
/* align-items: center; */
// justify-content: center;
background-color: #f2f3f5;
padding: 0px 10px;
// height: calc(100vh - 150px);
}
</style>

211
pages/order/detail.vue Normal file
View File

@@ -0,0 +1,211 @@
<template>
<view class="page-content">
<nut-steps :current="detail.progress">
<nut-step title="待付款">1</nut-step>
<nut-step title="待发货">2</nut-step>
<nut-step title="待收货">3</nut-step>
<nut-step title="已完成">4</nut-step>
</nut-steps>
<nut-cell-group>
<nut-cell>
<view class="address-inner" v-if="detail.address_info">
<text>{{detail.address_info.user_name}} - {{detail.address_info.tel_number}}</text>
<text>{{detail.address_info.province_name + detail.address_info.city_name + detail.address_info.county_name + detail.address_info.street_name + detail.address_info.detail_info_new}}</text>
</view>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<!-- <nut-cell is-link v-for="(goods,idx) in detail.goods" :key="idx"
@click="navigateTo('/pages/mall/item/index?id=' + goods.goods_id)">
<template #title>
<view class="detail">
<view class="name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text>{{goods.goods_name}}</text>
</view>
<view class="sku">{{goods.content}}</view>
</view>
</template>
</nut-cell> -->
<nut-cell v-for="(goods,index) in detail.goods" :key="index" center
@click="navigateTo('/pages/mall/detail?id=' + goods.goods_id)">
<template #title>
<view class="goods-info-row">
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
</view>
<text class="goods-no">串号：{{goods.goods_no}}</text>
</view>
</view>
</template>
<template #link>
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
</template>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell>
<view class="total-price-inner">
<text>商品总额</text>
<nut-price :price="detail.pay_price" size="normal" :need-symbol="true" />
</view>
</nut-cell>
<!-- <nut-cell>
<view class="total-price-inner">
<view>
<text>邮费</text>
</view>
<view>
<nut-price :price="0" size="normal" :need-symbol="true" />
</view>
</view>
</nut-cell> -->
</nut-cell-group>
<nut-cell-group>
<nut-cell title="订单编号" :desc="detail.order_no" />
<nut-cell title="下单时间" :desc="detail.create_time" />
</nut-cell-group>
<nut-cell-group v-if="detail.progress >= 3">
<nut-cell title="物流公司" :desc="detail.express_company" />
<nut-cell title="物流单号" :desc="detail.express_no" />
</nut-cell-group>
<view v-if="detail.progress === 1 && !audit" class="wechat-img-inner">
<nut-button type="primary" block @click="showPayImgs()">
点我付款
</nut-button>
</view>
</view>
</template>
<script setup>
import {
reactive,
ref
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
fetchOrderDetail
} from '@/api/order';
import {
navigateTo,
} from '@/utils/helper';
import {
fetchGetConfig
} from '@/api/config';
// 审核模式 默认开启 true
const audit = ref(true);
// 订单ID
const id = ref(0)
// 订单详情
const detail = reactive({})
// 支付码
const images = ref([]);
onLoad((options) => {
id.value = options.id
})
/**
* 页面显示生命周期钩子
* 每次页面显示时都会执行
*/
onShow(() => {
// 获取配置
getConfig()
// 获取订单详情
fetchOrderDetail(id.value).then(res => {
Object.assign(detail, res)
})
})
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
console.log(res.appConfig.pay_imgs);
let pay_imgs = JSON.parse(res.appConfig.pay_imgs) || [];
let wechat_imgs = JSON.parse(res.appConfig.wechat_imgs) || [];
let pay_imgs_arr = pay_imgs.map(item => item.file_path) || [];
let wechat_imgs_arr = wechat_imgs.map(item => item.file_path) || [];
const merged_imgs_arr = pay_imgs_arr.concat(wechat_imgs_arr);
images.value = merged_imgs_arr;
})
}
// 显示支付码
const showPayImgs = () => {
if (images.value.length === 0) {
uni.showToast({
title: '暂无图片',
icon: 'none'
});
return;
}
console.log('preview images:', images);
uni.previewImage({
urls: images.value
});
}
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
padding: 20rpx;
}
.address-inner {
display: flex;
flex-direction: column;
justify-content: center;
}
.total-price-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
// flex-direction: row;
view:nth-child(2) {
color: #fa2c19;
}
}
.wechat-img-inner {
margin-top: 60rpx;
padding: 0rpx 80rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
// gap: 5px;
}
</style>

155
pages/order/detail/index copy.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<view class="page-content">
<nut-steps :current="detail.progress">
<nut-step title="待付款">1</nut-step>
<nut-step title="待发货">2</nut-step>
<nut-step title="待收货">3</nut-step>
<nut-step title="已完成">4</nut-step>
</nut-steps>
<nut-cell-group>
<nut-cell>
<view class="address-inner" v-if="detail.address_info">
<text>{{detail.address_info.user_name}} - {{detail.address_info.tel_number}}</text>
<text>{{detail.address_info.province_name + detail.address_info.city_name + detail.address_info.county_name + detail.address_info.street_name + detail.address_info.detail_info_new}}</text>
</view>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<!-- <nut-cell is-link v-for="(goods,idx) in detail.goods" :key="idx"
@click="navigateTo('/pages/mall/item/index?id=' + goods.goods_id)">
<template #title>
<view class="detail">
<view class="name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text>{{goods.goods_name}}</text>
</view>
<view class="sku">{{goods.content}}</view>
</view>
</template>
</nut-cell> -->
<nut-cell v-for="(goods,index) in detail.goods" :key="index" center
@click="navigateTo('/pages/mall/item/index?id=' + goods.goods_id)">
<template #title>
<view class="goods-info-row">
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
</view>
<text class="goods-no">串号：{{goods.goods_no}}</text>
</view>
</view>
</template>
<template #link>
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
</template>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell>
<view class="total-price-inner">
<text>商品总额</text>
<nut-price :price="detail.pay_price" size="normal" :need-symbol="true" />
</view>
</nut-cell>
<!-- <nut-cell>
<view class="total-price-inner">
<view>
<text>邮费</text>
</view>
<view>
<nut-price :price="0" size="normal" :need-symbol="true" />
</view>
</view>
</nut-cell> -->
</nut-cell-group>
<nut-cell-group>
<nut-cell title="订单编号" :desc="detail.order_no" />
<nut-cell title="下单时间" :desc="detail.create_time" />
</nut-cell-group>
<nut-cell-group v-if="detail.progress >= 3">
<nut-cell title="物流公司" :desc="detail.express_company" />
<nut-cell title="物流单号" :desc="detail.express_no" />
</nut-cell-group>
<view v-if="detail.progress === 1" class="wechat-img-inner" style="margin-top: 60rpx; padding: 0rpx 80rpx;">
<nut-button type="primary" block @click="showPayImgs()">
点我付款
</nut-button>
</view>
</view>
</template>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
padding: 20rpx;
}
.address-inner {
display: flex;
flex-direction: column;
justify-content: center;
}
.total-price-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
// flex-direction: row;
view:nth-child(2) {
color: #fa2c19;
}
}
.wechat-img-inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
// gap: 5px;
}
</style>
<script setup>
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
import {
reactive,
ref
} from 'vue';
import {
fetchOrderDetail
} from '../../../api/order';
import {
navigateTo,
showPayImgs
// showWechatImg,
// showWechatPayImg
} from '../../../utils/helper';
const id = ref(0)
onLoad((options) => {
id.value = options.id
})
const detail = reactive({})
onShow(() => {
fetchOrderDetail(id.value).then(res => {
Object.assign(detail, res)
})
})
</script>

396
pages/order/housePreview.vue Normal file
View File

@@ -0,0 +1,396 @@
<template>
<view class="page-content">
<nut-cell-group>
<nut-cell v-if="!form.address_info?.address_id" title="添加地址" is-link @click="chooseAddress"></nut-cell>
<nut-cell v-else :title="form.address_info.user_name + ' ' + form.address_info.tel_number" is-link
:sub-title="
form.address_info.province_name +
form.address_info.city_name +
form.address_info.county_name +
form.address_info.street_name +
form.address_info.detail_info_new
" @click="chooseAddress"></nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell center>
<template #title>
<view class="goods-info-row">
<!-- 左侧文字区域 -->
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{ goods?.goods_house?.degree?.degree_name }}</nut-tag>
<text style="margin-left: 10rpx">{{ goods?.goods_house?.goods_name }}</text>
</view>
<text class="goods-no">串号：{{ goods?.goods_house?.goods_no }}</text>
</view>
<!-- 右侧价格区域 -->
</view>
</template>
<template #link>
<nut-price :price="getPrice(goods?.goods_house)" size="small" :need-symbol="true" />
</template>
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell>
<view class="total-price-inner">
<text>件数</text>
<text>{{ order_total_num }}件</text>
</view>
</nut-cell>
<nut-cell>
<view class="total-price-inner">
<text>商品总额</text>
<nut-price :price="getPrice(goods?.goods_house)" :need-symbol="true" />
</view>
</nut-cell>
</nut-cell-group>
<view class="bottom-submit-inner">
<view class="bottom-submit-inner-info">
<text>合计:</text>
<nut-price size="large" :price="getPrice(goods?.goods_house)" :need-symbol="true" />
</view>
<view class="bottom-submit-inner-btn">
<nut-button type="primary" @click="onSubmitClick">确认下单</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import {
onLoad,
onShow,
onHide
} from '@dcloudio/uni-app';
import {
reactive,
ref
} from 'vue';
import {
fetchOrderbuyNow,
houseFetchGoodsPreview
} from '@/api/house_order';
import {
fetchGetConfig,
fetchGetPriceRules,
} from '@/api/config';
import {
navigateTo
} from '@/utils/helper';
// 审核模式
const audit = ref(true);
// 是否开启整仓调价
const isWarehouse = ref(false)
// 单个商品规则列表
const singleRule = ref([])
// 价格区间规则列表
const rangeRule = ref([])
// 整仓规则
const warehouseRule = reactive({
val: 0,
val_type: 1,
})
// 获取全部调价规则
const GetPriceRules = () => {
fetchGetPriceRules().then(res => {
console.log('res', res);
// 区间调价
rangeRule.value = res?.range ?? [];
// 单机调价
singleRule.value = res?.single ?? [];
// 整仓调价
Object.assign(warehouseRule, res?.warehouse?.[0] ?? {
val: 0,
val_type: 1,
})
})
}
// 获取价格
const getPrice = (goods) => {
// 判断是否开启整仓调价
if (isWarehouse.value) {
console.log("开启整仓调价");
// 查找单机器加价规则
const list = singleRule.value || singleRule; // 兼容 ref 和 reactive
// 根据 product_id == goods_id 找对应规则
const rule = list.find(item => item.product_id === goods?.goods_id);
if (rule) {
// 存在单机加价规则
const basePrice = Number(goods?.goods_price);
const val = Number(rule.val);
let finalPrice = basePrice;
// val_type 处理
if (rule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (rule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
} else {
// 不存在则使用整仓加价
const basePrice = Number(goods?.goods_price);
const val = Number(warehouseRule.val);
let finalPrice = basePrice;
// val_type 处理
if (warehouseRule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (warehouseRule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
}
} else {
console.log("未开启整仓调价");
// 查找单机器加价规则
const singleRuleList = singleRule.value || singleRule; // 兼容 ref 和 reactive
// 根据 product_id == goods_id 找对应规则
const oneRule = singleRuleList.find(item => item.product_id === goods?.goods_id);
if (oneRule) {
// 存在单机加价规则
const basePrice = Number(goods?.goods_price);
const val = Number(oneRule.val);
let finalPrice = basePrice;
// val_type 处理
if (oneRule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (oneRule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
} else {
// 不存在则使用区间加价
const basePrice = Number(goods?.goods_price)
// // 查找区间加价规则
const rangeRulelist = rangeRule.value || rangeRule; // 兼容 ref 和 reactive
const quRule = rangeRulelist.find(item => {
const min = Number(item.min_price)
const max = Number(item.max_price)
return basePrice >= min && basePrice < max
}) || null
if (quRule) {
// 存在区间加价
const val = Number(quRule.val);
let finalPrice = basePrice;
// val_type 处理
if (quRule.val_type == 1) {
finalPrice = basePrice + val; // 固定加价
} else if (quRule.val_type == 2) {
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
}
return finalPrice.toFixed(2); // 保留两位小数
} else {
// 不存在区间加价
return basePrice
}
}
}
}
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
isWarehouse.value = res.appConfig.is_warehouse == 1
})
}
const chooseAddress = () => {
uni.chooseAddress({
success(res) {
// console.log(res.userName)
// console.log(res.telNumber)
// console.log(res.provinceName + res.cityName + res.countyName + res.streetName + res.detailInfoNew)
// console.log(res.userName)
// console.log(res.postalCode)
// console.log(res.provinceName)
// console.log(res.cityName)
// console.log(res.countyName)
// console.log(res.detailInfo)
// console.log(res.nationalCode)
// console.log(res.telNumber)
console.log(res);
Object.assign(form, {
address_info: {
address_id: res.addressID || 1,
user_name: res.userName,
tel_number: res.telNumber,
city_name: res.cityName || '',
county_name: res.countyName || '',
detail_info: res.detailInfo || '',
detail_info_new: res.detailInfoNew || '',
national_code: res.nationalCode || '',
national_code_full: res.nationalCodeFull || '',
postal_code: res.postalCode || '',
province_name: res.provinceName || '',
street_name: res.streetName || '',
},
});
},
});
};
const ids = ref([]);
// const list = reactive([]);
const goods = reactive({})
const order_total_price = ref(0);
const order_total_num = ref(0);
const form = reactive({
goods_id: 0,
address_info: {},
});
const fromStr = ref('');
onLoad(options => {
console.log('init');
// 获取配置
getConfig()
GetPriceRules()
console.log('🚀 ~ from:', options.from);
fromStr.value = options.from;
console.log('🚀 ~ ids:', options.ids);
form.goods_id = options.ids;
});
onShow(() => {
console.log('🚀 ~ onShowfrom:', fromStr.value);
if (fromStr.value === 'list' || fromStr.value === 'item') {
houseFetchGoodsPreview({
goods_id: form.goods_id,
}).then(res => {
console.log(res);
// Object.assign(list, res.goods_list);
Object.assign(goods, res.goods)
// Object.assign(form.address_info, res.address_info);
order_total_price.value = res.order_total_price;
order_total_num.value = res.order_total_num;
});
}
});
onHide(() => {
fromStr.value = '';
});
// 提交订单
const onSubmitClick = () => {
if (!form.address_info?.address_id) {
uni.showToast({
title: '请选择收货地址',
icon: 'none',
});
return;
}
fetchOrderbuyNow(form).then(res => {
console.log(res);
uni.redirectTo({
url: '/pages/order/detail?id=' + res.order_id,
success: res => {},
fail: () => {},
complete: () => {},
});
// navigateTo('/pages/order/detail/index?id=' + res.order_id)
});
};
</script>
<style scoped lang="scss">
.page-content {
// min-height: 100vh;
min-height: calc(100vh - 60px); //100vh;
background-color: #f2f3f5;
padding: 20rpx;
padding-bottom: 140rpx;
}
/* 信息行布局 */
.goods-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10rpx;
// border-bottom: 2rpx solid #f2f3f5;
/* 左侧文字样式 */
.left-text {
flex: 1;
}
.goods-name {
font-size: 30rpx;
color: #000000;
display: block;
margin-bottom: 8rpx;
}
.goods-no {
font-size: 26rpx;
color: #000000;
display: block;
}
/* 右侧价格样式 */
.price {
margin-left: 20rpx;
align-self: center;
/* 垂直居中在两行文字之间 */
}
}
.bottom-submit-inner {
position: fixed;
bottom: 0;
left: 0;
height: 120rpx;
background: #fff;
width: calc(100% - 40rpx);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 15rpx 20rpx;
}
.total-price-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
view:nth-child(2) {
color: #fa2c19;
}
}
</style>

428
pages/order/index.vue Normal file
View File

@@ -0,0 +1,428 @@
<template>
<view class="page-content">
<nut-dialog title="取消订单" content="确认取消吗?此操作不可恢复!" v-model:visible="visibleCancelOrderDialog"
@cancel="visibleCancelOrderDialog = false" @ok="onClickCancelOrder" />
<nut-sticky>
<nut-searchbar placeholder="请输入商品串号" clearable v-model="search_val" input-background="#eee"
@search="onSearch" @clear="onClear">
<template #rightout>
<nut-button size="small" type="primary" @click="onSearch">搜索</nut-button>
</template>
</nut-searchbar>
<nut-tabs v-model="current_tab_idx" background="#fff">
<template #titles>
<div class="title-list">
<view v-for="(item,idx) in tabs_config" :key="idx" class="title-item"
:class="{ 'tabs-active': idx === current_tab_idx }" @click="onChangeTab(item,idx)">
<view class="nut-tabs__titles-item__text">
{{item.title}}
</view>
<view class="item__line" />
</view>
</div>
</template>
</nut-tabs>
</nut-sticky>
<z-paging ref="paging" :fixed="false" style="height: 88vh;" class="order-list" v-model="dataList"
@query="apiFetchOrderList">
<view class="order-inner" v-for="(order,index) in dataList" :key="index">
<view class="order-inner-header">
<text>{{order.create_time}}</text>
<nut-tag custom-color="#1a1a1a">{{getStatusText(order)}}</nut-tag>
<!-- <text>{{order.order_no}}</text> -->
</view>
<view class="goods-info-row" v-for="(goods,iidx) in order.goods" :key="iidx"
@click="navigateToDetail(order.order_id)">
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{goods.snapshot_info.degree.degree_name}}</nut-tag>
<text style="margin-left: 10rpx;">{{goods.goods_name}}</text>
</view>
<text class="goods-no">串号：{{goods.goods_no}}</text>
</view>
<view class="price">
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
</view>
</view>
<view class="footer">
<view class="order-inner-price">
总计:<nut-price :price="order.total_price" size="normal" :need-symbol="true" />
</view>
<view class="order-inner-action" v-if="order.order_status.value === 10">
<view style="margin-left:10rpx;">
<nut-button plain size="small"
@click="visibleCancelOrderDialog = true;current_cancel_order_id=order.order_id;"
v-if="order.pay_status.value === 10 ">
取消订单
</nut-button>
</view>
<view style="margin-left:10rpx;">
<nut-button type="primary" size="small" v-if="order.pay_status.value === 10 && !audit"
@click="showPayImgs()">
点我付款
</nut-button>
</view>
<view style="margin-left:10rpx;">
<nut-button type="primary" size="small" @click="onClickReceiptOrder(order.order_id)"
v-if="order.pay_status.value === 20 && order.delivery_status.value === 20 && order.receipt_status.value === 10">
确认收货
</nut-button>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script setup>
import {
onMounted,
reactive,
ref
} from 'vue';
import {
onLoad,
onShow
} from '@dcloudio/uni-app';
import {
navigateTo,
} from '@/utils/helper';
import {
fetchCancelOrder,
fetchOrderList,
fetchReceiptOrder
} from '@/api/order';
import {
fetchGetConfig
} from '@/api/config';
// 审核模式 默认开启 true
const audit = ref(true);
// 支付码
const images = ref([]);
// 默认tab
const current_tab_idx = ref(0);
// 订单列表数据
const dataList = ref([]);
// zp
const paging = ref(null);
// 定义tab切换
const tabs_config = [{
title: '全部',
status: 'all'
},
{
title: '待付款',
status: 'payment'
},
{
title: '待发货',
status: 'delivery'
},
{
title: '待收货',
status: 'received'
},
{
title: '已完成',
status: 'finish'
}
]
// 取消订单弹窗
const visibleCancelOrderDialog = ref(false);
// 被取消订单id
const current_cancel_order_id = ref(0);
// 搜索内容
const search_val = ref('')
// tab切换
const onChangeTab = (item, idx) => {
current_tab_idx.value = idx
paging.value.reload();
// apiFetchPartsOrderList();
}
// 获取配置
const getConfig = () => {
fetchGetConfig().then(res => {
console.log('getConfig=====>', res)
audit.value = res.appConfig.is_audit == 1
console.log(res.appConfig.pay_imgs);
let pay_imgs = JSON.parse(res.appConfig.pay_imgs) || [];
let wechat_imgs = JSON.parse(res.appConfig.wechat_imgs) || [];
let pay_imgs_arr = pay_imgs.map(item => item.file_path) || [];
let wechat_imgs_arr = wechat_imgs.map(item => item.file_path) || [];
const merged_imgs_arr = pay_imgs_arr.concat(wechat_imgs_arr);
images.value = merged_imgs_arr;
})
}
// 显示支付码
const showPayImgs = () => {
if (images.value.length === 0) {
uni.showToast({
title: '暂无图片',
icon: 'none'
});
return;
}
console.log('preview images:', images);
uni.previewImage({
urls: images.value
});
}
// 跳转详情页面
const navigateToDetail = (id) => {
console.log(id);
if (!id) {
console.warn('导航ID不能为空')
return
}
uni.navigateTo({
url: `/pages/order/detail?id=${encodeURIComponent(id)}`
})
}
// 取消订单
const onClickCancelOrder = () => {
fetchCancelOrder(current_cancel_order_id.value).then(res => {
uni.showToast({
title: '取消成功',
icon: 'none'
})
paging.value.reload();
// init()
})
}
// 确认收货
const onClickReceiptOrder = (id) => {
fetchReceiptOrder(id).then(res => {
uni.showToast({
title: '确认收货成功',
icon: 'none'
})
paging.value.reload();
// init()
})
}
// 获取订单列表
const apiFetchOrderList = (pageNo = 1, pageSize = 10) => {
console.log(tabs_config[current_tab_idx.value]['status']);
const params = {
page: pageNo,
pageSize: 10,
status: tabs_config[current_tab_idx.value]['status'],
goods_no: search_val.value,
}
fetchOrderList(params).then(res => {
console.log(res);
paging.value.complete(res.list);
}).catch(res => {
paging.value.complete(false);
})
}
onLoad((options) => {
current_tab_idx.value = parseInt(options.tab)
})
/**
* 页面显示生命周期钩子
* 每次页面显示时都会执行
*/
onShow(() => {
// 获取配置
getConfig()
})
// 搜索
const onSearch = () => {
console.log("搜索：", search_val.value);
paging.value.reload();
}
// 清空搜索框
const onClear = () => {
console.log("搜索：", search_val.value);
paging.value.reload();
}
// 订单状态
const getStatusText = (order) => {
if (order.order_status.value == 20) {
return order.order_status.text
} else if (order.order_status.value == 30) {
return order.order_status.text
} else if (order.order_status.value == 10) {
if (order.pay_status.value == 10) {
return order.pay_status.text
} else if (order.pay_status.value == 20) {
if (order.delivery_status.value == 10) {
return order.delivery_status.text
} else if (order.delivery_status.value == 20) {
return order.receipt_status.text
}
}
}
}
</script>
<style scoped lang="scss">
.page-content {
min-height: 100vh;
background-color: #f2f3f5;
}
.order-list {
display: flex;
flex-direction: column;
width: 100%;
}
.order-inner {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 15rpx;
overflow: hidden;
margin: 20rpx;
.order-inner-header {
display: flex;
align-items: center;
background-color: #dcdcdc;
color: rgba(0, 0, 0, .5);
font-size: 24rpx;
justify-content: space-between;
line-height: 45rpx;
padding: 15rpx 20rpx;
}
/* 信息行布局 */
.goods-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
border-bottom: 2rpx solid #f2f3f5;
/* 左侧文字样式 */
.left-text {
flex: 1;
}
.goods-name {
font-size: 30rpx;
color: #000000;
display: block;
margin-bottom: 8rpx;
}
.goods-no {
font-size: 26rpx;
color: #000000;
display: block;
}
/* 右侧价格样式 */
.price {
margin-left: 20rpx;
align-self: center;
/* 垂直居中在两行文字之间 */
}
}
.footer {
display: flex;
flex-direction: column;
.order-inner-price {
display: flex;
justify-content: flex-end;
padding-top: 10rpx;
padding-right: 20rpx;
padding-bottom: 20rpx;
font-size: 24rpx;
align-items: center;
}
.order-inner-action {
display: flex;
padding-top: 10rpx;
padding-bottom: 30rpx;
align-items: center;
justify-content: flex-end;
}
}
}
.title-list {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
.title-item {
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
}
.tabs-active {
font-weight: bold;
color: $tabs-titles-item-active-color;
opacity: $tabs-titles-item-line-opacity;
transition: width 0.3s ease;
.item__line {
position: absolute;
bottom: -10%;
left: 50%;
overflow: hidden;
content: ' ';
border-radius: $tabs-titles-item-line-border-radius;
opacity: $tabs-titles-item-line-opacity;
transition: width 0.3s ease;
transform: translate(-50%, 0);
width: $tabs-horizontal-titles-item-active-line-width;
height: 3px;
content: ' ';
background: $tabs-horizontal-tab-line-color;
}
}
}
</style>

301
pages/order/preview.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<view class="page-content">
<nut-cell-group>
<nut-cell v-if="!form.address_info?.address_id" title="添加地址" is-link @click="chooseAddress"></nut-cell>
<nut-cell v-else :title="form.address_info.user_name + ' ' + form.address_info.tel_number" is-link
:sub-title="
form.address_info.province_name +
form.address_info.city_name +
form.address_info.county_name +
form.address_info.street_name +
form.address_info.detail_info_new
" @click="chooseAddress"></nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell v-for="(goods, index) in list" :key="index" center>
<!-- :title="item.goods_name"
:sub-title="'串号：' + item.goods_no" -->
<!-- @click="navigateTo('/pages/order/detail/index?id=' + order.order_id)" -->
<template #title>
<view class="goods-info-row">
<!-- 左侧文字区域 -->
<view class="left-text">
<view class="goods-name">
<nut-tag custom-color="#1a1a1a">{{ goods.degree.degree_name }}</nut-tag>
<text style="margin-left: 10rpx">{{ goods.goods_name }}</text>
</view>
<text class="goods-no">串号：{{ goods.goods_no }}</text>
</view>
<!-- 右侧价格区域 -->
</view>
</template>
<template #link>
<!-- <view class="price"> -->
<nut-price :price="goods.goods_price" size="small" :need-symbol="true" />
<!-- </view> -->
</template>
<!-- <view class="goods-item" @click="navigateTo('/pages/mall/item/index?id=' + item.goods_id)">
<view class="goods-item-left-inner">
<view class="goods-item-left-inner-top">
<image class="goods-item-left-inner-top-package" src="@/static/package.svg"></image>
<text class="goods-item-left-inner-title">{{item.goods_name}}</text>
</view>
<view>
<text>
{{item.content}}
</text>
</view>
</view>
<view class="goods-item-right-inner">
<text class="goods-item-right-inner-price-unit">￥</text>
<text class="goods-item-right-inner-price-value">{{item.goods_price}}</text>
</view>
</view> -->
</nut-cell>
</nut-cell-group>
<nut-cell-group>
<nut-cell>
<view class="total-price-inner">
<text>件数</text>
<text>{{ order_total_num }}件</text>
</view>
</nut-cell>
<nut-cell>
<view class="total-price-inner">
<text>商品总额</text>
<nut-price :price="order_total_price" :need-symbol="true" />
</view>
</nut-cell>
<!-- <nut-cell>
<view class="total-price-inner">
<view>
<text>邮费</text>
</view>
<view>
<text>￥</text>
<text>888</text>
</view>
</view>
</nut-cell> -->
</nut-cell-group>
<!-- <view class="bottom-submit-inner">
<view class="bottom-submit-inner-info">
<text>共计{{order_total_num}}件商品，合计：</text>
<text>￥</text>
<text>{{order_total_price}}</text>
</view>
<view class="bottom-submit-inner-btn">
<nut-button type="primary" @click="onSubmitClick">确认下单</nut-button>
</view>
</view> -->
<view class="bottom-submit-inner">
<view class="bottom-submit-inner-info">
<text>合计:</text>
<nut-price size="large" :price="order_total_price" :need-symbol="true" />
</view>
<view class="bottom-submit-inner-btn">
<nut-button type="primary" @click="onSubmitClick">确认下单</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import {
onLoad,
onShow,
onHide
} from '@dcloudio/uni-app';
import {
reactive,
ref
} from 'vue';
import {
fetchOrderbuyNow,
fetchOrderPreview
} from '@/api/order';
import {
navigateTo
} from '@/utils/helper';
const chooseAddress = () => {
uni.chooseAddress({
success(res) {
// console.log(res.userName)
// console.log(res.telNumber)
// console.log(res.provinceName + res.cityName + res.countyName + res.streetName + res.detailInfoNew)
// console.log(res.userName)
// console.log(res.postalCode)
// console.log(res.provinceName)
// console.log(res.cityName)
// console.log(res.countyName)
// console.log(res.detailInfo)
// console.log(res.nationalCode)
// console.log(res.telNumber)
console.log(res);
Object.assign(form, {
address_info: {
address_id: res.addressID || 1,
user_name: res.userName,
tel_number: res.telNumber,
city_name: res.cityName || '',
county_name: res.countyName || '',
detail_info: res.detailInfo || '',
detail_info_new: res.detailInfoNew || '',
national_code: res.nationalCode || '',
national_code_full: res.nationalCodeFull || '',
postal_code: res.postalCode || '',
province_name: res.provinceName || '',
street_name: res.streetName || '',
},
});
},
});
};
const ids = ref([]);
const list = reactive([]);
const order_total_price = ref(0);
const order_total_num = ref(0);
const form = reactive({
goods_id: 0,
address_info: {},
});
const fromStr = ref('');
onLoad(options => {
console.log('🚀 ~ from:', options.from);
fromStr.value = options.from;
console.log('🚀 ~ ids:', options.ids);
form.goods_id = options.ids;
});
onShow(() => {
console.log('🚀 ~ onShowfrom:', fromStr.value);
if (fromStr.value === 'list' || fromStr.value === 'item') {
fetchOrderPreview(form).then(res => {
Object.assign(list, res.goods_list);
Object.assign(form.address_info, res.address_info);
order_total_price.value = res.order_total_price;
order_total_num.value = res.order_total_num;
});
}
});
onHide(() => {
fromStr.value = '';
});
// 提交订单
const onSubmitClick = () => {
if (!form.address_info?.address_id) {
uni.showToast({
title: '请选择收货地址',
icon: 'none',
});
return;
}
fetchOrderbuyNow(form).then(res => {
console.log(res);
uni.redirectTo({
url: '/pages/order/detail?id=' + res.order_id,
success: res => {},
fail: () => {},
complete: () => {},
});
// navigateTo('/pages/order/detail/index?id=' + res.order_id)
});
};
</script>
<style scoped lang="scss">
.page-content {
// min-height: 100vh;
min-height: calc(100vh - 60px); //100vh;
background-color: #f2f3f5;
padding: 20rpx;
padding-bottom: 140rpx;
}
/* 信息行布局 */
.goods-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10rpx;
// border-bottom: 2rpx solid #f2f3f5;
/* 左侧文字样式 */
.left-text {
flex: 1;
}
.goods-name {
font-size: 30rpx;
color: #000000;
display: block;
margin-bottom: 8rpx;
}
.goods-no {
font-size: 26rpx;
color: #000000;
display: block;
}
/* 右侧价格样式 */
.price {
margin-left: 20rpx;
align-self: center;
/* 垂直居中在两行文字之间 */
}
}
.bottom-submit-inner {
position: fixed;
bottom: 0;
left: 0;
height: 120rpx;
background: #fff;
width: calc(100% - 40rpx);
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 auto;
padding: 15rpx 20rpx;
}
.total-price-inner {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
view:nth-child(2) {
color: #fa2c19;
}
}
</style>

22
pages/webview/index.vue- Normal file
View File

@@ -0,0 +1,22 @@
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app'
const url = ref('')
onLoad((val) => {
url.value = val.url
})
</script>
<style lang="scss">
</style>