From 28d72db591108c700e917253935dcc3bf538dca9 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期四, 11 七月 2024 17:30:37 +0800
Subject: [PATCH] ok商品的分类、列表，todo详情
---
sub_pages/customer/trade/list.vue | 354 +++++++++
pages/home/home.vue | 550 +++++++-------
common/self.scss | 5
static/images/customer/gwc.png | 0
sub_pages/customer/detail.vue | 22
common/global.scss | 11
pages.json | 26
mixin/mixin.js | 12
components/footer/main.scss | 22
static/common/icon-kf.png | 0
/dev/null | 253 ------
main.js | 5
static/common/icon-arrow-down.png | 0
sub_pages/customer/trade/trade.vue | 940 ++++++++----------------
14 files changed, 1,031 insertions(+), 1,169 deletions(-)
diff --git a/common/global.scss b/common/global.scss
index dfc6f48..9ea6dc9 100644
--- a/common/global.scss
+++ b/common/global.scss
@@ -112,3 +112,14 @@
}
}
+
+.component-filter-container {
+ display: flex;
+ .flex1 {
+ text-align: center;
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #000000;
+ line-height: 34rpx;
+ }
+}
\ No newline at end of file
diff --git a/common/self.scss b/common/self.scss
index 9f3c54a..8cf4eea 100644
--- a/common/self.scss
+++ b/common/self.scss
@@ -489,7 +489,10 @@
.el-icon-arrow-down {
font-size: 12px;
}
-
+.icon-arrow-down {
+ width: 24rpx;
+ height: 24rpx;
+}
.app-tips {}
.app-tips .app-tip {
diff --git a/components/button-shop/button-shop.vue b/components/button-shop/button-shop.vue
deleted file mode 100644
index 69275fa..0000000
--- a/components/button-shop/button-shop.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
- <view class="footer-shop flex">
- <view>总价</view>
- <view>￥<text class='num'>{{price}}</text></view>
- <view>{{text||'立即购买'}}</view>
- </view>
-</template>
-
-<script>
- export default {
- name: "button-shop",
- data() {
- return {
-
- };
- },
- props: {
- price: {
- type: String,
- default: "0"
- },
- text: {
- type: String,
- default: "立即购买"
- }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .footer-shop {}
-</style>
\ No newline at end of file
diff --git a/components/card-list-item/card-list-item.vue b/components/card-list-item/card-list-item.vue
deleted file mode 100644
index c04cf91..0000000
--- a/components/card-list-item/card-list-item.vue
+++ /dev/null
@@ -1,600 +0,0 @@
-<template>
- <view class="card-list-item">
- <view @click="()=>{
-
- if(dto&&dto.id){
- if(dto.status!=='B'&&dto.status!=='O'){
- if(source==='order'&&dto.status=='PENDING'){
- toPay()
- }else{
- if(source!=='order'){
- showDetail()
- }
-
- }
- }else{
- if(source!=='order'){
- showDetail()
- }
- }
- }
-
-
- }">
- <view class="flex shop" v-if="type=='shop'">
- <view class="m-r-10 image">
- <!-- <image src="../../static/uni.png" mode="aspectFill" class="cover" /> -->
-
- <image :src="dto.cover" mode="aspectFill" class="cover" />
- <!-- <view class="status-left-top" v-if="dto.status=='O'">已结束</view>
- <view class="status-left-top" v-if="dto.status=='A'">团购中</view>
- <view class="status-left-top" v-if="dto.status=='J'">报名中</view> -->
- <view class="status-left-top" :class="[dto.status]" v-if="dto.statusStr">{{dto.statusStr}}</view>
-
- </view>
- <view class="infos">
- <view class="title">{{dto.name}}</view>
- <view class="time" v-if="dto.status=='B'||dto.status=='O'">
-
- </view>
- <view class="time" v-else>
- <!-- dto.expireTimeStr -->
- <!-- expireTimeStr -->
- <!-- expireTimeStr: "2025-06-20 09:35:44" -->
- <span class="num">{{tarr[0]}}</span>
- <span class="c">天</span>
- <span class="num">{{tarr[1]}}</span>
- <span class="c">时</span>
- <span class="num">{{tarr[2]}}</span>
- <span class="c">分</span>
- <span class="num">{{tarr[3]}}</span>
- <span class="c">秒</span>
- </view>
- <view class="flex money">
- <view class="c">拼团价 ￥</view>
- <view class="price">{{dto.price || dto.defaultGroupPrice || '-'}}</view>
- <view class="oldprice">{{dto.defaultNormalPrice || ''}}</view>
-
- </view>
- </view>
- </view>
- <view class="flex travel" v-if="type=='travel'">
- <view class="m-r-10 image">
- <image :src="dto.cover" mode="aspectFill" class="cover" />
- <view class="status-left-top" :class="[dto.status]" v-if="dto.statusStr">{{dto.statusStr}}</view>
- <!-- <view class="status-left-top" v-if="dto.status=='O'">已结束</view> -->
- <!-- <view class="status-left-top" v-if="dto.status=='J'">报名中</view> -->
- <!-- <view class="status-left-top" v-if="dto.status=='O'">报名</view> -->
- <!-- <view class="status-left-top" v-if="dto.status=='O'">已结束</view> -->
-
- </view>
- <view class="infos">
- <view class="title">{{dto.title}}</view>
- <view class="flex location">
- <!-- <uni-icons type="checkbox"></uni-icons> -->
- <!-- <image class="icon-clock m-r-6 m-t-2" src="../../static/common/icon-clock.png"></image> -->
- <view>
- {{dto.startTimeStr&&(dto.startTimeStr.substring(5,10)+'到')}}{{dto.endTimeStr&&dto.endTimeStr.substring(5,10) || ''}}
- </view>
- </view>
- <view class="flex location" style="flex-wrap: inherit;">
- <!-- <uni-icons type="location"></uni-icons> -->
- <image class="icon-loc m-r-6 m-t-2" src="../../static/common/icon-loc.png"></image>
- <view class="location-txt">{{dto.targetAddress}}</view>
- </view>
- <view class="flex money m-t-20">
- <view class="c">价格 ￥</view>
- <view class="price">{{dto.price || '-'}}</view>
- </view>
- </view>
- </view>
- <view class="flex peoples" style="min-height: 50rpx;">
- <view class="flex">
- <view class="icons" v-if="dto.userPictures">
- <view class="flex">
- <view v-for="(img,k) of dto.userPictures.split(',')">
- <image v-if="k<=3" :src="img" mode="aspectFill" class="icon"
- :style="{'left': k*60 + 'rpx'}">
- </image>
- </view>
- </view>
-
-
- <view class="desc"
- :style="{'left': (10+ (dto&&dto.userPictures&&( dto.userPictures.split(',').length<=4?(dto.userPictures.split(',').length*60):240) || 0) ) +'rpx'}">
- {{dto.currentNum||0}}人上车
- </view>
- </view>
-
- </view>
- <view v-if="dto.status!=='B'&&dto.status!=='O'" class="m-l-a">
- <view @click.stop="toPay" v-if="source==='order'&&dto.status=='PENDING'"
- class="card-list-item-button-green">
- {{dto.join?'待支付':'支付超时已取消'}}
- </view>
- <view @click.stop="cancelPay" v-if="source==='order'&&dto.status=='PENDING'"
- class="card-list-item-button-green">
- 取消订单
- </view>
- <view @click.stop="showDetail" v-else-if="source!=='order'" class="card-list-item-button-green">
- {{type=='shop'&&(dto.join?'已入团':'立即成团') || type=='travel'&&(dto.join?'已入团':'立即上车')||'-'}}
- </view>
- </view>
-
- <!-- 以及无法拼团的显示image -->
- <!-- 拼团成功 -->
- <view v-if="dto.status=='B'||dto.status=='O'" class="m-l-a">
- <view class="card-list-item-button-green-success" :class="[type]" v-if="source!=='order'">
-
- </view>
-
-
- </view>
- </view>
- <!-- &&type=='travel' -->
- <view v-if="source==='order'&&type=='travel'&&dto.status!=='B'&&dto.status!=='O'&&dto.join" class="peoples">
- <view @click.stop="showCode" class="card-list-item-button-green m-l-a">
- 核销二维码
- </view>
- </view>
- <view v-if="source==='order'" class="peoples flex">
- <view v-if="type=='travel'&&(dto.status==='B'||dto.status==='O')&&dto.join" @click.stop="showCode"
- class="card-list-item-button-green-2 m-l-a m-r-10" style="margin-left: auto;">
- 核销二维码
- </view>
- <view @click.stop="showDetail" class="card-list-item-button-green-2 m-l-a m-r-10"
- style="margin-left: auto;" v-if="type=='travel'">
- 活动详情
- </view>
- <view @click.stop="toOrderDetail" class="card-list-item-button-green-3 m-r-0"
- :class="[type=='travel'?'':'m-l-a']">
- 订单详情
- </view>
- </view>
-
-
- </view>
-
- <!-- <uni-popup ref="popup_code" type="bottom" @maskClick="closePopCode">
- <view class="popup-form">
- 核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码
- 核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码核销二维码
-
- <canvas type="2d" id="itemOrderCode" style="width: 300rpx;height: 300rpx;display: block;" class="code">
- aaaaa
- </canvas>
-
- </view>
- </uni-popup> -->
- <!-- 二维码 -->
- <uni-popup ref="popup_shop" type="bottom" @maskClick="closePop">
- <view class="popup-form">
- <!-- 地址选择 -->
- <view style="margin-bottom: 16rpx;">
- <common-address-select ref="addressselect"></common-address-select>
- </view>
- <!-- 商品图片 -->
- <image :src="dto.cover" mode="aspectFit" class="cover-img" />
- <!-- 各种参数 -->
- <scroll-view class="form-vars" :scroll-y="true" style="height: 400rpx;" :show-scrollbar="true">
- <view class="title">
- {{dto.name || '-'}}
- </view>
-
- <view v-for="field of form.extraFieldList">
- <view class="var-title">{{field.name || '-'}}<span v-if="false"
- class="t-grey">({{field.charging?'计费':'不计费'}})</span></view>
- <view class="flex var-items">
- <view class="var-item" v-for="value of field.values" :key="value"
- @click="setValueSelect(field,value)" :class="[field.selectvalue==value?'cur':'']">
- {{value}}
- </view>
- </view>
-
- </view>
- <view v-if="form.description">
- <view class="var-title">
- 介绍:
- </view>
- <view v-html="form.description||''" class="rich2">
-
- </view>
- </view>
- </scroll-view>
- <!-- <view>
- <input type="number" v-model="num" :maxlength="4" />
- </view> -->
- <!-- 提交按钮 -->
- <view class="flex footer-shop" v-if="!dto.join&&dto.status!=='B'&&dto.status!=='O'">
- <view class="flex">
- <view class="total">总计: ￥ </view>
- <view class="price">{{selectprice}}</view>
- </view>
- <view @click.stop="submitShop" class="txt">
- 立即成团
- </view>
- </view>
- </view>
-
-
-
-
- </uni-popup>
- </view>
-</template>
-
-<script>
- import {
- mapState
- } from 'vuex'
- import drawQrcode from '@/plugins/weapp.qrcode.esm.js'
-
- export default {
- name: "card-list-item",
-
- methods: {
- setValueSelect(dto, value) {
- dto.selectvalue = value
- // console.log('setValueSelect', dto, value)
- },
- closePop() {
- this.$emit('pop', 0)
- },
- toOrderDetail() {
- var url = `/pages/order/bussiness-order/bussincess-order-detail?source=user&type=${this.type}`
- if (this.currentInfo.openId) {
- //学生
- url += `&id=${this.dto.orderId || this.dto.id}`
- } else {
- if (this.type == 'travel') {
- url += `&id=${this.dto.id}&userId=${this.currentInfo.id}`
- } else {
- url += `&id=${this.dto.orderId || this.dto.id}`
- }
- }
-
- uni.navigateTo({
- url: url
- })
- },
- async cancelPay() {
- if (!this.currentInfo.id) {
- await this.$message.confirm('未登录，前往登录?')
- uni.navigateTo({
- url: '/pages/user/user'
- })
- return
- }
- await this.$message.confirm('是否确认取消支付?')
- this.$message.showLoading()
- const orderInfo = await this.$http.request('post', '/api/order/cancel/' + (this.dto.orderId ||
- this.dto.id || ''), {
-
- })
- this.$message.hideLoading()
- if (code == 0) {
- this.$message.showToast('取消成功')
- this.dto.status = 'COMPLETED'
- this.dto.statusStr = '已取消'
- this.$emit('refresh', {})
- }
-
- },
- async toPay() {
- if(!this.dto.join){
- return
- }
- let item = this.dto
- // todo 待支付
- if (!this.currentInfo.id) {
- // this.$message.showToast('请先登陆')
- await this.$message.confirm('未登录，前往登录?')
- uni.navigateTo({
- url: '/pages/user/user'
- })
- return
- }
- if (item.status === 'PENDING') {
- // this.$message.showToast('等待接口，请联系开发者')
- this.$message.showLoading()
- const orderInfo = await this.$http.request('post', '/api/order/pay/again/' + (this.dto.orderId ||
- this.dto.id || ''), {
-
- })
- var info = orderInfo.data || {}
- this.$message.hideLoading()
- if (code == 0) {
- let that = this
- wx.requestPayment({
- ...info,
- success(res) {
- console.log('pay success', res)
- that.$message.showToast('支付成功')
- that.dto.status = 'PAYMENT'
- that.dto.statusStr = '已支付'
- that.$emit('refresh', {})
- },
- fail(err) {
- console.error('pay fail', err)
- that.$message.showToast('支付失败')
- }
- })
- }
-
- } else {
- this.$message.showToast('请不要重复支付')
- return
- }
-
- },
- // closePopCode() {
- // this.$emit('pop', 0)
-
- // this.$refs.popup_code.close()
-
- // },
- showCode() {
- uni.navigateTo({
- url: '/pages/travel/travel-success/travel-code?id=' + this.dto.id
- })
- // this.$emit('pop', 1)
- // let that = this
- // this.$refs.popup_code.open()
- // setTimeout(() => {
- // const query = uni.createSelectorQuery()
- // query.select('#itemOrderCode')
- // .fields({
- // node: true,
- // size: true
- // })
- // .exec((res) => {
- // console.log('query node',res)
- // // var canvas = res[0].node
- // // that.canvascode = canvas
- // // // 调用方法drawQrcode生成二维码
- // // drawQrcode({
- // // canvas: canvas,
- // // canvasId: 'myQrcode',
- // // width: 480,
- // // height: 480,
- // // padding: 30,
- // // background: '#ffffff',
- // // foreground: '#000000',
- // // text: JSON.stringify({
- // // 'tripId': that.dto.id
- // // }),
- // // })
- // })
- // },200)
-
- },
- saveCode() {
-
- // 获取临时路径（得到之后，想干嘛就干嘛了）
- uni.canvasToTempFilePath({
- canvasId: 'myQrcode',
- canvas: this.canvascode,
- x: 0,
- y: 0,
- width: 480,
- height: 480,
- destWidth: 260,
- destHeight: 260,
- success(res) {
- console.log('二维码临时路径：', res.tempFilePath)
- uni.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success: function() {
- console.log('save success');
- uni.showToast({
- title: '保存成功'
- })
- },
- fail(res) {
- // console.error(res)
- uni.showToast({
- title: '保存失败。',
- icon: 'error'
- })
- }
- })
- },
- fail(res) {
- uni.showToast({
- title: '保存失败',
- icon: 'error'
- })
- }
- })
- },
- async showDetail() {
- //如果是shop，直接展示购买吧
-
- if (this.type == 'shop') {
- uni.navigateTo({
- url: '/pages/shop/shop-detail?id=' + this.dto.id
- })
-
- } else if (this.type == 'travel') {
- uni.navigateTo({
- url: '/pages/travel/travel-detail?id=' + this.dto.id
- })
- }
- //如果是travel去详情页面，然后再购买吧
-
- },
- async submitShop() {
- var values = []
- if (this.num <= 0) {
-
- }
- if (this.form.extraFieldList) {
- for (var field of this.form.extraFieldList) {
- if (!field.selectvalue) {
- this.$message.showToast('存在未选规格，请选择完整')
- return
- } else {
- values.push(field.selectvalue)
- }
- }
- }
- if (!this.address.id) {
- this.$message.showToast('请先选择收货地址')
- return
- }
- await this.$message.confirm('确定参团吗?')
- this.$message.showLoading()
- const {
- code,
- data
- } = await this.$http.request('post', '/api/buy/customer/group/join', {
- data: {
- customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
- this
- .address.room || '') + (this.address.address || ''),
- customerTel: this.address.tel,
- customer: this.address.name,
- num: this.num,
- values: values, //规格
- id: this.form.id, //团购id
- }
- })
-
- this.$message.hideLoading()
- if (code == 0) {
-
- let that = this
- let info = data
- wx.requestPayment({
- ...info,
- success(res) {
- console.log('pay success', res)
- uni.navigateTo({
- url: '/pages/shop/shop-success/shop-success?id=' + that.form.id
- })
- },
- fail(err) {
- console.error('pay fail', err)
- that.$message.showToast('支付失败')
- }
- })
-
-
- }
-
-
- },
-
- },
- data() {
- return {
- form: {
-
- },
- num: 1,
- canvascode: undefined
- };
- },
-
- computed: {
- ...mapState({
- address: state => {
- return state.defaultaddress || {}
- },
- }),
- selectprice() {
- if (this.form && this.form.priceList && this.form.extraFieldList) {
- //根据规格选择对应价格
- var selects = []
- for (var item of this.form.extraFieldList) {
- if (item.charging) {
- if (item.selectvalue) {
- selects.push(item.selectvalue)
- }
- }
- }
- if (selects.length == 0) {
- return '0.0'
- }
-
- for (var prices of this.form.priceList) {
- // console.log('prices',prices)
- // prices.values
- // groupPrice
- var checks = selects.length
- for (var s of selects) {
- if (prices.values.indexOf(s) >= 0) {
- checks -= 1
- }
- }
- if (checks <= 0) {
- return ('' + (prices.groupPrice || 0).toFixed(2)) || '0.0'
- }
- }
-
- }
- return '0.0'
- },
- tarr() {
- // <!-- dto.expireTimeStr -->
- // <!-- expireTimeStr -->
- // <!-- expireTimeStr: "2025-06-20 09:35:44" -->
- // <span class="num">1</span>
- // <span class="c">天</span>
- // <span class="num">3</span>
- // <span class="c">时</span>
- // <span class="num">24</span>
- // <span class="c">分</span>
- // <span class="num">34</span>
- // <span class="c">秒</span>
- var dto = this.dto
- if (dto.expireTimeStr) {
- var diff = new Date(dto.expireTimeStr).getTime() - new Date().getTime()
- if (diff < 0) {
- return ['-', '-', '-', '-']
- }
- var day = Math.floor(diff / (24 * 3600 * 1000)) || '0'
- var lefttime1 = diff % (24 * 3600 * 1000)
- if (lefttime1 <= 0) {
- return [day, '-', '-', '-']
- } else {
- var hour = Math.floor(lefttime1 / (3600 * 1000)) || '0'
- var lefttime2 = lefttime1 % (3600 * 1000)
- if (lefttime2 <= 0) {
- return [day, hour, '-', '-']
- } else {
- var min = Math.floor(lefttime2 / (60 * 1000)) || '0'
- var lefttime3 = lefttime2 % (60 * 1000)
- if (lefttime3 <= 0) {
- return [day, hour, min, '-']
- } else {
- var sec = Math.floor(lefttime3 / (1000)) || '0'
- return [day, hour, min, sec]
- }
- }
- }
- }
- return ['-', '-', '-', '-']
- },
- },
- props: {
- type: '',
- dto: {
- type: Object,
- default: {
- id: '',
- }
- },
- source: {
- type: String,
- default () {
- return ''
- }
- }
- }
- }
-</script>
-
-<style lang="scss">
- @import "./main.scss";
-</style>
\ No newline at end of file
diff --git a/components/card-list-item/main.scss b/components/card-list-item/main.scss
deleted file mode 100644
index 706a3fd..0000000
--- a/components/card-list-item/main.scss
+++ /dev/null
@@ -1,253 +0,0 @@
-
-.card-list-item{
- min-height: 326rpx;
- background: #FFFFFF;
- border-radius: 16rpx;
- padding: 18rpx 20rpx;
- .image{
- position: relative;
- .status-left-top{
- position: absolute;
- top: 0;
- left: 0;
- font-size: 24rpx;
- color: #FFFFFF;
- line-height: 34rpx;
- height: 34rpx;
- text-align: left;
- font-style: normal;
- background: #A7A7A7;
- border-radius: 0rpx 0rpx 8rpx 0rpx;
- text-align: center;
- padding: 0rpx 12rpx;
- }
- .status-left-top.J,.status-left-top.A{
- background: #04BA97;
-
- }
- }
-
- .icon-loc{
- width: 24rpx;
- height: 30rpx;
- background-size: 100% 100%;
-
- }
- .icon-clock{
- width: 24rpx;
- height: 26rpx;
- background-size: 100% 100%;
-
- }
- .cover{
- width: 270rpx;
- height: 224rpx;
- border-radius: 8rpx;
- }
- .infos{
- min-width: 320rpx;
- .title{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- text-align: left;
- font-style: normal;
- margin-top: 6rpx;
- margin-bottom: 20rpx;
- word-wrap: break-word;
- max-width: 330rpx;
- // max-width: fit-content;
- min-height: 48rpx;
- }
- .time{
- line-height: 46rpx;
- margin-bottom: 42rpx;
- .num{
- width: 44rpx;
- height: 44rpx;
- background: #DBEBE3;
- border-radius: 4rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 26rpx;
- color: #000000;
- line-height: 44rpx;
- text-align: left;
- font-style: normal;
- display: inline-block;
- text-align: center;
- margin-right: 4rpx;
- }
- .c{
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 28rpx;
- color: #666666;
- line-height: 40rpx;
- text-align: left;
- font-style: normal;
- margin-right: 4rpx;
- }
- }
- .money{
- z-index: 10;
- .c{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 28rpx;
- color: #000000;
- line-height: 40rpx;
- text-align: left;
- font-style: normal;
- }
- .price{
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 48rpx;
- color: #000000;
- // line-height: 66rpx;
- line-height: 30rpx;
- text-align: left;
- font-style: normal;
- margin-right: 6rpx;
- }
- .oldprice{
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 40rpx;
- text-align: left;
- font-style: normal;
- text-decoration-line: line-through;
- }
- }
- .location{
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- text-align: left;
- font-style: normal;
- word-wrap: break-word;
- max-width: fit-content;
- // max-width:330rpx;
- .location-txt{
- /* 单行显示省略号 */
- // overflow: hidden;
- // text-overflow: ellipsis;
- // white-space: nowrap;
- max-width: 300rpx;
- }
- }
- }
-
- .peoples{
- margin-top: 16rpx;
- line-height: 62rpx;
- .card-list-item-button-green{
- width: 176rpx;
- height: 62rpx;
- background: #04BA97;
- border-radius: 56rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 600;
- font-size: 28rpx;
- color: #FFFFFF;
-
- text-align: left;
- font-style: normal;
- text-align: center;
- margin-left: auto;
- margin-right: 0rpx;
- margin-top: -4rpx;
- }
- .card-list-item-button-green-2{
- width: 134rpx;
- height: 46rpx;
- border-radius: 24rpx;
- margin-left: 14rpx;
- border-radius: 24rpx;
- font-size: 24rpx;
- line-height: 46rpx;
- text-align: center;
- background: #04BA97;
- border: 2rpx solid #04BA97;
-
- color: #FFFFFF;
- }
- .card-list-item-button-green-3{
- width: 134rpx;
- height: 46rpx;
- border-radius: 24rpx;
- margin-left: 14rpx;
- border-radius: 24rpx;
- font-size: 24rpx;
- line-height: 46rpx;
- text-align: center;
- border: 2rpx solid #CECECE;
- color: #999999;
- }
- .card-list-item-button-green-success{
- position: relative;
- }
- .card-list-item-button-green-success.travel::after{
- content: " ";
- display: block;
- position: absolute;
- width: 197rpx;
- height: 156rpx;
- background-size: 100% 100%;
- background-image: url('https://xy-go.oss-cn-beijing.aliyuncs.com/7c/7c483fdcc5364b8eaf974f22f6e6783c2@2x.png');
- right: -14rpx;
- top: -80rpx;
- z-index: 1;
- }
- .card-list-item-button-green-success.shop::after{
- content: " ";
- display: block;
- position: absolute;
- width: 197rpx;
- height: 156rpx;
- background-size: 100% 100%;
- background-image: url('https://xy-go.oss-cn-beijing.aliyuncs.com/c6/c64693b7c8d54f02a9375fc68fc79c9f组 29@2x.png');
- right: -14rpx;
- top: -68rpx;
- z-index: 1;
- }
-
- .icons{
- display: flex;
- position: relative;
- .icon{
- width: 52rpx;
- height: 52rpx;
- border: 2rpx solid #FFFFFF;
- position: absolute;
- border-radius: 50%;
- margin-right: 6rpx;
- }
- .desc{
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- text-align: left;
- position: absolute;
- font-style: normal;
- width: 140rpx;
- top: 12rpx;
- }
- }
- }
-
-
-
-}
-
-
-
diff --git a/components/footer/main.scss b/components/footer/main.scss
index 03a0964..9fa8c65 100644
--- a/components/footer/main.scss
+++ b/components/footer/main.scss
@@ -117,6 +117,7 @@
left:0rpx;
right: 0rpx;
width: 750rpx;
+
.footer-item{
flex: 1;
border-radius: 50rpx;
@@ -126,27 +127,17 @@
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
- // color: #A1A6B3;
- color: var(--topicgray);
+ color: #A1A6B3;
+
flex-direction: column;
align-items: center;
text-align: center;
min-width: 100rpx;
font-size: 24rpx;
- color: #000000;
line-height: 34rpx;
- color: #20613D;
+
min-height: 40rpx;
- // .footer-bottom-brand-icon{
- // width: 90rpx;
- // height:70rpx;
- // }
- // .footer-icon{
- // width: 50rpx;
- // height: 50rpx;
- // margin-top: 20rpx;
- // }
-
+
.footer-icon.0 {
width: 37rpx;
height: 43rpx;
@@ -164,6 +155,9 @@
height: 38rpx
}
}
+ .item.cur {
+ color: #20613D;
+ }
}
}
diff --git a/main.js b/main.js
index 691a3d3..891fc3f 100644
--- a/main.js
+++ b/main.js
@@ -66,11 +66,6 @@
import footerMsg from '@/components/footer/footer-msg'
Vue.component('footer-msg', footerMsg)
-import buttonShop from '@/components/button-shop/button-shop'
-Vue.component('common-button-shop', buttonShop)
-
-import cardListItem from '@/components/card-list-item/card-list-item'
-Vue.component('card-list-item', cardListItem)
import selectItems from '@/components/common-select-items'
diff --git a/mixin/mixin.js b/mixin/mixin.js
index 5551356..0435a8b 100644
--- a/mixin/mixin.js
+++ b/mixin/mixin.js
@@ -259,13 +259,17 @@
this.page.current = 1
await this.getList()
},
- async getList() {
+ async getList(type='get') {
if (this.listApi) {
this.$message.showLoading()
const {
data
- } = await this.$http.request('get', this.listApi, {
+ } = await this.$http.request(type, this.listApi, {
params: {
+ ...this.query,
+ ...this.page
+ },
+ data:{
...this.query,
...this.page
}
@@ -292,10 +296,10 @@
}
},
- async getMore() {
+ async getMore(type='get') {
if (this.page.total > this.page.current * this.page.size) {
this.page.current += 1
- await this.getList()
+ await this.getList(type)
}
},
backHome() {
diff --git a/pages.json b/pages.json
index 780dd3b..da87714 100644
--- a/pages.json
+++ b/pages.json
@@ -4,7 +4,7 @@
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
-
+
// #ifdef PUB_CUSTOMER
{
"path": "pages/home/home",
@@ -69,11 +69,10 @@
}
},
{
- "path" : "pages/user/address/address",
- "style" :
- {
- "navigationBarTitleText" : "收货地址",
- "enablePullDownRefresh" : false
+ "path": "pages/user/address/address",
+ "style": {
+ "navigationBarTitleText": "收货地址",
+ "enablePullDownRefresh": false
}
}
],
@@ -173,6 +172,21 @@
"navigationBarTitleText": "购物车",
"enablePullDownRefresh": true
}
+ },
+ {
+ "path": "trade/list",
+ "style": {
+ "navigationBarTitleText": "商品列表",
+ "enablePullDownRefresh": true
+ }
+ },
+ {
+ "path": "trade/detail",
+ "style": {
+ "navigationBarTitleText": "商品详情",
+ "enablePullDownRefresh": false
+
+ }
}
]
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 805733e..8fa256a 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -1,275 +1,277 @@
-<template>
- <view class="main-container user-home">
- <view class="bg-top-green"></view>
- <!-- 顶部，可能 -->
- <view class="school" :style="{'padding-top':(StatusBar)+'px'
- ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">
- <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">
- <view class="picker flex">
- <uni-icons type="location" class="m-r-5" size="18"></uni-icons>
- <view>
- {{ areaIndex>=0&&schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}
- </view>
- </view>
- </picker>
- </view>
- <view class="search-container m-t-12 flex">
- <view class="flex1 input">
- <u--input placeholder="请输入花名" v-model="search_flow" @confirm="buttonSearchFlow" suffixIcon="search"
- :suffixIconStyle="{'font-size':'24px','color': '#20613D'}" >
- </u--input>
- </view>
- </view>
-
- <!-- banner -->
- <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"
- :mode="'dot'" :dots-styles="dotsStyles[0]" field="content">
- <swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"
- v-if="banners&&banners.length>0" :autoplay="true">
- <swiper-item v-for="(item, index) in banners" :key="index">
- <view class="swiper-item" :class="'swiper-item' + index">
- <image @click="previewImg(item.imageSmall||item.image)" class="home-banner-image"
- mode="aspectFit" :src="item.imageSmall||item.image">
- </image>
- </view>
- </swiper-item>
- </swiper>
- <swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">
- <swiper-item v-for="(item, index) in 1" :key="index">
- <view class="swiper-item" :class="'swiper-item' + index">
- <image class="home-banner-image" mode="scaleToFill"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">
- </image>
- </view>
- </swiper-item>
- </swiper>
- </uni-swiper-dot>
- <!-- tip -->
- <view class="m-t-12" @click="getNoticeMore">
- <uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon
- :scrollable="scrollable" :text="currentNotice.title" :key="currentNotice.id" />
- <span v-if="!currentNotice||!currentNotice.id"> </span>
- </view>
- <!-- 当前分类 -->
- <home-category></home-category>
- <!-- 特别的几个公告图片 -->
- <home-banner-imgs></home-banner-imgs>
- <!-- 均价情况 -->
- <home-price></home-price>
- <!-- 几个专区 -->
- <home-zones></home-zones>
- <!-- 置顶的花列表 -->
- <home-top-flow></home-top-flow>
-
- <view style="min-height:200rpx">
- </view>
- <common-footer flg="0"></common-footer>
-
- </view>
-</template>
-
-<script>
- import homePrice from './components/home-price.vue'
- import homeBannerImgs from './components/home-banner-imgs.vue'
- import homeZones from './components/home-zones.vue'
- import homeTopFlow from './components/home-top-flow.vue'
- import homeCategory from './components/home-category.vue'
-
- export default {
- components: {
- homeCategory,
- homePrice,
- homeBannerImgs,
- homeZones,
- homeTopFlow
- },
-
- data() {
- return {
- search_flow: '',
- CustomBar: uni.getStorageSync('CustomBar'),
- StatusBar: uni.getStorageSync('StatusBar'),
- // StatusBar:0,
- color: '#fff',
- schools: [],
- areaIndex: -1,
- scrollable: false,
-
- info: [{
- colorClass: 'uni-bg-red',
- url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
- content: '内容 A'
- },
- {
- colorClass: 'uni-bg-green',
- url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
- content: '内容 B'
- },
- {
- colorClass: 'uni-bg-blue',
- url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
- content: '内容 C'
- }
- ],
- dotStyle: [{
- backgroundColor: 'rgba(0, 0, 0, .3)',
- border: '1px rgba(0, 0, 0, .3) solid',
- color: '#fff',
- selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
- selectedBorder: '1px rgba(0, 0, 0, .9) solid'
- },
- {
- backgroundColor: 'rgba(255, 90, 95,0.3)',
- border: '1px rgba(255, 90, 95,0.3) solid',
- color: '#fff',
- selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
- selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
- },
- {
- backgroundColor: 'rgba(83, 200, 249,0.3)',
- border: '1px rgba(83, 200, 249,0.3) solid',
- color: '#fff',
- selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
- selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
- }
- ],
- currentBanner: 0,
- banners: [],
- tripList: [],
- tuangouList: [],
- hide_footer: false,
- noticeList: [],
- currentNoticeIndex: 0,
- currentNotice: {
-
- }
- };
- },
- // onShareAppMessage() {
- // let that = this;
- // var url =
- // `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`; //你的转发页面路径拼接参数
- // return {
- // title: "校购GO小狗狗",
- // path: url,
- // }
- // },
- // onShareTimeline() {
- // let that = this;
- // var url = "/pages/home/home" //你的分享页面路径
- // return {
- // title: '校购GO小狗狗',
- // path: url,
- // query: `shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`, //你的参数拼接，注意：不需要加?
- // // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' //你分享的封面
- // };
- // },
-
- onLoad() {
- // console.log('home created')
- //这里进行一次初始化即可
- // this.$http.request('get', '/api/school/area/list', {
-
- // }).then(res => {
- // if (res.code == 0) {
- // this.schools = res.data || []
- // }
- // })
- //获取banner图
- this.$http.request('get', '/api/ua/banner/list', {
-
- }).then(res => {
- if (res.code == 0) {
- this.banners = res.data.records || []
- }
- })
-
- var areaIndex = uni.getStorageSync('areaIndex')
- if (!areaIndex && areaIndex !== 0) {
-
- } else {
- this.areaIndex = areaIndex
- }
-
-
-
- //公告
- this.$http.request('get', '/api/ua/announcement/list', {
- params: {
- size: 5,
- status: 'A'
- }
- }).then(res => {
- if (res.code == 0) {
- this.noticeList = (res.data && res.data.records || [])
- console.log('this.noticeList', this.noticeList)
- if (this.noticeList.length > 0) {
- this.currentNotice = this.noticeList[0]
- if (this.currentNotice.title && this.currentNotice.title.length >= 30) {
- this.scrollable = true
- } else {
- this.scrollable = false
- }
- let that = this
- if (this.noticeList.length >= 1) {
- setInterval(() => {
- console.log('interval,1')
- that.currentNoticeIndex += 1
- that.currentNoticeIndex %= that.noticeList.length
- that.currentNotice = that.noticeList[that.currentNoticeIndex]
- that.scrollable = false
- that.$nextTick(() => {
- if (that.currentNotice.title && that.currentNotice.title
- .length >= 30) {
- that.scrollable = true
- } else {
- that.scrollable = false
- }
- })
-
- }, 8000)
- }
-
- }
- }
- })
-
-
- },
- methods: {
- buttonSearchFlow() {
- console.log('buttonSearchFlow')
- },
- pop(status) {
- this.hide_footer = !!status
- },
- changeBanner(e) {
- this.currentBanner = e.detail.current
- },
-
- getNoticeMore() {
- uni.navigateTo({
- url: '/pages/notice/list?id=' + this.currentNotice.id
- })
- },
- PickerChangeSchool(e) {
- if (e.detail.value == '-1') {
- this.$message.showToast('未选择位置')
- return
- }
- console.log(' this.schools', this.schools, parseInt(e.detail.value), e);
-
-
- this.areaIndex = parseInt(e.detail.value)
- uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);
- uni.setStorageSync('areaIndex', parseInt(e.detail.value));
-
- },
-
- }
- }
-</script>
-
-<style lang="scss" scoped>
- @import "./home.scss";
+<template>
+ <view class="main-container user-home">
+ <view class="bg-top-green"></view>
+ <!-- 顶部，可能 -->
+ <view class="school" :style="{'padding-top':(StatusBar)+'px'
+ ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">
+ <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">
+ <view class="picker flex">
+ <uni-icons type="location" class="m-r-5" size="18"></uni-icons>
+ <view>
+ {{ areaIndex>=0&&schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}
+ </view>
+ </view>
+ </picker>
+ </view>
+ <view class="search-container m-t-12 flex">
+ <view class="flex1 input">
+ <u-input placeholder="请输入花名" v-model="search_flow">
+ <template slot="suffix">
+ <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>
+ </template>
+ </u-input>
+ </view>
+ </view>
+
+ <!-- banner -->
+ <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"
+ :mode="'dot'" :dots-styles="dotsStyles[0]" field="content">
+ <swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"
+ v-if="banners&&banners.length>0" :autoplay="true">
+ <swiper-item v-for="(item, index) in banners" :key="index">
+ <view class="swiper-item" :class="'swiper-item' + index">
+ <image @click="previewImg(item.imageSmall||item.image)" class="home-banner-image"
+ mode="aspectFit" :src="item.imageSmall||item.image">
+ </image>
+ </view>
+ </swiper-item>
+ </swiper>
+ <swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">
+ <swiper-item v-for="(item, index) in 1" :key="index">
+ <view class="swiper-item" :class="'swiper-item' + index">
+ <image class="home-banner-image" mode="scaleToFill"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">
+ </image>
+ </view>
+ </swiper-item>
+ </swiper>
+ </uni-swiper-dot>
+ <!-- tip -->
+ <view class="m-t-12" @click="getNoticeMore">
+ <uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon
+ :scrollable="scrollable" :text="currentNotice.title" :key="currentNotice.id" />
+ <span v-if="!currentNotice||!currentNotice.id"> </span>
+ </view>
+ <!-- 当前分类 -->
+ <home-category></home-category>
+ <!-- 特别的几个公告图片 -->
+ <home-banner-imgs></home-banner-imgs>
+ <!-- 均价情况 -->
+ <home-price></home-price>
+ <!-- 几个专区 -->
+ <home-zones></home-zones>
+ <!-- 置顶的花列表 -->
+ <home-top-flow></home-top-flow>
+
+ <view style="min-height:200rpx">
+ </view>
+ <common-footer flg="0"></common-footer>
+
+ </view>
+</template>
+
+<script>
+ import homePrice from './components/home-price.vue'
+ import homeBannerImgs from './components/home-banner-imgs.vue'
+ import homeZones from './components/home-zones.vue'
+ import homeTopFlow from './components/home-top-flow.vue'
+ import homeCategory from './components/home-category.vue'
+
+ export default {
+ components: {
+ homeCategory,
+ homePrice,
+ homeBannerImgs,
+ homeZones,
+ homeTopFlow
+ },
+
+ data() {
+ return {
+ search_flow: '',
+ CustomBar: uni.getStorageSync('CustomBar'),
+ StatusBar: uni.getStorageSync('StatusBar'),
+ // StatusBar:0,
+ color: '#fff',
+ schools: [],
+ areaIndex: -1,
+ scrollable: false,
+
+ info: [{
+ colorClass: 'uni-bg-red',
+ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+ content: '内容 A'
+ },
+ {
+ colorClass: 'uni-bg-green',
+ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+ content: '内容 B'
+ },
+ {
+ colorClass: 'uni-bg-blue',
+ url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
+ content: '内容 C'
+ }
+ ],
+ dotStyle: [{
+ backgroundColor: 'rgba(0, 0, 0, .3)',
+ border: '1px rgba(0, 0, 0, .3) solid',
+ color: '#fff',
+ selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
+ selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+ },
+ {
+ backgroundColor: 'rgba(255, 90, 95,0.3)',
+ border: '1px rgba(255, 90, 95,0.3) solid',
+ color: '#fff',
+ selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
+ selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
+ },
+ {
+ backgroundColor: 'rgba(83, 200, 249,0.3)',
+ border: '1px rgba(83, 200, 249,0.3) solid',
+ color: '#fff',
+ selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
+ selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
+ }
+ ],
+ currentBanner: 0,
+ banners: [],
+ tripList: [],
+ tuangouList: [],
+ hide_footer: false,
+ noticeList: [],
+ currentNoticeIndex: 0,
+ currentNotice: {
+
+ }
+ };
+ },
+ // onShareAppMessage() {
+ // let that = this;
+ // var url =
+ // `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`; //你的转发页面路径拼接参数
+ // return {
+ // title: "校购GO小狗狗",
+ // path: url,
+ // }
+ // },
+ // onShareTimeline() {
+ // let that = this;
+ // var url = "/pages/home/home" //你的分享页面路径
+ // return {
+ // title: '校购GO小狗狗',
+ // path: url,
+ // query: `shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`, //你的参数拼接，注意：不需要加?
+ // // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' //你分享的封面
+ // };
+ // },
+
+ onLoad() {
+ // console.log('home created')
+ //这里进行一次初始化即可
+ // this.$http.request('get', '/api/school/area/list', {
+
+ // }).then(res => {
+ // if (res.code == 0) {
+ // this.schools = res.data || []
+ // }
+ // })
+ //获取banner图
+ this.$http.request('get', '/api/ua/banner/list', {
+
+ }).then(res => {
+ if (res.code == 0) {
+ this.banners = res.data.records || []
+ }
+ })
+
+ var areaIndex = uni.getStorageSync('areaIndex')
+ if (!areaIndex && areaIndex !== 0) {
+
+ } else {
+ this.areaIndex = areaIndex
+ }
+
+
+
+ //公告
+ this.$http.request('get', '/api/ua/announcement/list', {
+ params: {
+ size: 5,
+ status: 'A'
+ }
+ }).then(res => {
+ if (res.code == 0) {
+ this.noticeList = (res.data && res.data.records || [])
+ console.log('this.noticeList', this.noticeList)
+ if (this.noticeList.length > 0) {
+ this.currentNotice = this.noticeList[0]
+ if (this.currentNotice.title && this.currentNotice.title.length >= 30) {
+ this.scrollable = true
+ } else {
+ this.scrollable = false
+ }
+ let that = this
+ if (this.noticeList.length >= 1) {
+ setInterval(() => {
+ console.log('interval,1')
+ that.currentNoticeIndex += 1
+ that.currentNoticeIndex %= that.noticeList.length
+ that.currentNotice = that.noticeList[that.currentNoticeIndex]
+ that.scrollable = false
+ that.$nextTick(() => {
+ if (that.currentNotice.title && that.currentNotice.title
+ .length >= 30) {
+ that.scrollable = true
+ } else {
+ that.scrollable = false
+ }
+ })
+
+ }, 8000)
+ }
+
+ }
+ }
+ })
+
+
+ },
+ methods: {
+ buttonSearchFlow() {
+ console.log('buttonSearchFlow')
+ },
+ pop(status) {
+ this.hide_footer = !!status
+ },
+ changeBanner(e) {
+ this.currentBanner = e.detail.current
+ },
+
+ getNoticeMore() {
+ uni.navigateTo({
+ url: '/pages/notice/list?id=' + this.currentNotice.id
+ })
+ },
+ PickerChangeSchool(e) {
+ if (e.detail.value == '-1') {
+ this.$message.showToast('未选择位置')
+ return
+ }
+ console.log(' this.schools', this.schools, parseInt(e.detail.value), e);
+
+
+ this.areaIndex = parseInt(e.detail.value)
+ uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);
+ uni.setStorageSync('areaIndex', parseInt(e.detail.value));
+
+ },
+
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "./home.scss";
</style>
\ No newline at end of file
diff --git a/static/common/icon-arrow-down.png b/static/common/icon-arrow-down.png
new file mode 100644
index 0000000..66fb3bb
--- /dev/null
+++ b/static/common/icon-arrow-down.png
Binary files differ
diff --git a/static/common/icon-kf.png b/static/common/icon-kf.png
new file mode 100644
index 0000000..7a2cbbc
--- /dev/null
+++ b/static/common/icon-kf.png
Binary files differ
diff --git a/static/images/customer/gwc.png b/static/images/customer/gwc.png
new file mode 100644
index 0000000..1ade1cc
--- /dev/null
+++ b/static/images/customer/gwc.png
Binary files differ
diff --git a/sub_pages/customer/detail.vue b/sub_pages/customer/detail.vue
new file mode 100644
index 0000000..8183fd0
--- /dev/null
+++ b/sub_pages/customer/detail.vue
@@ -0,0 +1,22 @@
+<template>
+ <view>
+
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+
+ }
+ },
+ methods: {
+
+ }
+ }
+</script>
+
+<style>
+
+</style>
diff --git a/sub_pages/customer/trade/list.vue b/sub_pages/customer/trade/list.vue
new file mode 100644
index 0000000..66d74ea
--- /dev/null
+++ b/sub_pages/customer/trade/list.vue
@@ -0,0 +1,354 @@
+<template>
+ <!-- 列表页面 -->
+ <view class="trade-list">
+ <view class="category-detail flex">
+ <view class="flex1 info">
+ <view class="title flex">
+ <view>牛油果泡泡</view>
+ <view>
+ <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
+
+ </view>
+ </view>
+ <view class="desc">
+ 规格：10支/扎
+ </view>
+ <view class="desc">
+ 估重：1.3kg/扎
+ </view>
+ <view class="desc">
+ 包袋：棉袋
+ </view>
+ </view>
+ <view class="info-price">
+ <view class="title">当日均价</view>
+ <view class="price">19.66</view>
+ <view class="flex desc">
+ <view class="m-l-a m-r-5">+0.76</view>
+ <view class="m-r-a m-l-5">+4.02%</view>
+ </view>
+ </view>
+ </view>
+ <view class="" style="min-height: calc(100vh - 260rpx);">
+ <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
+ <view v-else>
+ <!-- 查询条件 -->
+ <view class="component-filter-container">
+ <view class="flex1">
+ 等级<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1">
+ 等级<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1">
+ 好卖家<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1">
+ 颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1">
+ 筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ </view>
+ </view>
+ <view class="item flex" v-for="(item,index) of list" :key="index"
+ @click="toDetail(item)">
+ <view class="img">
+ <image class="img img100"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">
+ </image>
+ <view class="level">
+ A级
+ </view>
+ </view>
+
+ <view class="m-l-12 info-container flex1">
+ <view class="title">
+ 橙色芭比
+ <view class="price">
+ ￥6.60/扎
+ </view>
+ </view>
+ <view class="shop-name">
+ 牛油果泡泡·白色
+ </view>
+ <view class="other-info flex">
+ <view class="m-r-15">
+ 已售:7
+ </view>
+ <view class="m-r-15">
+ 剩余:13
+ </view>
+ <view class="m-r-15">
+ 1支/扎
+ </view>
+ </view>
+ <view class="bottom-buttons flex">
+
+ <view class="icons flex">
+ <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
+ @click.stop="mulnum(item)"></uni-icons>
+ <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
+ <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"
+ @click.stop="addnum(item)"></uni-icons>
+ </view>
+ </view>
+ </view>
+ </view>
+
+
+ <view class="icon-shop" v-if="list&&list.length>0">
+ <!-- 购物图标 -->
+ <!-- 如果有购买的东西，就要附带数字了 -->
+ <view v-if="shoptotal>0" class="number">
+ {{shoptotal}}
+ </view>
+ </view>
+ </view>
+
+ <!-- 判断是否到底了，自动吧 -->
+ <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ query: {
+ category: '',
+ },
+ shoptotal:0,
+ list:[{},{},{}]
+ }
+ },
+ async onLoad(options) {
+ // this.list = [{},{}]
+ console.log('options', options)
+ this.query.category = options.categoryId || ''
+ this.listApi = '/api/customer/flower/list'
+ // await this.getList('post')
+ // this.
+ },
+ onReachBottom() {
+ this.page.current += 1
+ this.getMore('post')
+ },
+ async onPullDownRefresh() {
+ this.page.current = 1
+ await this.getList('post')
+ uni.stopPullDownRefresh()
+ },
+ methods: {
+ toDetail(item) {
+ uni.navigateTo({
+ url: `/sub_pages/customer/trade/detail?id=${item.id}`
+ })
+ },
+ mulnum(item) {
+ if (item.shopnum > 0) {
+ item.shopnum -= 1
+ }
+ this.shoptotal -= 1
+ this.$forceUpdate()
+
+ },
+ addnum(item) {
+ if (item.shopnum) {
+ item.shopnum += 1
+ } else {
+ item.shopnum = 1
+ }
+ this.shoptotal += 1
+ this.$forceUpdate()
+ },
+ }
+ }
+</script>
+
+<style lang="scss">
+ .trade-list {
+ padding: 24rpx 30rpx;
+
+ .category-detail {
+ padding: 22rpx 38rpx;
+ margin-bottom: 10rpx;
+ background-color: #E1F0E7;
+ border-radius: 8rpx;
+
+ .info {
+ .title {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #000000;
+ line-height: 50rpx;
+ }
+
+ .icon-kf {
+ width: 44rpx;
+ height: 44rpx;
+ }
+
+ .desc {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ margin-top: 8rpx;
+ }
+ }
+
+ .info-price {
+ padding: 22rpx;
+ text-align: center;
+ background: #FFFFFF;
+ border-radius: 8rpx;
+ min-width: 260rpx;
+ .title {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #000000;
+ line-height: 34rpx;
+ }
+
+ .price {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #BF0000;
+ line-height: 44rpx;
+ margin-top: 12rpx;
+ }
+
+ .desc {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ margin-top: 12rpx;
+ }
+ }
+ }
+
+ .item {
+ margin-top: 20rpx;
+ background: #FFFFFF;
+ border-radius: 8rpx;
+ padding: 10rpx;
+
+ .info-container {
+ position: relative;
+
+ .other-info {
+ margin-top: 6rpx;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ text-align: left;
+ }
+
+ .shop-name {
+ margin-top: 14rpx;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ }
+
+ .bottom-buttons {
+ // width: 400rpx;
+ position: absolute;
+ bottom: 0rpx;
+
+ left: 0;
+ right: 0;
+
+ .icons {
+ margin-left: auto;
+ margin-right: 0rpx;
+ margin-top: -10rpx;
+
+ .curnums {
+ line-height: 60rpx;
+ margin-left: 12rpx;
+ margin-right: 12rpx;
+ }
+ }
+ }
+
+ .title {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #000000;
+ line-height: 44rpx;
+ margin-top: 8rpx;
+ position: relative;
+
+ .price {
+ position: absolute;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #CF0000;
+ line-height: 40rpx;
+ top: 0;
+ right: 0;
+ }
+ }
+
+ }
+
+ .img {
+ width: 206rpx;
+ height: 206rpx;
+ border-radius: 8rpx;
+ position: relative;
+
+ .level {
+ position: absolute;
+ width: 66rpx;
+ height: 44rpx;
+ background: #20613D;
+ left: 0;
+ top: 0;
+ border-top-left-radius: 8rpx;
+ border-bottom-right-radius: 8rpx;
+ color: #FFFFFF;
+ line-height: 44rpx;
+ font-size: 24rpx;
+ text-align: center;
+ }
+
+ }
+
+
+ }
+
+ .icon-shop {
+ position: absolute;
+ position: fixed;
+
+ background-image: url('../../../static/images/customer/gwc.png');
+ width: 140rpx;
+ height: 140rpx;
+ // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
+ border-radius: 50%;
+ right: 40rpx;
+ bottom: 300rpx;
+ background-size: 100% 100%;
+
+ .number {
+ width: 30rpx;
+ height: 30rpx;
+ background: #F20000;
+ line-height: 30rpx;
+ text-align: center;
+ position: absolute;
+ right: 14rpx;
+ top: 14rpx;
+ color: #FFFFFF;
+ border-radius: 50%;
+ font-size: 24rpx;
+ }
+
+ }
+
+ }
+</style>
\ No newline at end of file
diff --git a/sub_pages/customer/trade/trade.vue b/sub_pages/customer/trade/trade.vue
index 523f096..4539785 100644
--- a/sub_pages/customer/trade/trade.vue
+++ b/sub_pages/customer/trade/trade.vue
@@ -1,613 +1,329 @@
-<template>
- <view class="container-canteen" style="min-height: calc(100vh - 20rpx );">
-
- <view class="canteen-items" style="min-height: calc(100vh - 360rpx);">
- <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
-
- </view>
- <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>
- <view class="" style="display: flex;flex-wrap: inherit;" v-else>
- <view class="type-list">
- <view v-for="(item,index) of types" @click="changeType(item)"
- :class="[query.typeId==item.id?'current':'']" :key="index" class="p10 flex type-item">
- {{item.name || '-'}}
- </view>
- </view>
- <view class="canteen-item-container">
- <view v-for="(item,index) of listFilter" :key="item.id" class="p10 canteen-item list"
- style="display: flex;flex-wrap: inherit;">
- <view class="m-r-10">
- <image :src="item.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)">
- </image>
- </view>
- <view class="cateen_infos list">
- <view class="title">{{item.name}}</view>
- <view class="desc">月售:{{item.monthSale || '0'}}</view>
- <view class="flex bottom-buttons flex">
- <view class="price flex">
- <view class="icon">￥</view>
- <view class='num'>{{item.price || '-'}}</view>
- </view>
- <view class="icons flex">
- <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
- @click="mulnum(item)"></uni-icons>
- <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
- <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
- </view>
- </view>
- </view>
- <view style="padding-bottom:100rpx">
- </view>
- </view>
-
- <footer-msg v-if="query.block&&query.schoolArea"
- :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
-
- </view>
- </view>
-
- </view>
-
-
-
- <view style="min-height:200rpx">
- </view>
- <common-footer flg="1"></common-footer>
-
- </view>
-</template>
-
-<script>
- import {
- mapState
- } from 'vuex'
- export default {
- data() {
- return {
- list: [],
- showpop: false,
- query: {
- name: '',
- // status:'',
- schoolArea: '',
- schoolAreaStr: '',
- block: '',
- blockStr: '',
- typeId: '',
- },
- types: [{
- name: '全部',
- id: ''
- }],
- schools: [],
- schoolIndex: -1,
- blockIndex: -1,
- blocks: [],
- shoptotal: 0,
- cal: 0,
- }
- },
- async onLoad() {
- // this.list = [{
- // 'shopnum': 0
- // }, {
- // 'shopnum': 1
- // }]
-
- //加载分类
- this.$http.request('get', '/api/canteen/goods/type/list', {
- params: {
- size: 100
- }
- }).then(async res => {
- if (res.code == 0) {
- this.types = res.data && res.data.records || []
- this.types.unshift({
- name: '全部',
- id: ''
- });
-
- }
- })
-
- this.listApi = '/api/canteen/customer/goods/list'
-
- // this.getList()
- //加载校区、楼栋
- this.$http.request('get', '/api/school/area/list', {
-
- }).then(async res => {
- if (res.code == 0) {
- this.schools = res.data || []
- // this.schools = [{
- // 'name': '全部',
- // 'id': '',
- // }]
- // for (var item of arr) {
- // this.schools.push(item)
- // }
- }
- console.log('schools', this.schools)
- var schoolIndex = uni.getStorageSync('schoolIndex')
- if (!schoolIndex && schoolIndex !== 0) {
- // await this.getList()
- // this.list.forEach(item => {
- // if (!item.shopnum) {
- // item.shopnum = 0
- // }
- // })
- } else {
- this.schoolIndex = schoolIndex
- if (this.schoolIndex >= 0) {
- this.PickerChangeSchool({
- detail: {
- value: this.schoolIndex
- }
- })
- // await this.getList()
- // this.list.forEach(item => {
- // if (!item.shopnum) {
- // item.shopnum = 0
- // }
- // })
- }
- }
-
- })
-
-
- },
- methods: {
- changeType(item) {
- this.query.typeId = item.id || ''
- },
- async PickerChangeSchool(e) {
- if (e.detail.value == '-1') {
- this.$message.showToast('未选择校区')
- return
- }
- this.schoolIndex = parseInt(e.detail.value)
- this.query.schoolArea = this.schools[this.schoolIndex].id
- this.blockIndex = -1
-
- this.$message.showLoading()
- var {
- data
- } = await this.$http.request('get', '/api/school/block/list', {
- params: {
- schoolArea: this.query.schoolArea,
- size: 200
- }
- })
-
- this.blocks = data && data.records || []
- // var arr = data.records || []
- // this.blocks = [{
- // 'name': '全部',
- // 'id': '',
- // }]
- // for (var item of arr) {
- // this.blocks.push(item)
- // }
- this.$message.hideLoading()
- if (this.blocks.length >= 1) {
- this.query.block = this.blocks[0].id
- this.query.blockStr = this.blocks[0].name
- this.page.current = 1
- this.blockIndex = 0
- this.list = []
- this.getList()
- } else {
- this.page.current = 1
- this.list = []
- }
-
-
-
- },
- async PickerChangeBlock(e) {
- if (e.detail.value == '-1') {
- this.$message.showToast('未选择楼栋')
- return
- }
- this.blockIndex = parseInt(e.detail.value)
- this.query.block = this.blocks[this.blockIndex].id
- this.page.current = 1
- // this.list = []
- this.list = []
- // this.getList()
- await this.getList()
- this.list.forEach(item => {
- if (!item.shopnum) {
- item.shopnum = 0
- }
- })
-
- },
- mulnum(item) {
- if (item.shopnum > 0) {
- item.shopnum -= 1
- }
- this.shoptotal -= 1
- this.cal += 1
- this.$forceUpdate()
-
- },
- addnum(item) {
- // console.log('addnum', item)
- if (item.shopnum) {
- item.shopnum += 1
- } else {
- item.shopnum = 1
- }
- this.shoptotal += 1
- this.cal += 1
- this.$forceUpdate()
- },
- openShopDetail() {
- // this.showpop = false
- // this.$forceUpdate()
- this.cal += 1
- this.$refs.popup_shop_detail.open()
- this.$nextTick(() => {
- this.$refs.addressselect && this.$refs.addressselect.init()
- })
- },
- closeShopDetail() {
- // this.showpop = true
- this.$refs.popup_shop_detail.close()
- },
- async submitGood() {
- var values = []
- for (var item of this.list) {
- if (item.shopnum > 0) {
- values.push({
- id: item.id,
- num: item.shopnum
- })
- }
- }
- //购买
- if (!this.address.id) {
- this.$message.showToast('请先选择收获地址')
- return
- }
-
- await this.$message.confirm('确定购买吗?')
- this.$message.showLoading()
- const {
- code,
- data
- } = await this.$http.request('post', '/api/canteen/customer/order', {
- data: {
- customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
- this
- .address.room || '') + (this.address.address || ''),
- customerTel: this.address.tel,
- customer: this.address.name,
- goodsList: values, //规格
- }
- })
-
- this.$message.hideLoading()
- if (code == 0) {
-
- this.list.forEach(item => {
- item.shopnum = 0
- })
- this.shoptotal = 0
- this.cal += 1
- this.$refs.popup_shop_detail.close()
- this.$forceUpdate()
-
- //todo，预支付
- //深夜食堂的逻辑不太一样
- if (true) {
- const orderInfo = await this.$http.request('get', '/api/canteen/customer/payment/' + data
- .orderId, {})
- //支付准备
- var info = orderInfo.data
- let that = this
- wx.requestPayment({
- ...info,
- success(res) {
- console.log('pay success', res)
- uni.navigateTo({
- url: '/pages/canteen/canteen-success/canteen-success'
- })
- },
- fail(err) {
- console.error('pay fail', err)
- that.$message.showToast('支付失败')
- }
- })
- } else {
- uni.navigateTo({
- url: '/pages/canteen/canteen-success/canteen-success'
- })
- }
-
-
- }
- }
- },
- computed: {
- ...mapState({
- address: state => {
- return state.defaultaddress || {}
- },
- }),
- selectprices() {
- var arr = 0
- for (var item of this.list) {
- if (item.shopnum > 0) {
- // arr.push(item)
- arr += (item.price >= 0 ? item.price : 0) * item.shopnum
- }
- }
- if (this.cal > 0) {
- return arr
-
- }
- return 0
- },
- selectgoods() {
- var arr = []
- for (var item of this.list) {
- if (item.shopnum > 0) {
- arr.push(item)
- }
- }
- if (this.cal > 0) {
- return arr
-
- }
- return arr
-
- },
- listFilter() {
- if (this.query.typeId) {
- var arr = []
- if (this.list && this.list.length > 0) {
- for (var item of this.list) {
- if (item.typeId === this.query.typeId || item.type === this.query.typeId) {
- arr.push(item)
- }
- }
- }
- return arr
- } else {
- return this.list
- }
-
- },
- // shoptotal() {
- // var a = 0
- // for (var item of this.list) {
- // a += item.shopnum || 0
- // }
- // console.log('shoptotal',a,this.list)
- // return a
- // }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .container-canteen {
- background-color: #FFFFFF;
-
- .type-list {
- max-width: 178rpx;
- width: 178rpx;
- min-width: 178rpx;
- background: #EEF7F5;
- border-radius: 8rpx;
- min-height: calc(100vh - 300rpx);
- max-height: calc(100vh - 300rpx);
- overflow-y: scroll;
- margin-left: 30rpx;
-
- .type-item {
- text-align: center;
- font-weight: 400;
- font-size: 28rpx;
- color: #000000;
- line-height: 88rpx;
- // padding-left: 30rpx;
- // padding-right: 30rpx;
- }
-
- .type-item.current {
- font-weight: 600;
- font-size: 28rpx;
- color: #04BA97;
- }
- }
-
- .title-before-blue.green {
- padding-left: 30rpx;
- padding-bottom: 0rpx;
- }
-
- .title-before-blue:before {
- color: #04BA97;
- font-weight: 600;
- min-width: 14rpx;
- background: #04BA97;
- border-radius: 8rpx;
- display: inline-block;
- }
-
- .popup_shop_detail {
- background: #FFFFFF;
- // padding: 30rpx 0rpx;
- padding-bottom: 30rpx;
-
- .footer-shop {
- margin: 0 auto;
- margin-top: 46rpx;
- }
-
- .common-address-select {
- margin-left: 20rpx;
- margin-right: 20rpx;
- }
-
- .close-parent {
- margin-right: 20rpx;
- }
-
- .canteen-items {
- .canteen-item {
- margin-left: 20rpx;
- margin-right: 0rpx;
-
- .cateen_infos {
- width: 440rpx;
-
- }
-
- .cateen_infos.list {
- max-width: 30 0rpx;
- min-width: 200rpx;
- }
- }
- }
- }
-
- .canteen-items {
- // margin-left: 30rpx;
-
- .canteen-item {
- margin-left: 30rpx;
- margin-right: 30rpx;
- // width: 690rpx;
- // max-width: 690rpx;
- height: 206rpx;
- background: #FFFFFF;
- border-radius: 16rpx;
- display: flex;
- margin-bottom: 24rpx;
-
- .cover {
- width: 202rpx;
- height: 202rpx;
- }
-
- .title {
- font-weight: 600;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- }
-
- .desc {
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- }
-
- .price {
-
- font-size: 24rpx;
-
- .icon {
- line-height: 60rpx;
- }
-
- .num {
- font-weight: 600;
- font-size: 36rpx;
- color: #000000;
- // line-height: 50rpx;
- }
- }
-
- .cateen_infos {
- width: 400rpx;
- position: relative;
- }
-
- .cateen_infos.list {
- max-width: 300rpx;
- min-width: 200rpx;
-
- }
-
- .bottom-buttons {
- // width: 400rpx;
- position: absolute;
- bottom: 0rpx;
-
- left: 0;
- right: 0;
-
- .icons {
- margin-left: auto;
- margin-right: 0;
-
- .curnums {
- line-height: 60rpx;
- }
- }
- }
- }
-
- .canteen-item-container {
- width: 100%;
- min-height: 300rpx;
- max-height: calc(100vh - 300rpx);
- overflow-y: scroll;
- }
-
- .canteen-item.list {
- margin-right: 0rpx;
- flex: 1;
- margin-bottom: 0rpx;
-
- .cover {
- width: 158rpx;
- height: 158rpx;
- }
- }
- }
-
- .canteen-footer-shop {
- position: absolute;
- position: fixed;
- left: 30rpx;
- bottom: 30rpx;
- }
-
- .area-select {
- .area {
-
- margin-right: 0rpx;
-
- .t {
- font-weight: 400;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- }
-
- .i {}
- }
-
- .area-1 {
- margin-left: auto;
- }
-
- .area-2 {
- margin-left: 84rpx;
- }
- }
-
- .canteen-banner {
- width: 750rpx;
- min-height: 360rpx;
- }
- }
+<template>
+ <view class="container-trade" style="min-height: calc(100vh - 20rpx );">
+ <view class="search-container m-t-12 flex" v-if="!(!list||list.length==0)&&true">
+ <view class="flex1 input">
+ <u-input placeholder="请输入分类名称" v-model="query.name">
+ <template slot="suffix">
+ <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>
+ </template>
+ </u-input>
+ </view>
+ </view>
+ <view class="canteen-items" style="min-height: calc(100vh - 160rpx);">
+ <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
+
+ </view>
+ <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data>
+ <view class="" style="display: flex;flex-wrap: inherit;" v-else>
+ <view class="type-list">
+ <view v-for="(item,index) of list" @click="changeType(item)"
+ :class="[query.categoryId==item.id?'current':'']" :key="index" class="p10 flex type-item">
+ {{item.name || '-'}}
+ </view>
+ </view>
+ <view class="canteen-item-container">
+ <view class="component-filter-container" style="padding-top: 12rpx;">
+ <view class="flex1">
+ 销量
+ </view>
+ <view class="flex1">
+ 颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1">
+ 筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ </view>
+ <u-divider></u-divider>
+ <view class="flex">
+ <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list"
+ @click.stop="toDetailList(item)">
+ <view class="m-r-10">
+ <image :src="item.imageUrl" mode="scaleToFill" class="cover"
+ @click.stop="previewImg(item.imageUrl)">
+ </image>
+ </view>
+ <view class="cateen_infos list">
+ <view class="title">{{item.name}}</view>
+ <view class="price">￥29.01-30.01</view>
+
+ <view class="desc">在售14410扎</view>
+ <!-- <view class="icons flex">
+ <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
+ @click="mulnum(item)"></uni-icons>
+ <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
+ <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
+ </view> -->
+ </view>
+ <view style="padding-bottom:100rpx">
+ </view>
+ </view>
+
+ </view>
+ <footer-msg v-if="query.block&&query.schoolArea"
+ :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
+
+ </view>
+ </view>
+
+ </view>
+
+
+
+ <view style="min-height:200rpx">
+ </view>
+ <common-footer flg="1"></common-footer>
+
+ </view>
+</template>
+
+<script>
+ import {
+ mapState
+ } from 'vuex'
+ export default {
+ data() {
+ return {
+ list: [],
+ showpop: false,
+ query: {
+ name: '',
+ categoryId: '',
+ },
+
+ }
+ },
+ onPullDownRefresh() {
+ this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {
+ var data = res.data
+ this.list = data || []
+ if (this.list.length > 0) {
+ this.query.categoryId = this.list[0].id || ''
+ }
+ }).finally(() => {
+ uni.stopPullDownRefresh()
+ })
+ },
+ async onLoad() {
+
+ //加载分类
+ this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {
+ var data = res.data
+ this.list = data || []
+ if (this.list.length > 0) {
+ this.query.categoryId = this.list[0].id || ''
+ }
+ })
+ },
+ methods: {
+ buttonSearchFlow() {
+ //根据名称查询
+ this.$message.showLoading()
+ this.$http.request('get', '/api/customer/flower/category/tree', {
+ params: {
+ name: this.query.name || ''
+ }
+ }).then(res => {
+ var data = res.data
+ this.list = data || []
+ if (this.list.length > 0) {
+ this.query.categoryId = this.list[0].id || ''
+ } else {
+ this.query.categoryId = ''
+ }
+ }).finally(() => {
+ this.$message.hideLoading()
+ })
+ },
+ toDetailList(item) {
+ //去商品列表页面
+ uni.navigateTo({
+ url: `/sub_pages/customer/trade/list?categoryId=${item.id}`
+ })
+ },
+ changeType(item) {
+ this.query.categoryId = item.id || ''
+ },
+
+
+ async submitGood() {
+ var values = []
+ for (var item of this.list) {
+ if (item.shopnum > 0) {
+ values.push({
+ id: item.id,
+ num: item.shopnum
+ })
+ }
+ }
+ }
+ },
+ computed: {
+ ...mapState({
+ address: state => {
+ return state.defaultaddress || {}
+ },
+ }),
+ listFilter() {
+ if (this.query.categoryId) {
+ var arr = []
+ if (this.list && this.list.length > 0) {
+ for (var item of this.list) {
+ if (item.id === this.query.categoryId || item.id === this.query.categoryId) {
+ // arr.push(item)
+ return item.children || []
+ }
+ }
+ }
+ return arr
+ } else {
+ return []
+ }
+
+ },
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .container-trade {
+ background-color: #FFFFFF;
+ padding-top: 20rpx;
+
+ .search-container {
+ margin: 0rpx 30rpx 20rpx 30rpx;
+ }
+
+
+
+ .type-list {
+ max-width: 178rpx;
+ width: 178rpx;
+ min-width: 178rpx;
+ background: #EEF7F5;
+ border-radius: 8rpx;
+ min-height: calc(100vh - 300rpx);
+ max-height: calc(100vh - 300rpx);
+ overflow-y: scroll;
+ margin-right: 16rpx;
+
+ .type-item {
+ text-align: center;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #000000;
+ line-height: 88rpx;
+ // padding-left: 30rpx;
+ // padding-right: 30rpx;
+ }
+
+ .type-item.current {
+ font-weight: 600;
+ font-size: 28rpx;
+ color: #04BA97;
+ }
+ }
+
+ .title-before-blue.green {
+ padding-left: 30rpx;
+ padding-bottom: 0rpx;
+ }
+
+ .title-before-blue:before {
+ color: #04BA97;
+ font-weight: 600;
+ min-width: 14rpx;
+ background: #04BA97;
+ border-radius: 8rpx;
+ display: inline-block;
+ }
+
+
+ .canteen-items {
+ // margin-left: 30rpx;
+
+ .canteen-item {
+ margin: 0 auto;
+ width: 164rpx;
+ // width: 690rpx;
+ // max-width: 690rpx;
+ height: 266rpx;
+ background: #FFFFFF;
+ margin-bottom: 44rpx;
+ max-width: 164rpx;
+
+ .cover {
+ width: 164rpx;
+ height: 164rpx;
+ background-size: 100% 100%;
+ border-radius: 8rpx;
+ border: 2rpx solid #f8f8f8;
+ }
+
+ .title {
+ font-weight: 500;
+ font-size: 28rpx;
+ color: #000000;
+ line-height: 40rpx;
+ }
+
+ .desc {
+ margin-top: 8rpx;
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #6E9F66;
+ line-height: 34rpx;
+ height: 34rpx;
+ background-color: rgba(202, 229, 214, 0.57);
+ border-radius: 4rpx;
+ text-align: center;
+
+ }
+
+ .price {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #CF0000;
+ line-height: 34rpx;
+ text-align: center;
+ }
+
+
+
+
+
+ }
+
+ .canteen-item-container {
+ width: 100%;
+ min-height: 300rpx;
+ max-height: calc(100vh - 200rpx);
+ overflow-y: scroll;
+ }
+
+ .canteen-item:nth-child(3n+1) {
+ margin-left: 0rpx;
+ margin-right: 15rpx;
+ }
+
+ .canteen-item:nth-child(3n+2) {
+ margin-left: 15rpx;
+ margin-right: 15rpx;
+ }
+
+ .canteen-item:nth-child(3n+3) {
+ margin-left: 15rpx;
+ margin-right: 0rpx;
+ }
+ }
+
+ .canteen-footer-shop {
+ position: absolute;
+ position: fixed;
+ left: 30rpx;
+ bottom: 30rpx;
+ }
+
+
+
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3