diff --git a/components/shopListPopup.vue b/components/shopListPopup.vue
index 787a414..a4d6521 100644
--- a/components/shopListPopup.vue
+++ b/components/shopListPopup.vue
@@ -27,7 +27,7 @@
</view>
</view>
</scroll-view>
- <up-button color="#20B128" shape="circle" @click="submitAddress">确认自点</up-button>
+ <up-button color="#20B128" shape="circle" @click="submitAddress">确认提货点 </up-button>
</view>
</up-popup>
</template>
@@ -56,8 +56,8 @@
}
const submitAddress = () => {
- let e = props.list.find(item=>item.mer_id==addressType.value);
- if(addressType.value<=0 || !e) return uni.$u.toast('请选择提货点');
+ let e = props.list.find(item => item.mer_id == addressType.value);
+ if (addressType.value <= 0 || !e) return uni.$u.toast('请选择提货点');
emit('change', e);
}
@@ -71,13 +71,13 @@
url: url
})
}
-
- const setCheck = (e)=>{
- addressType.value = e;
- }
- defineExpose({
- setCheck
- })
+
+ const setCheck = (e) => {
+ addressType.value = e;
+ }
+ defineExpose({
+ setCheck
+ })
</script>
<style scoped lang="scss">
diff --git a/pageQuota/Balance/bindAccout.vue b/pageQuota/Balance/bindAccout.vue
new file mode 100644
index 0000000..c596d7c
--- /dev/null
+++ b/pageQuota/Balance/bindAccout.vue
@@ -0,0 +1,15 @@
+<template>
+ <view class="content">
+ <view class="head">
+ <!-- -->
+ </view>
+
+
+ </view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/pageQuota/Balance/detail.vue b/pageQuota/Balance/detail.vue
new file mode 100644
index 0000000..e8f3168
--- /dev/null
+++ b/pageQuota/Balance/detail.vue
@@ -0,0 +1,11 @@
+<template>
+ <view class="">
+ 明细
+ </view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/pageQuota/Balance/index.vue b/pageQuota/Balance/index.vue
new file mode 100644
index 0000000..6c68464
--- /dev/null
+++ b/pageQuota/Balance/index.vue
@@ -0,0 +1,165 @@
+<template>
+ <view class="content">
+ <view class="total">
+ <view class="">
+ 账户总余额(元)
+ </view>
+ <view style="font-size: 36rpx;">
+ ￥1860.00
+ </view>
+ </view>
+ <view class="action">
+ <view class="">
+ 提现至
+ </view>
+ <view style="font-weight: bold;">
+ 请选择提现账户
+ </view>
+ <view style="display: flex;align-items: center;color: #20B128;"
+ @click="navgo('/pageQuota/Balance/bindAccout')">
+ <text>绑定账户</text> <up-icon color="#20B128" name="arrow-right"></up-icon>
+ </view>
+ </view>
+ <view class="form">
+
+ <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
+ <up-form labelPosition="left" borderBottom :label-style="{fontSize:'30rpx'}" :model="model1" :rules="rules"
+ ref="form1" labelWidth='70'>
+ <up-form-item label="银行卡" prop="userInfo.name" borderBottom ref="item1">
+ <template #right>
+ <view style="display: flex;align-items: center;">
+ <text style="color: #20B128;">选择银行</text> <up-icon color="#20B128"
+ name="arrow-right"></up-icon>
+ </view>
+ </template>
+ </up-form-item>
+ <up-form-item label="持卡人" prop="userInfo.name" borderBottom ref="item1">
+ <up-input style="border: none;" v-model="form.name" placeholder="请输入持卡人姓名" />
+ </up-form-item>
+ <up-form-item label="银行账户" prop="userInfo.name" borderBottom ref="item1">
+ <up-input style="border: none;" v-model="form.name" placeholder="请输入银行账户" />
+ </up-form-item>
+ <up-form-item label="开户网点" prop="userInfo.name" borderBottom ref="item1">
+ <up-input style="border: none;" v-model="form.name" placeholder="请输入开户网点" />
+ </up-form-item>
+ <up-form-item label="提现金额" prop="userInfo.name" borderBottom ref="item1">
+ <up-input style="border: none;" v-model="form.name" placeholder="请输入提现金额" />
+ </up-form-item>
+ </up-form>
+ </view>
+
+ <view class="submit-btn">
+ <up-button text="提现" shape="circle" color="#50C758"></up-button>
+ </view>
+ </view>
+</template>
+
+<script setup>
+ import {
+ ref,
+ reactive
+ } from 'vue';
+
+
+ const navgo = (url) => {
+ uni.navigateTo({
+ url
+ })
+
+
+ }
+
+ const form = reactive({
+ name: ""
+ })
+
+ // 使用 reactive 创建响应式状态
+ const state = reactive({
+ showSex: false,
+ model1: {
+ userInfo: {
+ name: 'uview-plus UI',
+ sex: '',
+ },
+ },
+ actions: [{
+ name: '男'
+ },
+ {
+ name: '女'
+ },
+ {
+ name: '保密'
+ },
+ ],
+ rules: {
+ 'userInfo.name': {
+ type: 'string',
+ required: true,
+ message: '请填写姓名',
+ trigger: ['blur', 'change'],
+ },
+ 'userInfo.sex': {
+ type: 'string',
+ max: 1,
+ required: true,
+ message: '请选择男或女',
+ trigger: ['blur', 'change'],
+ },
+ },
+ radio: '',
+ switchVal: false,
+ });
+
+ // 使用 ref 创建响应式引用
+ const formRef = ref(null);
+
+ // 定义方法
+ function sexSelect(e) {
+ state.model1.userInfo.sex = e.name;
+ if (formRef.value) {
+ formRef.value.validateField('userInfo.sex');
+ }
+ }
+</script>
+
+<style lang="scss">
+ .content {
+ padding: 20rpx;
+
+ .total {
+ background-color: #50C758;
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ padding: 42rpx 30rpx;
+ font-size: 30rpx;
+ margin-bottom: 30rpx;
+ }
+
+ .action {
+ background-color: white;
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
+ padding: 30rpx;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 30rpx;
+ }
+
+ .form {
+ padding: 28rpx 30rpx;
+ background-color: white;
+ border-radius: 20rpx;
+ }
+
+ }
+
+ .submit-btn {
+ position: fixed;
+ bottom: 146rpx;
+ width: 710rpx;
+
+
+ }
+</style>
\ No newline at end of file
diff --git a/pageQuota/quotation/index.vue b/pageQuota/quotation/index.vue
index d7a9ac5..25805d7 100644
--- a/pageQuota/quotation/index.vue
+++ b/pageQuota/quotation/index.vue
@@ -58,10 +58,17 @@
v-model="item.price"></up-input>
</view>
</view>
- <view class="status-png" v-if="tabIndex==2">
- <image :src="item.is_adopt?successPng:errPng" style="width: 108rpx; height: 84rpx;">
+ <!-- <view class="status-png" v-if="tabIndex==2">
+ <image v-if="is_storage==1 && is_adopt == 1" :src="waitPng"
+ style="width: 108rpx; height: 84rpx;">
</image>
- </view>
+ <image v-else-if="is_storage==0 && is_adopt == 1" :src="waitPng"
+ style="width: 108rpx; height: 84rpx;">
+ </image>
+ <image v-else :src="waitPng" style="width: 108rpx; height: 84rpx;">
+ </image>
+
+ </view> -->
</view>
<view class="card-footer" v-if="item.nums && item.price">
共{{item.nums}}{{item.unit_name}} 合计:<text
@@ -114,7 +121,15 @@
</view>
</view>
<view class="status-png" v-if="tabIndex==2">
- <image :src="item.is_adopt?successPng:errPng" style="width: 108rpx; height: 84rpx;">
+ <!-- <image :src="item.is_adopt?successPng:errPng" style="width: 108rpx; height: 84rpx;">
+ </image> -->
+ <image v-if="is_storage==1 && is_adopt == 1" :src="successPng"
+ style="width: 108rpx; height: 84rpx;">
+ </image>
+ <image v-else-if="is_storage==0 && is_adopt == 1" :src="errPng"
+ style="width: 108rpx; height: 84rpx;">
+ </image>
+ <image v-else :src="waitPng" style="width: 108rpx; height: 84rpx;">
</image>
</view>
</view>
@@ -160,6 +175,8 @@
// 状态图片url
const successPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png')
const errPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png')
+ const waitPng = ref('https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png')
+
// 状态图片url结束
diff --git a/pages.json b/pages.json
index 05fd934..077abba 100644
--- a/pages.json
+++ b/pages.json
@@ -110,6 +110,26 @@
"navigationBarTitleText": "关于我们",
"enablePullDownRefresh": false
}
+ }, {
+ "path": "Balance/index",
+ "style": {
+ "navigationBarTitleText": "我的余额",
+ "enablePullDownRefresh": false
+ }
+ },
+ {
+ "path": "Balance/bindAccout",
+ "style": {
+ "navigationBarTitleText": "绑定账户",
+ "enablePullDownRefresh": false
+ }
+ },
+ {
+ "path": "Balance/detail",
+ "style": {
+ "navigationBarTitleText": "明细",
+ "enablePullDownRefresh": false
+ }
},
{
"path": "feedBack/index",
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 89e1309..4744b47 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,851 +1,856 @@
<template>
- <view class="content">
- <up-navbar placeholder style="z-index: 10080;">
- <template #left>
- <view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发 </view>
- </template>
- </up-navbar>
- <view class="navbar">
- <view style="width: 500rpx;">
- <up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
- :showAction="false"></up-search>
- </view>
- <view class="nav-item" @click="navTo('/pages/cart/cart')">
- <image src="@/static/tab/ba.png"></image>
- <text>购物车</text>
- </view>
- <view class="nav-item" @click="navTo('/pages/my/my')">
- <image src="@/static/tab/ca.png"></image>
- <text>个人中心</text>
- </view>
- </view>
- <view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
- <scroll-view class="head-view" scroll-x>
- <view class="list">
- <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
- :key="index" @click="changeOne(item, index)">
- <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
- <view class="c-text u-line-1">{{item.name}}</view>
- </view>
- <view class="item" style="width: 80rpx;height: 20rpx;">
- </view>
- </view>
- </scroll-view>
- <view class="r-btn" @click="show=1">
- <view>全</view>
- <view>部</view>
- <up-icon name="list"></up-icon>
- </view>
- </view>
- <viewPopup nav v-if="show===1" @close="show=0">
- <view class="cateOne">
- <view class="head-title">全部分类</view>
- <scroll-view scroll-y style="height: 600rpx;">
- <view class="list">
- <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
- :key="index" @click="changeOne(item, index)">
- <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
- </view>
- <view class="c-text u-line-1">{{item.name}}</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </viewPopup>
- <view class="scroll-box">
- <scroll-view class="left" scroll-y>
- <view class="item u-line-1" :class="{'item-active': leftActive===item.id}" v-for="(item, index) in goodClassTow"
- :key="index" @click="changeTwo(item, index)">{{item.name}}
- </view>
- <view style="width: 100%;height: 450rpx;"></view>
- </scroll-view>
- <view class="right">
- <view class="classify">
- <scroll-view style="height: 90rpx;" scroll-x>
- <view class="classify-list">
- <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
- v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
- {{item.name}}
- </view>
- <view style="width: 70rpx;flex-shrink: 0;"></view>
- </view>
- </scroll-view>
- <view class="done" @click="show=2">
- <up-icon name="arrow-down"></up-icon>
- </view>
- <view class="order-by">
- <view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
- <view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
- @click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
- <view class="item" :class="{'order-active': where.order=='sales'}" @click="changeOrder('sales')">销量</view>
- </view>
- </view>
- <viewPopup v-if="show===2" @close="show=0">
- <view class="cateOne">
- <scroll-view scroll-y style="height: 230rpx;">
- <view class="classify-list">
- <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
- v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
- {{item.name}}
- </view>
- </view>
- </scroll-view>
- </view>
- </viewPopup>
- <scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView" scroll-y
- @scrolltolower="loadMoreGood">
- <view class="shop-item" v-for="(item, index) in goodList" :key="item.id" @click="openGoodPopup(item)">
- <view class="shop-img">
- <up-image width="120rpx" height="120rpx" :src="item.imgs"></up-image>
- </view>
- <view class="shop-content">
- <view class="title">
- <view class="name u-line-2">{{item.name}}</view>
- <view class="tip u-line-1">
- <text>{{item.brand_name}}|</text>
- <text>{{item.class_name}}|</text>
- <text>{{item.unit_name}}</text>
- </view>
- </view>
- <view class="price-btn">
- <view class="price">￥{{item.sell}}</view>
- <view class="btn">
- <u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
- </view>
- </view>
- </view>
- </view>
- <view style="width: 100%;height: 350rpx;"></view>
- </scroll-view>
- </view>
- </view>
- <view class="fiexd-btn-box">
- <view class="price-info">
- <view class="row">
- <view>合计</view>
- <view class="price">¥<text style="font-size: 36rpx;">{{cartInfo.total_price}}</text></view>
- </view>
- <!-- <view class="row">
+ <view class="content">
+ <up-navbar placeholder style="z-index: 10080;">
+ <template #left>
+ <view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发 </view>
+ </template>
+ </up-navbar>
+ <view class="navbar">
+ <view style="width: 500rpx;">
+ <up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
+ :showAction="false"></up-search>
+ </view>
+ <view class="nav-item" @click="navTo('/pages/cart/cart')">
+ <image src="@/static/tab/ba.png"></image>
+ <text>购物车</text>
+ </view>
+ <view class="nav-item" @click="navTo('/pages/my/my')">
+ <image src="@/static/tab/ca.png"></image>
+ <text>个人中心</text>
+ </view>
+ </view>
+ <view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
+ <scroll-view class="head-view" scroll-x>
+ <view class="list">
+ <view class="item" :class="{'item-active': topActive===item.id}"
+ v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
+ <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
+ <view class="c-text u-line-1">{{item.name}}</view>
+ </view>
+ <view class="item" style="width: 80rpx;height: 20rpx;">
+ </view>
+ </view>
+ </scroll-view>
+ <view class="r-btn" @click="show=1">
+ <view>全</view>
+ <view>部</view>
+ <up-icon name="list"></up-icon>
+ </view>
+ </view>
+ <viewPopup nav v-if="show===1" @close="show=0">
+ <view class="cateOne">
+ <view class="head-title">全部分类</view>
+ <scroll-view scroll-y style="height: 600rpx;">
+ <view class="list">
+ <view class="item" :class="{'item-active': topActive===item.id}"
+ v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
+ <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
+ </view>
+ <view class="c-text u-line-1">{{item.name}}</view>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </viewPopup>
+ <view class="scroll-box">
+ <scroll-view class="left" scroll-y>
+ <view class="item u-line-1" :class="{'item-active': leftActive===item.id}"
+ v-for="(item, index) in goodClassTow" :key="index" @click="changeTwo(item, index)">{{item.name}}
+ </view>
+ <view style="width: 100%;height: 450rpx;"></view>
+ </scroll-view>
+ <view class="right">
+ <view class="classify">
+ <scroll-view style="height: 90rpx;" scroll-x>
+ <view class="classify-list">
+ <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
+ v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
+ {{item.name}}
+ </view>
+ <view style="width: 70rpx;flex-shrink: 0;"></view>
+ </view>
+ </scroll-view>
+ <view class="done" @click="show=2">
+ <up-icon name="arrow-down"></up-icon>
+ </view>
+ <view class="order-by">
+ <view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
+ <view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
+ @click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
+ <view class="item" :class="{'order-active': where.order=='sales'}"
+ @click="changeOrder('sales')">销量</view>
+ </view>
+ </view>
+ <viewPopup v-if="show===2" @close="show=0">
+ <view class="cateOne">
+ <scroll-view scroll-y style="height: 230rpx;">
+ <view class="classify-list">
+ <view class="classify-list-item u-line-1"
+ :class="{'item-active': rightActive===item.id}"
+ v-for="(item, index) in goodClassThree" :key="index"
+ @click="changeThree(item, index)">
+ {{item.name}}
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </viewPopup>
+ <scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView"
+ scroll-y @scrolltolower="loadMoreGood">
+ <view class="shop-item" v-for="(item, index) in goodList" :key="item.id"
+ @click="openGoodPopup(item)">
+ <view class="shop-img">
+ <up-image width="120rpx" height="120rpx" :src="item.imgs"></up-image>
+ </view>
+ <view class="shop-content">
+ <view class="title">
+ <view class="name u-line-2">{{item.name}}</view>
+ <view class="tip u-line-1">
+ <text>{{item.spec}}</text>
+ <!-- <text>{{item.brand_name}}|</text> -->
+ <!-- <text>{{item.class_name}}|</text> -->
+ <!-- <text>{{item.unit_name}}</text> -->
+ </view>
+ </view>
+ <view class="price-btn">
+ <view class="price">￥{{item.sell}}</view>
+ <view class="btn">
+ <u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view style="width: 100%;height: 350rpx;"></view>
+ </scroll-view>
+ </view>
+ </view>
+ <view class="fiexd-btn-box">
+ <view class="price-info">
+ <view class="row">
+ <view>合计</view>
+ <view class="price">¥<text style="font-size: 36rpx;">{{cartInfo.total_price}}</text></view>
+ </view>
+ <!-- <view class="row">
<view style="color: #777;">原价 ¥50.00</view>
<view class="price">优惠 ¥0.00</view>
</view> -->
- </view>
- <view class="btn">
- <up-button color="#20b128" :disabled="cartInfo.count==0" @click="settleAccounts">结算</up-button>
- </view>
- <view class="cart" @click="navTo('/pages/cart/cart')">
- <image src="@/static/icon/cart.png"></image>
- <view class="badge">{{cartInfo.count}}</view>
- </view>
- </view>
+ </view>
+ <view class="btn">
+ <up-button color="#20b128" :disabled="cartInfo.count==0" @click="settleAccounts">结算</up-button>
+ </view>
+ <view class="cart" @click="navTo('/pages/cart/cart')">
+ <image src="@/static/icon/cart.png"></image>
+ <view class="badge">{{cartInfo.count}}</view>
+ </view>
+ </view>
- <goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
- </view>
+ <goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
+ </view>
</template>
<script setup>
- import {
- onLoad,
- onShow
- } from "@dcloudio/uni-app"
- import {
- reactive,
- ref,
- onMounted
- } from "vue"
- import {
- goodListApi,
- goodClassListApi
- } from "@/api/good.js"
- import {
- cartCreateApi,
- cartChangeApi,
- cartListApi
- } from "@/api/cart.js"
- import viewPopup from "@/components/viewPopup.vue"
- import goodPopup from "@/components/goodPopup.vue"
- import useCartStore from "@/store/cart.js"
- import {
- getCurrentInstance
- } from 'vue';
+ import {
+ onLoad,
+ onShow
+ } from "@dcloudio/uni-app"
+ import {
+ reactive,
+ ref,
+ onMounted
+ } from "vue"
+ import {
+ goodListApi,
+ goodClassListApi
+ } from "@/api/good.js"
+ import {
+ cartCreateApi,
+ cartChangeApi,
+ cartListApi
+ } from "@/api/cart.js"
+ import viewPopup from "@/components/viewPopup.vue"
+ import goodPopup from "@/components/goodPopup.vue"
+ import useCartStore from "@/store/cart.js"
+ import {
+ getCurrentInstance
+ } from 'vue';
- const test = () => {
- uni.navigateTo({
- url: '/pageQuota/quotation/index'
- })
- }
+ const test = () => {
+ uni.navigateTo({
+ url: '/pageQuota/quotation/index'
+ })
+ }
- /*商品列表滚动隐藏头部导航 */
- const instance = getCurrentInstance(); // 获取组件实例
- const targetHeight = ref(0)
- const isScroll = ref(false)
- let lastScollTop = 0
- const hideHeadView = (e) => {
- if (e.detail.scrollTop <= 0 || e.detail.scrollTop >= targetHeight.value) return
- isScroll.value = e.detail.scrollTop > lastScollTop
- lastScollTop = e.detail.scrollTop
+ /*商品列表滚动隐藏头部导航 */
+ const instance = getCurrentInstance(); // 获取组件实例
+ const targetHeight = ref(0)
+ const isScroll = ref(false)
+ let lastScollTop = 0
+ const hideHeadView = (e) => {
+ if (e.detail.scrollTop <= 0 || e.detail.scrollTop >= targetHeight.value) return
+ isScroll.value = e.detail.scrollTop > lastScollTop
+ lastScollTop = e.detail.scrollTop
- }
- /*商品列表滚动隐藏头部导航结束 */
+ }
+ /*商品列表滚动隐藏头部导航结束 */
- const cartStore = useCartStore();
- const show = ref(0);
- const topActive = ref(0);
- const changeOne = async (item, index) => {
- console.log('选择', item, index);
- topActive.value = item.id;
- show.value = 0;
- goodClassTow.value = item?.children || [];
- goodClassThree.value = goodClassTow.value[0]?.children || [];
- leftActive.value = goodClassTow.value[0]?.id || '';
- rightActive.value = goodClassThree.value[0]?.id || '';
- getGoodList();
- if(!item.isLoading) getgoodClassList(topActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
- }
+ const cartStore = useCartStore();
+ const show = ref(0);
+ const topActive = ref(0);
+ const changeOne = async (item, index) => {
+ console.log('选择', item, index);
+ topActive.value = item.id;
+ show.value = 0;
+ goodClassTow.value = item?.children || [];
+ goodClassThree.value = goodClassTow.value[0]?.children || [];
+ leftActive.value = goodClassTow.value[0]?.id || '';
+ rightActive.value = goodClassThree.value[0]?.id || '';
+ getGoodList();
+ if (!item.isLoading) getgoodClassList(topActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
+ }
- const leftActive = ref(0);
- const changeTwo = (item, index) => {
- console.log('选择', item, index);
- leftActive.value = item.id;
- show.value = 0;
- goodClassThree.value = item?.children || [];
- rightActive.value = goodClassThree.value[0]?.id || '';
- getGoodList();
- if(!item.isLoading) getgoodClassList(leftActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
- }
+ const leftActive = ref(0);
+ const changeTwo = (item, index) => {
+ console.log('选择', item, index);
+ leftActive.value = item.id;
+ show.value = 0;
+ goodClassThree.value = item?.children || [];
+ rightActive.value = goodClassThree.value[0]?.id || '';
+ getGoodList();
+ if (!item.isLoading) getgoodClassList(leftActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
+ }
- const rightActive = ref(0);
- const changeThree = (item, index) => {
- console.log('选择', item, index);
- rightActive.value = item.id;
- show.value = 0;
- getGoodList();
- }
+ const rightActive = ref(0);
+ const changeThree = (item, index) => {
+ console.log('选择', item, index);
+ rightActive.value = item.id;
+ show.value = 0;
+ getGoodList();
+ }
- const addCart = (id, cart_num) => { //加入购物车
- cartCreateApi({
- cart_num: cart_num,
- is_new: 0, // 是否直接购买0否1是
- goods_id: id
- }).then(res => {
- getCartList();
- }).catch(err => {
- console.log(err);
- uni.$u.toast('添加失败')
- })
- }
+ const addCart = (id, cart_num) => { //加入购物车
+ cartCreateApi({
+ cart_num: cart_num,
+ is_new: 0, // 是否直接购买0否1是
+ goods_id: id
+ }).then(res => {
+ getCartList();
+ }).catch(err => {
+ console.log(err);
+ uni.$u.toast('添加失败')
+ })
+ }
- const keyword = ref('');
+ const keyword = ref('');
- const searchKeyword = () => {
- where.value.name = keyword.value;
- getGoodList();
- }
+ const searchKeyword = () => {
+ where.value.name = keyword.value;
+ getGoodList();
+ }
- const changeOrder = (order) => {
- console.log('排序', order);
- where.value.order = order;
- getGoodList();
- }
+ const changeOrder = (order) => {
+ console.log('排序', order);
+ where.value.order = order;
+ getGoodList();
+ }
- const where = ref({
- page_no: 1,
- page_size: 25,
- name: '',
- order: ''
- })
- const loading = ref(true);
- const goodList = ref([]);
- const getGoodList = (loadmore = false) => {
- loading.value = true;
- let class_id = rightActive.value || leftActive.value || topActive.value || '';
- let class_all = '';
- // 若分类没有选中时,则直接查询上一级分类
- if (rightActive.value == '') class_all = leftActive.value;
- if (leftActive.value == '') class_all = topActive.value;
- if (topActive.value == '') class_all = '';
- if (class_all) class_id = ""; //只能带其中一个
- if (loadmore) where.value.page_no++;
- else where.value.page_no = 1;
- goodListApi({
- ...where.value,
- class_all: class_all,
- class: class_id
- }).then(res => {
- if (loadmore) goodList.value.push(...res.data.lists);
- else goodList.value = res.data.lists;
- })
- }
+ const where = ref({
+ page_no: 1,
+ page_size: 25,
+ name: '',
+ order: ''
+ })
+ const loading = ref(true);
+ const goodList = ref([]);
+ const getGoodList = (loadmore = false) => {
+ loading.value = true;
+ let class_id = rightActive.value || leftActive.value || topActive.value || '';
+ let class_all = '';
+ // 若分类没有选中时,则直接查询上一级分类
+ if (rightActive.value == '') class_all = leftActive.value;
+ if (leftActive.value == '') class_all = topActive.value;
+ if (topActive.value == '') class_all = '';
+ if (class_all) class_id = ""; //只能带其中一个
+ if (loadmore) where.value.page_no++;
+ else where.value.page_no = 1;
+ goodListApi({
+ ...where.value,
+ class_all: class_all,
+ class: class_id
+ }).then(res => {
+ if (loadmore) goodList.value.push(...res.data.lists);
+ else goodList.value = res.data.lists;
+ })
+ }
- // 商品列表触底
- const loadMoreGood = () => {
- console.log('触底了');
- getGoodList(true);
- }
+ // 商品列表触底
+ const loadMoreGood = () => {
+ console.log('触底了');
+ getGoodList(true);
+ }
- const goodClassList = ref([]); // 一级分类
- const goodClassTow = ref([]); // 二级分类
- const goodClassThree = ref([]); // 三级分类
- const getgoodClassList = (pid = 0) => {
- goodClassListApi({
- pid: pid,
- page_size: 10000
- }).then(res => {
- if (pid == 0) { // 加载一级分类时设置全部分类
- res.data?.lists?.unshift({
- id: "",
- name: "全部",
- pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
- children: []
- })
- res.data.lists = res.data.lists.map(item => {
- if (!item.children) item.children = [];
- item.children?.unshift({
- id: "",
- pid: item.id, //子分类的全部选项其实就是它本身
- name: "全部",
- })
- item.children = item.children.map(t => {
- if (!t.children) t.children = [];
- t.children?.unshift({
- id: "",
- pid: t.id,
- name: "全部",
- })
- return t;
- })
- return item;
- })
- // 给所有子级分配
- goodClassList.value = res.data?.lists || [];
- goodClassTow.value = goodClassList.value[0]?.children || [];
- goodClassThree.value = goodClassTow.value[0]?.children || [];
- topActive.value = goodClassList.value[0]?.id;
- leftActive.value = goodClassTow.value[0]?.id;
- rightActive.value = goodClassThree.value[0]?.id;
- } else {
- let flag = 1;
- goodClassList.value.forEach(item => { // 给相应的一级分类添加子菜单
- if (item.id == pid) {
- if (!item.children) {
- item.children = [];
- item.children.unshift({
- id: "",
- pid: item.id,
- name: "全部",
- })
- }
- item.children = [...item.children, ...res.data.lists];
- item.isLoading = true;
- goodClassTow.value = item.children;
- flag = 0;
- }
- })
- if (flag) goodClassTow.value.forEach(item => { //给响应的二级子分类添加菜单
- if (item.id == pid) {
- if (!item.children) {
- item.children = [];
- item.children.unshift({
- id: "",
- pid: item.id,
- name: "全部",
- })
- }
- item.children = [...item.children, ...res.data.lists];
- item.isLoading = true;
- goodClassThree.value = item.children;
- }
- })
- }
- })
- }
+ const goodClassList = ref([]); // 一级分类
+ const goodClassTow = ref([]); // 二级分类
+ const goodClassThree = ref([]); // 三级分类
+ const getgoodClassList = (pid = 0) => {
+ goodClassListApi({
+ pid: pid,
+ page_size: 10000
+ }).then(res => {
+ if (pid == 0) { // 加载一级分类时设置全部分类
+ res.data?.lists?.unshift({
+ id: "",
+ name: "全部",
+ pic: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png",
+ children: []
+ })
+ res.data.lists = res.data.lists.map(item => {
+ if (!item.children) item.children = [];
+ item.children?.unshift({
+ id: "",
+ pid: item.id, //子分类的全部选项其实就是它本身
+ name: "全部",
+ })
+ item.children = item.children.map(t => {
+ if (!t.children) t.children = [];
+ t.children?.unshift({
+ id: "",
+ pid: t.id,
+ name: "全部",
+ })
+ return t;
+ })
+ return item;
+ })
+ // 给所有子级分配
+ goodClassList.value = res.data?.lists || [];
+ goodClassTow.value = goodClassList.value[0]?.children || [];
+ goodClassThree.value = goodClassTow.value[0]?.children || [];
+ topActive.value = goodClassList.value[0]?.id;
+ leftActive.value = goodClassTow.value[0]?.id;
+ rightActive.value = goodClassThree.value[0]?.id;
+ } else {
+ let flag = 1;
+ goodClassList.value.forEach(item => { // 给相应的一级分类添加子菜单
+ if (item.id == pid) {
+ if (!item.children) {
+ item.children = [];
+ item.children.unshift({
+ id: "",
+ pid: item.id,
+ name: "全部",
+ })
+ }
+ item.children = [...item.children, ...res.data.lists];
+ item.isLoading = true;
+ goodClassTow.value = item.children;
+ flag = 0;
+ }
+ })
+ if (flag) goodClassTow.value.forEach(item => { //给响应的二级子分类添加菜单
+ if (item.id == pid) {
+ if (!item.children) {
+ item.children = [];
+ item.children.unshift({
+ id: "",
+ pid: item.id,
+ name: "全部",
+ })
+ }
+ item.children = [...item.children, ...res.data.lists];
+ item.isLoading = true;
+ goodClassThree.value = item.children;
+ }
+ })
+ }
+ })
+ }
- const navTo = (url) => {
- uni.navigateTo({
- url: url
- })
- }
+ const navTo = (url) => {
+ uni.navigateTo({
+ url: url
+ })
+ }
- // 选择商品相关
- const showGoodPopup = ref(false);
- const goodRef = ref(null);
- const goodData = ref({});
- const openGoodPopup = (item) => { // 打开数量/重量弹窗
- goodData.value = item;
- goodRef.value.setData(item);
- showGoodPopup.value = true;
- };
- const changeGood = (data) => { // 确定选择商品重量
- showGoodPopup.value = false;
- addCart(data.id, data.cart_num);
- }
- // 结算
- const settleAccounts = () => {
- uni.navigateTo({
- url: '/pagesOrder/settle/settle'
- })
- }
+ // 选择商品相关
+ const showGoodPopup = ref(false);
+ const goodRef = ref(null);
+ const goodData = ref({});
+ const openGoodPopup = (item) => { // 打开数量/重量弹窗
+ goodData.value = item;
+ goodRef.value.setData(item);
+ showGoodPopup.value = true;
+ };
+ const changeGood = (data) => { // 确定选择商品重量
+ showGoodPopup.value = false;
+ addCart(data.id, data.cart_num);
+ }
+ // 结算
+ const settleAccounts = () => {
+ uni.navigateTo({
+ url: '/pagesOrder/settle/settle'
+ })
+ }
- // 购物车相关
- const cartInfo = ref({
- total_price: '0.00',
- count: 0
- })
- const getCartList = (res) => {
- cartListApi({
- page_no: 1,
- page_size: 100,
- }).then(res => {
- cartInfo.value = {
- total_price: res.data?.extend?.total_price || '0.00',
- count: res.data?.count || 0
- }
- cartStore.setCartList(res.data?.lists.map(item => item.cart_id))
- })
- }
+ // 购物车相关
+ const cartInfo = ref({
+ total_price: '0.00',
+ count: 0
+ })
+ const getCartList = (res) => {
+ cartListApi({
+ page_no: 1,
+ page_size: 100,
+ }).then(res => {
+ cartInfo.value = {
+ total_price: res.data?.extend?.total_price || '0.00',
+ count: res.data?.count || 0
+ }
+ cartStore.setCartList(res.data?.lists.map(item => item.cart_id))
+ })
+ }
- onLoad(() => {
- getgoodClassList();
- getGoodList();
+ onLoad(() => {
+ getgoodClassList();
+ getGoodList();
- })
- onShow(() => {
- getCartList();
- })
- onMounted(() => {
- const instance = getCurrentInstance(); // 获取组件实例
- const getWXDom = () => {
- let query = uni.createSelectorQuery().in(instance).select("#drag_area");
- query
- .fields({
- size: true,
- scrollOffset: true,
- },
- (data) => {
- targetHeight.value = data.scrollHeight - data.height
- }
- )
- .exec();
- }
- setTimeout(() => {
- getWXDom()
- }, 500)
+ })
+ onShow(() => {
+ getCartList();
+ })
+ onMounted(() => {
+ const instance = getCurrentInstance(); // 获取组件实例
+ const getWXDom = () => {
+ let query = uni.createSelectorQuery().in(instance).select("#drag_area");
+ query
+ .fields({
+ size: true,
+ scrollOffset: true,
+ },
+ (data) => {
+ targetHeight.value = data.scrollHeight - data.height
+ }
+ )
+ .exec();
+ }
+ setTimeout(() => {
+ getWXDom()
+ }, 500)
- })
+ })
</script>
<style lang="scss">
- .content {
- background-color: #fff;
- }
+ .content {
+ background-color: #fff;
+ }
- .navbar {
- padding: 0 20rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 22rpx;
- color: #777;
+ .navbar {
+ padding: 0 20rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 22rpx;
+ color: #777;
- .nav-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+ .nav-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
- image {
- height: 40rpx;
- width: 40rpx;
- }
- }
- }
+ image {
+ height: 40rpx;
+ width: 40rpx;
+ }
+ }
+ }
- .head-view {
- background-color: #fff;
- height: 180rpx;
- width: 750rpx;
+ .head-view {
+ background-color: #fff;
+ height: 180rpx;
+ width: 750rpx;
- .list {
- height: 100%;
- display: flex;
- align-items: center;
- padding: 0 20rpx;
- font-size: 22rpx;
+ .list {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 20rpx;
+ font-size: 22rpx;
- .item {
- width: 120rpx;
- flex-shrink: 0;
- margin-right: 20rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
+ .item {
+ width: 120rpx;
+ flex-shrink: 0;
+ margin-right: 20rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
- .c-img {
- height: 100rpx;
- width: 100rpx;
- flex-shrink: 0;
- border-radius: 50%;
- border: 2px solid transparent;
- overflow: hidden;
- }
+ .c-img {
+ height: 100rpx;
+ width: 100rpx;
+ flex-shrink: 0;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ overflow: hidden;
+ }
- .c-text {
- width: 100%;
- text-align: center;
- box-sizing: border-box;
- padding: 2rpx 4rpx 3rpx 4rpx;
- border-radius: 50rpx;
- margin-top: 5rpx;
- }
- }
+ .c-text {
+ width: 100%;
+ text-align: center;
+ box-sizing: border-box;
+ padding: 2rpx 4rpx 3rpx 4rpx;
+ border-radius: 50rpx;
+ margin-top: 5rpx;
+ }
+ }
- .item-active {
- .c-img {
- border: 2px solid #20b128;
- }
+ .item-active {
+ .c-img {
+ border: 2px solid #20b128;
+ }
- .c-text {
- background-color: #20b128;
- color: #fff;
- }
- }
- }
- }
+ .c-text {
+ background-color: #20b128;
+ color: #fff;
+ }
+ }
+ }
+ }
- .r-btn {
- position: absolute;
- right: 0;
- top: 0;
- height: 100%;
- width: 60rpx;
- font-size: 24rpx;
- background-color: #fff;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
- }
+ .r-btn {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ width: 60rpx;
+ font-size: 24rpx;
+ background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow: -10rpx 0 60rpx 1rpx rgba(0, 0, 0, 0.3);
+ }
- .cateOne {
- background-color: #fff;
+ .cateOne {
+ background-color: #fff;
- .head-title {
- color: #666666;
- font-size: 30rpx;
- height: 80rpx;
- line-height: 80rpx;
- padding-left: 30rpx;
- }
+ .head-title {
+ color: #666666;
+ font-size: 30rpx;
+ height: 80rpx;
+ line-height: 80rpx;
+ padding-left: 30rpx;
+ }
- .list {
- padding: 20rpx 20rpx;
- font-size: 22rpx;
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- justify-content: center;
- grid-gap: 20rpx;
+ .list {
+ padding: 20rpx 20rpx;
+ font-size: 22rpx;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ justify-content: center;
+ grid-gap: 20rpx;
- .item {
- width: 120rpx;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- align-items: center;
+ .item {
+ width: 120rpx;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
- .c-img {
- height: 100rpx;
- width: 100rpx;
- flex-shrink: 0;
- border-radius: 50%;
- border: 2px solid transparent;
- overflow: hidden;
- }
+ .c-img {
+ height: 100rpx;
+ width: 100rpx;
+ flex-shrink: 0;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ overflow: hidden;
+ }
- .c-text {
- width: 100%;
- text-align: center;
- box-sizing: border-box;
- padding: 2rpx 4rpx 3rpx 4rpx;
- border-radius: 50rpx;
- margin-top: 5rpx;
- }
- }
+ .c-text {
+ width: 100%;
+ text-align: center;
+ box-sizing: border-box;
+ padding: 2rpx 4rpx 3rpx 4rpx;
+ border-radius: 50rpx;
+ margin-top: 5rpx;
+ }
+ }
- .item-active {
- .c-img {
- border: 2px solid #20b128;
- }
+ .item-active {
+ .c-img {
+ border: 2px solid #20b128;
+ }
- .c-text {
- background-color: #20b128;
- color: #fff;
- }
- }
- }
+ .c-text {
+ background-color: #20b128;
+ color: #fff;
+ }
+ }
+ }
- .classify-list {
- padding: 20rpx 30rpx;
- font-size: 22rpx;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- justify-content: center;
- grid-gap: 20rpx;
+ .classify-list {
+ padding: 20rpx 30rpx;
+ font-size: 22rpx;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ justify-content: center;
+ grid-gap: 20rpx;
- .classify-list-item {
- flex-shrink: 0;
- text-align: center;
- width: 150rpx;
- height: 42rpx;
- line-height: 42rpx;
- background: #F6F6F6;
- border-radius: 22rpx 22rpx 22rpx 22rpx;
- border: 1rpx solid transparent;
- }
+ .classify-list-item {
+ flex-shrink: 0;
+ text-align: center;
+ width: 150rpx;
+ height: 42rpx;
+ line-height: 42rpx;
+ background: #F6F6F6;
+ border-radius: 22rpx 22rpx 22rpx 22rpx;
+ border: 1rpx solid transparent;
+ }
- .item-active {
- border: 1rpx solid #20b128;
- color: #20b128;
- background-color: rgba(#20b128, 0.1);
- }
- }
- }
+ .item-active {
+ border: 1rpx solid #20b128;
+ color: #20b128;
+ background-color: rgba(#20b128, 0.1);
+ }
+ }
+ }
- .scroll-box {
- // background-color: red;
- display: flex;
+ .scroll-box {
+ // background-color: red;
+ display: flex;
- .left {
- height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
- /* #ifdef H5 */
- height: calc(100vh - 44px - 100rpx);
- /* #endif */
- width: 170rpx;
- box-sizing: border-box;
- background-color: #f6f6f6;
- font-size: 24rpx;
+ .left {
+ height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
+ /* #ifdef H5 */
+ height: calc(100vh - 44px - 100rpx);
+ /* #endif */
+ width: 170rpx;
+ box-sizing: border-box;
+ background-color: #f6f6f6;
+ font-size: 24rpx;
- .item {
- height: 96rpx;
- line-height: 96rpx;
- text-align: center;
- }
+ .item {
+ height: 96rpx;
+ line-height: 96rpx;
+ text-align: center;
+ }
- .item-active {
- background-color: #fff;
- position: relative;
- color: #20b128;
+ .item-active {
+ background-color: #fff;
+ position: relative;
+ color: #20b128;
- &::before {
- content: '';
- background-color: #20b128;
- width: 6rpx;
- height: 48rpx;
- border-radius: 10rpx;
- position: absolute;
- left: 0;
- top: 50%;
- transform: translate(0, -50%);
- }
- }
- }
+ &::before {
+ content: '';
+ background-color: #20b128;
+ width: 6rpx;
+ height: 48rpx;
+ border-radius: 10rpx;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translate(0, -50%);
+ }
+ }
+ }
- .right {
- height: calc(100vh - var(--window-top) - 300rpx);
- /* #ifdef H5 */
- height: calc(100vh - 96px + 20rpx);
- /* #endif */
- width: 580rpx;
- box-sizing: border-box;
- position: relative;
- overflow: hidden;
+ .right {
+ height: calc(100vh - var(--window-top) - 300rpx);
+ /* #ifdef H5 */
+ height: calc(100vh - 96px + 20rpx);
+ /* #endif */
+ width: 580rpx;
+ box-sizing: border-box;
+ position: relative;
+ overflow: hidden;
- .classify {
- height: 150rpx;
- background-color: #fff;
- border-bottom: 1rpx solid #f6f6f6;
- position: relative;
- font-size: 24rpx;
+ .classify {
+ height: 150rpx;
+ background-color: #fff;
+ border-bottom: 1rpx solid #f6f6f6;
+ position: relative;
+ font-size: 24rpx;
- .classify-list {
- display: flex;
- padding: 20rpx;
+ .classify-list {
+ display: flex;
+ padding: 20rpx;
- .classify-list-item {
- flex-shrink: 0;
- text-align: center;
- width: 108rpx;
- height: 42rpx;
- line-height: 42rpx;
- background: #F6F6F6;
- border-radius: 22rpx 22rpx 22rpx 22rpx;
- margin-right: 20rpx;
- border: 1rpx solid transparent;
- }
+ .classify-list-item {
+ flex-shrink: 0;
+ text-align: center;
+ width: 108rpx;
+ height: 42rpx;
+ line-height: 42rpx;
+ background: #F6F6F6;
+ border-radius: 22rpx 22rpx 22rpx 22rpx;
+ margin-right: 20rpx;
+ border: 1rpx solid transparent;
+ }
- .item-active {
- border: 1rpx solid #20b128;
- color: #20b128;
- background-color: rgba(#20b128, 0.1);
- }
- }
+ .item-active {
+ border: 1rpx solid #20b128;
+ color: #20b128;
+ background-color: rgba(#20b128, 0.1);
+ }
+ }
- .done {
- height: 90rpx;
- width: 60rpx;
- position: absolute;
- top: 0;
- right: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #fff;
- }
+ .done {
+ height: 90rpx;
+ width: 60rpx;
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #fff;
+ }
- .order-by {
- display: flex;
- justify-content: flex-end;
- align-items: center;
+ .order-by {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
- .item {
- padding-right: 20rpx;
- }
+ .item {
+ padding-right: 20rpx;
+ }
- .order-active {
- color: #20b128;
- }
- }
- }
+ .order-active {
+ color: #20b128;
+ }
+ }
+ }
- .list {
- height: calc(100vh - var(--window-top) - 400rpx);
- /* #ifdef H5 */
- height: calc(100vh - 44px - 200rpx);
+ .list {
+ height: calc(100vh - var(--window-top) - 400rpx);
+ /* #ifdef H5 */
+ height: calc(100vh - 44px - 200rpx);
- /* #endif */
- .shop-item {
- padding: 20rpx;
- border-bottom: 1rpx solid #f6f6f6;
- background-color: #fff;
- display: flex;
+ /* #endif */
+ .shop-item {
+ padding: 20rpx;
+ border-bottom: 1rpx solid #f6f6f6;
+ background-color: #fff;
+ display: flex;
- .shop-img {
- height: 120rpx;
- width: 120rpx;
- margin-right: 20rpx;
- border-radius: 14rpx;
- overflow: hidden;
- }
+ .shop-img {
+ height: 120rpx;
+ width: 120rpx;
+ margin-right: 20rpx;
+ border-radius: 14rpx;
+ overflow: hidden;
+ }
- .shop-content {
- width: 380rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+ .shop-content {
+ width: 380rpx;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
- .title {
- .name {
- font-size: 28rpx;
- }
+ .title {
+ .name {
+ font-size: 28rpx;
+ }
- .tip {
- color: #999;
- font-size: 24rpx;
- margin: 2rpx 0;
- }
- }
+ .tip {
+ color: #999;
+ font-size: 24rpx;
+ margin: 2rpx 0;
+ }
+ }
- .price {
- font-size: 30rpx;
- font-weight: bold;
- color: #F55726;
- }
+ .price {
+ font-size: 30rpx;
+ font-weight: bold;
+ color: #F55726;
+ }
- .price-btn {
- display: flex;
- justify-content: space-between;
+ .price-btn {
+ display: flex;
+ justify-content: space-between;
- .btn {
- display: flex;
- align-items: center;
+ .btn {
+ display: flex;
+ align-items: center;
- .num {
- width: 60rpx;
- text-align: center;
- }
- }
- }
- }
- }
- }
- }
- }
+ .num {
+ width: 60rpx;
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
- .fiexd-btn-box {
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
- height: 140rpx;
- height: calc(constant(safe-area-inset-bottom) + 140rpx);
- /* 适用于iOS设备 */
- height: calc(env(safe-area-inset-bottom) + 140rpx);
- /* 适用于Android设备 */
- padding-top: 40rpx;
+ .fiexd-btn-box {
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ height: 140rpx;
+ height: calc(constant(safe-area-inset-bottom) + 140rpx);
+ /* 适用于iOS设备 */
+ height: calc(env(safe-area-inset-bottom) + 140rpx);
+ /* 适用于Android设备 */
+ padding-top: 40rpx;
- .price-info {
- .row {
- display: flex;
- font-size: 26rpx;
- align-items: center;
+ .price-info {
+ .row {
+ display: flex;
+ font-size: 26rpx;
+ align-items: center;
- &>view {
- margin-right: 15rpx;
- }
+ &>view {
+ margin-right: 15rpx;
+ }
- .price {
- color: #F55726;
- }
- }
- }
+ .price {
+ color: #F55726;
+ }
+ }
+ }
- .btn {
- width: 200rpx;
- }
+ .btn {
+ width: 200rpx;
+ }
- .cart {
- position: absolute;
- top: -40rpx;
- left: 40rpx;
+ .cart {
+ position: absolute;
+ top: -40rpx;
+ left: 40rpx;
- image {
- width: 80rpx;
- height: 80rpx;
- }
+ image {
+ width: 80rpx;
+ height: 80rpx;
+ }
- .badge {
- position: absolute;
- top: 0;
- right: 0;
- background-color: #F55726;
- color: #fff;
- border-radius: 50%;
- width: 26rpx;
- height: 26rpx;
- text-align: center;
- line-height: 26rpx;
- font-size: 18rpx;
- }
- }
- }
+ .badge {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background-color: #F55726;
+ color: #fff;
+ border-radius: 50%;
+ width: 26rpx;
+ height: 26rpx;
+ text-align: center;
+ line-height: 26rpx;
+ font-size: 18rpx;
+ }
+ }
+ }
- .headScoll {
- position: relative;
- overflow: hidden;
- transition: 400ms;
- }
+ .headScoll {
+ position: relative;
+ overflow: hidden;
+ transition: 400ms;
+ }
</style>
\ No newline at end of file
diff --git a/pages/my/my.vue b/pages/my/my.vue
index de511a2..b9e5dbe 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -46,6 +46,7 @@
<view class="card">
<up-cell-group>
<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
+ <up-cell title="我的余额" :isLink="true" url="/pageQuota/Balance/index"></up-cell>
</up-cell-group>
</view>
diff --git a/pagesOrder/order/order.vue b/pagesOrder/order/order.vue
index 5d61e4a..ae16435 100644
--- a/pagesOrder/order/order.vue
+++ b/pagesOrder/order/order.vue
@@ -1,275 +1,299 @@
<template>
- <view class="wrap">
- <up-navbar placeholder style="z-index: 100800;" @leftClick="navBack">
- <template #center>
- <view>订单</view>
- </template>
- </up-navbar>
- <up-sticky bgColor="#fff">
- <view style="padding: 10rpx 20rpx 0 20rpx;">
- <up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn"
- :actionStyle="{color: '#20b128'}"></up-search>
- </view>
- <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false"
- :activeStyle=" { color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
- </up-sticky>
+ <view class="wrap">
+ <up-navbar placeholder style="z-index: 100800;" @leftClick="navBack">
+ <template #center>
+ <view>订单</view>
+ </template>
+ </up-navbar>
+ <up-sticky bgColor="#fff">
+ <view style="padding: 10rpx 20rpx 0 20rpx;">
+ <up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn"
+ :actionStyle="{color: '#20b128'}"></up-search>
+ </view>
+ <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false"
+ :activeStyle=" { color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
+ </up-sticky>
- <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
- <swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood">
- <view class="page-box">
- <view v-if="list.length>0" class="list">
- <good v-for="(item, index) in list" :datas="item" :key="index" :type="k" @cancleOrder="cancleOrder"
- @takeOrder="takeOrder" @rePay="rePay" @purchaseAgain="purchaseAgain"></good>
- </view>
- <view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;">
- <up-empty text="订单空空如也"
- icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
- </up-empty>
- </view>
- <view v-else-if="where[k].loadend" style="padding-top: 100rpx;">
- <view style="text-align: center;color: #999;">没有更多了</view>
- </view>
- <view v-if="where[k].loading"
- style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;">
- <up-loading-icon mode="circle"></up-loading-icon>
- <view style="margin-top: 20rpx;color: #999;">加载中</view>
- </view>
- <view style="width: 100%;height: 300rpx;"></view>
- </view>
- </scroll-view>
- </swiper-item>
- </swiper>
- <orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" />
- <modal :show="showTake" title="确认收货" content="请确认您已收到货" @close="showTake=false" @change="confirmReceipt"></modal>
- </view>
+ <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
+ <swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
+ <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood">
+ <view class="page-box">
+ <view v-if="list.length>0" class="list">
+ <good v-for="(item, index) in list" :datas="item" :key="index" :type="k"
+ @cancleOrder="cancleOrder" @takeOrder="takeOrder" @rePay="rePay"
+ @purchaseAgain="purchaseAgain"></good>
+ </view>
+ <view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;">
+ <up-empty text="订单空空如也"
+ icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
+ </up-empty>
+ </view>
+ <view v-else-if="where[k].loadend" style="padding-top: 100rpx;">
+ <view style="text-align: center;color: #999;">没有更多了</view>
+ </view>
+ <view v-if="where[k].loading"
+ style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;">
+ <up-loading-icon mode="circle"></up-loading-icon>
+ <view style="margin-top: 20rpx;color: #999;">加载中</view>
+ </view>
+ <view style="width: 100%;height: 300rpx;"></view>
+ </view>
+ </scroll-view>
+ </swiper-item>
+ </swiper>
+ <orderCanclePopup :show="showCancel" @close="showCancel=false" @change="submitCancel" />
+ <modal :show="showTake" title="确认收货" content="请确认您已收到货" @close="showTake=false" @change="confirmReceipt">
+ </modal>
+ </view>
</template>
<script setup>
- import { onLoad, onUnload } from "@dcloudio/uni-app"
- import { ref } from 'vue';
- import good from "./component/good.vue";
- import orderCanclePopup from "@/components/orderCanclePopup.vue"
- import modal from "@/components/modal.vue"
- import { cancelOrderApi, rePaymentApi, confirmReceiptApi, orderListApi, purchaseAgainApi } from "@/api/order.js"
+ import {
+ onLoad,
+ onUnload
+ } from "@dcloudio/uni-app"
+ import {
+ ref
+ } from 'vue';
+ import good from "./component/good.vue";
+ import orderCanclePopup from "@/components/orderCanclePopup.vue"
+ import modal from "@/components/modal.vue"
+ import {
+ cancelOrderApi,
+ rePaymentApi,
+ confirmReceiptApi,
+ orderListApi,
+ purchaseAgainApi
+ } from "@/api/order.js"
- const tabsActive = ref(0)
- const changeTab = ({ index }) => {
- tabsActive.value = index;
- swiperCurrent.value = index;
- }
- const tablist = ref([
- { name: '全部' },
- { name: '待付款' },
- { name: '待收货' },
- // { name: '退款/售后' },
- ]);
+ const tabsActive = ref(0)
+ const changeTab = ({
+ index
+ }) => {
+ tabsActive.value = index;
+ swiperCurrent.value = index;
+ }
+ const tablist = ref([{
+ name: '全部'
+ },
+ {
+ name: '待付款'
+ },
+ {
+ name: '待收货'
+ },
+ // { name: '退款/售后' },
+ ]);
- const swiperCurrent = ref(0);
- const animationfinish = ({ detail: { current } }) => {
- swiperCurrent.value = current;
- tabsActive.value = current;
- if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0);
- if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0);
- if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 1);
- }
+ const swiperCurrent = ref(0);
+ const animationfinish = ({
+ detail: {
+ current
+ }
+ }) => {
+ swiperCurrent.value = current;
+ tabsActive.value = current;
+ if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0);
+ if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0);
+ if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 1);
+ }
- // 取消订单
- const showCancel = ref(false);
- let cancelId = '';
- const submitCancel = (e) => {
- showCancel.value = false;
- cancelOrderApi({
- order_id: cancelId,
- value: e.value
- }).then(res => {
- uni.showToast({
- title: '取消成功',
- icon: 'none'
- })
- orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId)
- })
- }
- const cancleOrder = (e) => {
- cancelId = e.id;
- showCancel.value = true;
- }
+ // 取消订单
+ const showCancel = ref(false);
+ let cancelId = '';
+ const submitCancel = (e) => {
+ showCancel.value = false;
+ cancelOrderApi({
+ order_id: cancelId,
+ value: e.value
+ }).then(res => {
+ uni.showToast({
+ title: '取消成功',
+ icon: 'none'
+ })
+ orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId)
+ })
+ }
+ const cancleOrder = (e) => {
+ cancelId = e.id;
+ showCancel.value = true;
+ }
- // 确认收货
- const showTake = ref(false);
- let takeId = "";
- const takeOrder = (e) => {
- takeId = e.id;
- showTake.value = true;
- }
- const confirmReceipt = () => {
- confirmReceiptApi({
- order_id: takeId
- }).then(res => {
- showTake.value = false;
- uni.$u.toast('确认收货成功');
- reloadAll();
- })
- }
+ // 确认收货
+ const showTake = ref(false);
+ let takeId = "";
+ const takeOrder = (e) => {
+ takeId = e.id;
+ showTake.value = true;
+ }
+ const confirmReceipt = () => {
+ confirmReceiptApi({
+ order_id: takeId
+ }).then(res => {
+ showTake.value = false;
+ uni.$u.toast('确认收货成功');
+ reloadAll();
+ })
+ }
- // 再次购买
- const purchaseAgain = (e) => {
- purchaseAgainApi({
- order_id: e.id
- }).then(res => {
- uni.$u.toast('已加入购物车');
- })
- }
+ // 再次购买
+ const purchaseAgain = (e) => {
+ purchaseAgainApi({
+ order_id: e.id
+ }).then(res => {
+ uni.$u.toast('已加入购物车');
+ })
+ }
- const rePay = (e) => {
- rePaymentApi({
- order_id: e.id,
- address_id: e.address_id,
- mer_id: e.merchant,
- pay_type: 1
- }).then(res => {
- if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
- uni.requestPayment({
- provider: 'wxpay',
- timeStamp: res.data.timeStamp,
- nonceStr: res.data.nonceStr,
- package: res.data.package,
- signType: res.data.signType,
- paySign: res.data.paySign,
- success: (e) => {
- if (e.errMsg == 'requestPayment:ok') {
- uni.showToast({
- title: '订单支付成功',
- icon: 'success'
- })
- reloadAll();
- } else uni.$u.toast('支付失败')
- },
- fail: (e) => {
- uni.$u.toast('用户取消支付')
- }
- })
- }).catch(err => {
- uni.$u.toast('网络错误')
- })
- }
+ const rePay = (e) => {
+ rePaymentApi({
+ order_id: e.id,
+ address_id: e.address_id,
+ mer_id: e.merchant,
+ pay_type: 1
+ }).then(res => {
+ if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
+ uni.requestPayment({
+ provider: 'wxpay',
+ timeStamp: res.data.timeStamp,
+ nonceStr: res.data.nonceStr,
+ package: res.data.package,
+ signType: res.data.signType,
+ paySign: res.data.paySign,
+ success: (e) => {
+ if (e.errMsg == 'requestPayment:ok') {
+ uni.showToast({
+ title: '订单支付成功',
+ icon: 'success'
+ })
+ reloadAll();
+ } else uni.$u.toast('支付失败')
+ },
+ fail: (e) => {
+ uni.$u.toast('用户取消支付')
+ }
+ })
+ }).catch(err => {
+ uni.$u.toast('网络错误')
+ })
+ }
- // 订单
- const where = ref([{
- page_no: 1,
- page_size: 25,
- loading: false,
- loadend: false
- }, {
- page_no: 1,
- page_size: 25,
- loading: false,
- loadend: false
- },
- {
- page_no: 1,
- page_size: 25,
- loading: false,
- loadend: false
- }
- ])
- const keyword = ref('')
- const orderList = ref([
- [],
- [],
- [],
- ])
- const getOrderList = (type = 0, status = '', paid = 1) => {
- if (where.value[type].loadend) return;
- where.value[type].loading = true;
- orderListApi({
- page_no: where.value[type].page_no,
- page_size: where.value[type].page_size,
- number: keyword.value,
- status: status,
- paid: paid
- }).then(res => {
- if (where.value[type].page_no == 1) orderList.value[type] = [];
- orderList.value[type] = [...orderList.value[type], ...res.data.lists];
- if (res.data.lists.length < where.value[type].page_size) where.value[type].loadend = true;
- where.value[type].page_no++;
- where.value[type].loading = false;
- }).catch(err => {
- where.value[type].loading = false;
- })
- }
+ // 订单
+ const where = ref([{
+ page_no: 1,
+ page_size: 25,
+ loading: false,
+ loadend: false
+ }, {
+ page_no: 1,
+ page_size: 25,
+ loading: false,
+ loadend: false
+ },
+ {
+ page_no: 1,
+ page_size: 25,
+ loading: false,
+ loadend: false
+ }
+ ])
+ const keyword = ref('')
+ const orderList = ref([
+ [],
+ [],
+ [],
+ ])
+ const getOrderList = (type = 0, status = '', paid = 1) => {
+ if (where.value[type].loadend) return;
+ where.value[type].loading = true;
+ orderListApi({
+ page_no: where.value[type].page_no,
+ page_size: where.value[type].page_size,
+ number: keyword.value,
+ status: status,
+ paid: paid
+ }).then(res => {
+ if (where.value[type].page_no == 1) orderList.value[type] = [];
+ orderList.value[type] = [...orderList.value[type], ...res.data.lists];
+ if (res.data.lists.length < where.value[type].page_size) where.value[type].loadend = true;
+ where.value[type].page_no++;
+ where.value[type].loading = false;
+ }).catch(err => {
+ where.value[type].loading = false;
+ })
+ }
- const loadMoreGood = () => {
- if (swiperCurrent.value == 0) getOrderList(0);
- if (swiperCurrent.value == 1) getOrderList(1, '', 0);
- if (swiperCurrent.value == 2) getOrderList(2, 1);
- }
+ const loadMoreGood = () => {
+ if (swiperCurrent.value == 0) getOrderList(0);
+ if (swiperCurrent.value == 1) getOrderList(1, '', 0);
+ if (swiperCurrent.value == 2) getOrderList(2, 1);
+ }
- // 搜索
- const searchOn = () => {
- orderList.value[+swiperCurrent.value] = [];
- where.value[+swiperCurrent.value].page_no = 1;
- where.value[+swiperCurrent.value].loadend = false;
- if (swiperCurrent.value == 0) getOrderList(0);
- if (swiperCurrent.value == 1) getOrderList(1, '', 0);
- if (swiperCurrent.value == 2) getOrderList(2, 1);
- }
+ // 搜索
+ const searchOn = () => {
+ orderList.value[+swiperCurrent.value] = [];
+ where.value[+swiperCurrent.value].page_no = 1;
+ where.value[+swiperCurrent.value].loadend = false;
+ if (swiperCurrent.value == 0) getOrderList(0);
+ if (swiperCurrent.value == 1) getOrderList(1, '', 0);
+ if (swiperCurrent.value == 2) getOrderList(2, 1);
+ }
- let back = 0;
- const navBack = () => {
- uni.navigateBack({
- delta: back ? +back : 0
- })
- }
+ let back = 0;
+ const navBack = () => {
+ uni.navigateBack({
+ delta: back ? +back : 0
+ })
+ }
- const reloadAll = () => { //对订单进行操作时刷新页面
- where.value.forEach(item => {
- item.page_no = 1;
- item.loadend = false;
- });
- getOrderList(1, '', 0);
- getOrderList(0);
- getOrderList(2, 1);
- }
+ const reloadAll = () => { //对订单进行操作时刷新页面
+ where.value.forEach(item => {
+ item.page_no = 1;
+ item.loadend = false;
+ });
+ getOrderList(1, '', 0);
+ getOrderList(0);
+ getOrderList(2, 1);
+ }
- onLoad((options) => {
- if (options.type) {
- tabsActive.value = +options.type;
- swiperCurrent.value = +options.type;
- searchOn();
- }
- if (options.back) back = options.back;
- // getOrderList(0);
- // getOrderList(1, '', 0);
- // getOrderList(2, 1);
+ onLoad((options) => {
+ if (options.type) {
+ tabsActive.value = +options.type;
+ swiperCurrent.value = +options.type;
+ searchOn();
+ }
+ if (options.back) back = options.back;
+ // getOrderList(0);
+ // getOrderList(1, '', 0);
+ // getOrderList(2, 1);
- uni.$on('reLoadOrderList', reloadAll);
- })
+ uni.$on('reLoadOrderList', reloadAll);
+ })
- onUnload(() => {
- uni.$off('reLoadOrderList', reloadAll)
- })
+ onUnload(() => {
+ uni.$off('reLoadOrderList', reloadAll)
+ })
</script>
<style lang="scss">
- .wrap {
- display: flex;
- flex-direction: column;
- height: calc(100vh - var(--window-top));
- width: 100%;
- }
+ .wrap {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - var(--window-top));
+ width: 100%;
+ }
- .swiper-box {
- flex: 1;
- }
+ .swiper-box {
+ flex: 1;
+ }
- .swiper-item {
- height: 100%;
- }
+ .swiper-item {
+ height: 100%;
+ }
- .page-box {
- margin: 20rpx;
+ .page-box {
+ margin: 20rpx;
- .list {}
- }
+ // .list {}
+ }
</style>
\ No newline at end of file