合并代码
This commit is contained in:
parent
492f4b56e6
commit
2b19011781
|
|
@ -67,15 +67,6 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索",
|
||||
"navigationStyle": "custom",
|
||||
"onReachBottomDistance": 100,
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/commodity/index",
|
||||
"style": {
|
||||
|
|
@ -180,10 +171,10 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/pay-use/index",
|
||||
"path": "pages/mine/setting/usePay",
|
||||
"style": {
|
||||
"navigationBarTitleText": "先用后付",
|
||||
"navigationStyle": "custom"
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -632,8 +623,7 @@
|
|||
},
|
||||
{
|
||||
"path": "pages/shop/store/commodities",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品管理",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationStyle": "custom"
|
||||
|
|
@ -641,55 +631,78 @@
|
|||
},
|
||||
{
|
||||
"path": "pages/release/commodity",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "发布商品"
|
||||
"style": {
|
||||
"navigationBarTitleText": "发布商品",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/feedback",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "意见反馈"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/setting/safeCenter",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "安全中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/setting/bankCard",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "我的银行卡"
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的卡包"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/setting/bankCardAdd",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加银行卡",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/wallet/get",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/wallet/merchantBill",
|
||||
"style" :
|
||||
{
|
||||
"style": {
|
||||
"navigationBarTitleText": "商家账单",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/setting/teen",
|
||||
"style": {
|
||||
"navigationBarTitleText": "青少年模式"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/setting/binding",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的绑定",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/mine/setting/feedback",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "意见反馈",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shop/search",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "搜索",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -71,13 +71,6 @@
|
|||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="line">
|
||||
<view class="key">姓名</view>
|
||||
<view class="value inputBox">
|
||||
<input v-model="form.name" placeholder="输入金额" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="typeList[typeIndex].key === 'bank'">
|
||||
|
||||
<view class="line">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
<script setup>
|
||||
// 锁住app
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
//
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
} from 'vue'
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
// api
|
||||
import api from '@/api/index.js'
|
||||
// 加密
|
||||
import CryptoJS from 'crypto-js';
|
||||
const store = useStore()
|
||||
//
|
||||
const form = reactive({})
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let result = store.state.userinfo
|
||||
return result
|
||||
})
|
||||
|
||||
// 提交
|
||||
function handleSubmit() {
|
||||
const data = {
|
||||
...form
|
||||
}
|
||||
//
|
||||
if (!data.userPassword) {
|
||||
util.alert('验证密码不能为空')
|
||||
return
|
||||
}
|
||||
// 手机号
|
||||
data.userPhone = userinfo.value.userPhone
|
||||
// md5加密
|
||||
data.userPassword = CryptoJS.MD5(data.userPassword).toString();
|
||||
|
||||
api.login.validateUserPassWord({
|
||||
data,
|
||||
}).then(rs => {
|
||||
if (rs.code === 200) {
|
||||
// 更新用户信息解除青少年模式
|
||||
unLockTeenMode()
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 解除青少年模式
|
||||
function unLockTeenMode() {
|
||||
api.mine.updateUserInfo({
|
||||
data: {
|
||||
userId: userinfo.value.userId,
|
||||
youth: '0',
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
// uni.navigateBack()
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container pr fmid fdc">
|
||||
<view class="title f40 b">输入登录密码解锁未成年模式</view>
|
||||
|
||||
<view class="account mtb20 c666 f32">当前账号: {{userinfo.userPhone}}</view>
|
||||
|
||||
<view class="password mtb30 br20">
|
||||
<input class="input" type="text" v-model="form.userPassword" placeholder="登录密码" />
|
||||
</view>
|
||||
|
||||
<view class="button btn lg bar black mt60" @click="handleSubmit">解锁</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
// 密码
|
||||
.password {
|
||||
width: 80%;
|
||||
background-color: #eee;
|
||||
|
||||
//
|
||||
.input {
|
||||
padding: 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<template>
|
||||
<view class="jy-pay-use pr" :style="{ height: screenHeight() }">
|
||||
<!-- 先付后用 -->
|
||||
<view class="container-open" v-if="PayUse">
|
||||
<image :src="minePayUse" mode="aspectFill"></image>
|
||||
<view><span>先用后付</span><span class="success">开通成功</span></view>
|
||||
</view>
|
||||
<view class="container-close" v-else>
|
||||
<view class="bfff">
|
||||
<JyCommonHead :isRight="false"></JyCommonHead>
|
||||
</view>
|
||||
<image :src="minePayUse" mode="aspectFill"></image>
|
||||
<view><span>先用后付</span><span class="success">开通成功</span></view>
|
||||
<text class="reel">购买卷轴用户可享用</text>
|
||||
<view class="edit-box">
|
||||
<uni-section title="当前可用额度（元）">
|
||||
<template v-slot:right>
|
||||
<view class="df"><text>3000</text>/<text>3000</text></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部的关闭服务 -->
|
||||
<view class="jy-pay-use-close pa" @click="serverOC" :style="{ bottom: bottomSafeAreaHeight() }">
|
||||
<button class="button">{{ minePayUse ? "关闭服务" : "开启服务" }}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import minePayUse from '@/static/mine-pay-use.png'
|
||||
import { screenHeight, bottomSafeAreaHeight } from '@/components/public/Mixins.js'
|
||||
import JyCommonHead from '@/components/public/jy-common-head'
|
||||
|
||||
const PayUse = ref(false)
|
||||
// 我是关闭服务
|
||||
const serverOC = () => {
|
||||
console.log('====================================');
|
||||
console.log('关闭服务');
|
||||
console.log('====================================');
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.jy-pay-use {
|
||||
background-color: #ffffff;
|
||||
|
||||
.container-open {
|
||||
//全屏居中
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #37B111;
|
||||
}
|
||||
}
|
||||
|
||||
.container-close {
|
||||
//全屏居中
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #37B111;
|
||||
}
|
||||
|
||||
.reel {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
margin: 4rpx 0 46rpx 0;
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #37B111;
|
||||
}
|
||||
}
|
||||
|
||||
.jy-pay-use-close {
|
||||
//左右居中
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
/* 自动布局子元素 */
|
||||
width: 702rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50rpx;
|
||||
|
||||
/* 自动布局 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24rpx 40rpx;
|
||||
align-self: stretch;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #37B111;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<script setup>
|
||||
// 我的绑定
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
getCurrentInstance
|
||||
} from 'vue'
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
} from '@dcloudio/uni-app'
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance()
|
||||
// 仓库
|
||||
const store = useStore()
|
||||
// 绑定的项
|
||||
const bindItem = ref({})
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let result = store.state.userinfo
|
||||
return result
|
||||
})
|
||||
// 绑定列表
|
||||
const bindList = computed(() => {
|
||||
let result = [{
|
||||
img: '/static/wx.png',
|
||||
name: '微信号',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
img: '/static/shop-alipay-payment.png',
|
||||
name: '支付宝号',
|
||||
vlaue: '',
|
||||
}
|
||||
]
|
||||
return result
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
//
|
||||
})
|
||||
|
||||
// 点击项
|
||||
function handleItem(item) {
|
||||
bindItem.value = item
|
||||
proxy.$refs.bind.open()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="container">
|
||||
|
||||
<view class="line rows mtb30 mlr30 ptb40 plr30 bfff br20" v-for="(item,index) in bindList" :key="index"
|
||||
@click="handleItem(item)">
|
||||
<image class="wh80" :src="item.img" mode="aspectFit" />
|
||||
<view class="f1 ml20">
|
||||
<view class="key f32">{{item.name}}</view>
|
||||
|
||||
<view class="content mt10 c999 f26">
|
||||
<text v-if="item.value">{{item.value}}</text>
|
||||
<text v-else>未绑定</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- -->
|
||||
<uni-popup ref="bind" type="bottom">
|
||||
<view class="bindAlt popBot plr30 bfff">
|
||||
<view class="header rows mtb30">
|
||||
<view class="">绑定{{bindItem.name}}</view>
|
||||
</view>
|
||||
|
||||
<view class="inputBox mtb30 ptb10 plr20">
|
||||
<input type="text" placeholder="请输入" />
|
||||
</view>
|
||||
|
||||
<view class="hint mtb30 c999 f26">请核对信息后进行绑定，因信息错误产生的问题后果自负</view>
|
||||
|
||||
<view class="btn bar black mtb30">添加</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.bindAlt {
|
||||
.hint {
|
||||
color: #aa3333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<script setup>
|
||||
// 意见反馈
|
||||
// 联系方式 描述问题 描述详情 问题图片
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="form mtb30 mlr30 ptb20 plr30 bfff br20">
|
||||
<view class="line">
|
||||
<view class="key f36">请输入您遇到的问题标题</view>
|
||||
<view class="value inputBox">
|
||||
<input type="text" placeholder="请输入描述问题标题" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="key f36">请输入您遇到的问题详情</view>
|
||||
<view class="value inputBox">
|
||||
<textarea class="textarea" type="text" placeholder="请输入描述问题详情" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="key f36">请输入您遇到的问题</view>
|
||||
<view class="imgList mt30">
|
||||
<view class="imgs upload fmid wh180 br20">
|
||||
<uni-icons type="plusempty" size="80rpx" color="#aaa" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="key f36">请输入您的联系方式</view>
|
||||
<view class="value inputBox">
|
||||
<input type="text" placeholder="请输入联系方式" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn lg bar black mt60 mb30">提交</view>
|
||||
</view>
|
||||
|
||||
<view class="fill"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
.form {
|
||||
.line {
|
||||
margin: 40rpx 0;
|
||||
|
||||
.key {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 20rpx;
|
||||
padding: 15rpx 20rpx;
|
||||
}
|
||||
|
||||
// 上传
|
||||
.upload {
|
||||
border: 4rpx dashed #ddd;
|
||||
}
|
||||
|
||||
// 多行文本框
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,11 +16,6 @@
|
|||
<view class="content">主动冻结账号保护账号资产</view>
|
||||
</view>
|
||||
|
||||
<view class="line">
|
||||
<view class="title">解冻账号</view>
|
||||
<view class="content">风险解除后，可选择冻结账号</view>
|
||||
</view>
|
||||
|
||||
<view class="line">
|
||||
<view class="title">解冻账号</view>
|
||||
<view class="content">风险解除后，可选择解除冻结</view>
|
||||
|
|
@ -28,7 +23,7 @@
|
|||
|
||||
<view class="line">
|
||||
<view class="title">账号注销</view>
|
||||
<view class="content">提交申请，清空当前账号，三年内可通过实名信息找回</view>
|
||||
<view class="content">提交申请，清空当前账号</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
inject,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import {
|
||||
|
|
@ -127,7 +126,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="userinfo.id">
|
||||
<template v-if="userinfo.id || 1">
|
||||
<view class="line rows">
|
||||
<view class="">修改账号</view>
|
||||
<view class="f1 tar c999 f28">{{userinfo.account}}</view>
|
||||
|
|
@ -150,8 +149,8 @@
|
|||
</view>
|
||||
|
||||
<template v-if="userinfo.id || 1">
|
||||
<view class="area" @click="link('pages/mine/pay-use/index')">
|
||||
<view class="line rows">
|
||||
<view class="area">
|
||||
<view class="line rows" @click="link('/pages/mine/setting/usePay')">
|
||||
<view class="">先用后付</view>
|
||||
<uni-icons type="right" />
|
||||
</view>
|
||||
|
|
@ -171,7 +170,7 @@
|
|||
<uni-icons type="right" />
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20 plr10" @click="link('/pages/mine/teen')">
|
||||
<view class="line rows ptb20 plr10" @click="link('/pages/mine/setting/teen')">
|
||||
<view class="">青少年模式</view>
|
||||
<view class="f1 tar">
|
||||
<uni-icons type="right" />
|
||||
|
|
@ -199,7 +198,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 支付宝 微信 -->
|
||||
<view class="line rows">
|
||||
<view class="line rows" @click="link('/pages/mine/setting/binding')">
|
||||
<view class="">我的绑定</view>
|
||||
<uni-icons type="right" />
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
<script setup>
|
||||
// 工具库
|
||||
import util from '@/common/js/util.js'
|
||||
//
|
||||
import api from '@/api/index.js'
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
import {
|
||||
computed
|
||||
} from 'vue';
|
||||
// vuex
|
||||
const store = useStore()
|
||||
// 用户信息
|
||||
const userinfo = computed(() => {
|
||||
let result = store.state.userinfo
|
||||
return result
|
||||
})
|
||||
|
||||
// 开启青少年模式
|
||||
function handleUpdate() {
|
||||
api.mine.updateUserInfo({
|
||||
data: {
|
||||
youth: 1,
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
// 设置闹铃
|
||||
setAlarm()
|
||||
return
|
||||
}
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 设置时间
|
||||
function setAlarm() {
|
||||
// 当前时间+40分钟
|
||||
let endTime = new Date().getTime()
|
||||
//
|
||||
endTime = util.strtotime('+40 minute', endTime)
|
||||
//
|
||||
const maxDateTime = new Date().setHours(20, 0, 0).valueOf()
|
||||
// console.log(new Date(endTime).valueOf(), maxDateTime)
|
||||
endTime = util.formatTime('yyyy-MM-dd HH:mm:ss', Math.min(new Date(endTime).valueOf(), maxDateTime))
|
||||
|
||||
// 40分之后的
|
||||
api.video.setAlarm({
|
||||
query: {
|
||||
//
|
||||
endTime,
|
||||
// 1倒计时闹钟 2时间闹钟 3青少年闹钟
|
||||
type: 3,
|
||||
}
|
||||
}).then(rs => {
|
||||
if (rs.code == 200) {
|
||||
util.alert('设置成功')
|
||||
// 设置
|
||||
util.setAlarm({
|
||||
"userId": userinfo.value.userId,
|
||||
"endTime": endTime,
|
||||
"type": 3
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
util.alert({
|
||||
content: rs.msg,
|
||||
showCancel: false,
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="container pr">
|
||||
<image class="background" src="/static/teen.png" mode="widthFix" />
|
||||
<!-- <view class="">青少年模式说明</view> -->
|
||||
|
||||
<view class="notice pa c333 f28">
|
||||
<view class="mtb30">开启青少年模式后，将自动为您开启时间锁，单日使用时间不超过40分钟，晚上10点至早上6点无法使用九亿</view>
|
||||
<view class="mtb30">青少年模式开启后，如果到了使用时间需要输入密码解锁关闭青少年模式</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn pro black mtb30 mlr60" v-if="userinfo.youth == 1">已开启青少年模式</view>
|
||||
<view class="btn pro black mtb30 mlr60" v-else @click="handleUpdate">开启青少年模式</view>
|
||||
|
||||
<view class="fill" style="height: 30rpx;"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.app {
|
||||
background-color: #eaceb9;
|
||||
}
|
||||
|
||||
//
|
||||
.background {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 提示
|
||||
.notice {
|
||||
margin: 0 120rpx;
|
||||
bottom: 120rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<view class="jy-pay-use pr">
|
||||
<!-- 先付后用 -->
|
||||
<view class="container-open" v-if="0">
|
||||
<image :src="minePayUse" mode="aspectFill"></image>
|
||||
<view><span>先用后付</span><span class="success">开通成功</span></view>
|
||||
</view>
|
||||
|
||||
<view class="container-close" v-else>
|
||||
<image :src="minePayUse" mode="aspectFill"></image>
|
||||
<view><span>先用后付</span><span class="success">开通成功</span></view>
|
||||
<text class="reel">购买卷轴用户可享用</text>
|
||||
<view class="edit-box">
|
||||
<uni-section title="当前可用额度（元）">
|
||||
<template v-slot:right>
|
||||
<view class="df"><text>3000</text>/<text>3000</text></view>
|
||||
</template>
|
||||
</uni-section>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部的关闭服务 -->
|
||||
<view class="footer plr30" @click="serverOC" :style="{ bottom: bottomSafeAreaHeight() }">
|
||||
<view class="btn lg bar black">{{ minePayUse ? "关闭服务" : "开启服务" }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import minePayUse from '@/static/mine-pay-use.png'
|
||||
import {
|
||||
screenHeight,
|
||||
bottomSafeAreaHeight
|
||||
} from '@/components/public/Mixins.js'
|
||||
import JyCommonHead from '@/components/public/jy-common-head'
|
||||
|
||||
const PayUse = ref(false)
|
||||
// 我是关闭服务
|
||||
const serverOC = () => {
|
||||
console.log('====================================');
|
||||
console.log('关闭服务');
|
||||
console.log('====================================');
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.jy-pay-use {
|
||||
background-color: #ffffff;
|
||||
|
||||
.container-open {
|
||||
//全屏居中
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #37B111;
|
||||
}
|
||||
}
|
||||
|
||||
.container-close {
|
||||
//全屏居中
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #37B111;
|
||||
}
|
||||
|
||||
.reel {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
margin: 4rpx 0 46rpx 0;
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #37B111;
|
||||
}
|
||||
}
|
||||
|
||||
.jy-pay-use-close {
|
||||
//左右居中
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,10 +4,130 @@
|
|||
|
||||
<template>
|
||||
<view class="app">
|
||||
<!-- -->
|
||||
<view class="container">
|
||||
|
||||
<view class="main area">
|
||||
<view class="title mtb20">商品图片</view>
|
||||
<view class="imgList mt20">
|
||||
<view class="imgs">
|
||||
<image class="wh120" src="/static/shop-upload-image.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="title mtb20">商品标题</view>
|
||||
<textarea class="textarea mtb20" placeholder="最多输入60字符（30个汉字）" />
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">类目</view>
|
||||
<view class="col f1">
|
||||
<text class="placeholderStyle">点击选择</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">规格</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入规格" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">价格</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入价格" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">库存</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入库存" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">发货时间</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入时间" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">运费</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入价格" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">所在地</view>
|
||||
<view class="col f1">
|
||||
<input type="text" placeholder="输入所在地" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="line rows ptb20">
|
||||
<view class="title w150">代金券</view>
|
||||
<view class="col f1">
|
||||
<text class="placeholderStyle">点击选择</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area">
|
||||
<view class="title rows mtb20">
|
||||
<image src="/static/commodity-release-video.png" mode="aspectFit" class="wh45" />
|
||||
<view class="f1 ml20">添加链接到视频</view>
|
||||
</view>
|
||||
<view class="rows mtb20">
|
||||
<view class="mr10 f28">再第几秒展示</view>
|
||||
<input type="text" placeholder="输入秒数" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fill" style="height: 210rpx;"></view>
|
||||
|
||||
<view class="footer plr30 bfff shadow">
|
||||
<view class="btn lg primary">立即上架</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
//
|
||||
.container {
|
||||
color: #333;
|
||||
|
||||
// 内容
|
||||
.area {
|
||||
overflow: hidden;
|
||||
margin: 20rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
}
|
||||
|
||||
.line+.line {
|
||||
border-top: 2rpx solid #eee;
|
||||
}
|
||||
|
||||
// 标题
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
//
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<script setup>
|
||||
// 商户主页
|
||||
// 底部菜单
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
<script setup>
|
||||
//
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
} from 'vue'
|
||||
import {
|
||||
onReachBottom,
|
||||
onPullDownRefresh,
|
||||
onShow,
|
||||
onLoad,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex'
|
||||
// 顶部状态栏
|
||||
import statusBar from '@/components/header/statusBar'
|
||||
// 顶部导航
|
||||
import apex from '@/components/header/apex'
|
||||
// 产品列表
|
||||
import productList from '@/components/shop/productList/productList';
|
||||
// 底部导航
|
||||
import footerMneu from '@/components/footerMenu/footerMenu'
|
||||
//
|
||||
import util from '@/common/js/util';
|
||||
// 当前方式 search搜索 result搜索结果
|
||||
const mode = ref('result')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="apexBox pr">
|
||||
<apex mode="flex" bgColor="#ffffff00">
|
||||
<template #content>
|
||||
<view class="searchBox rows f1 ml20 ptb10 plr20 bfff br20">
|
||||
<uni-icons type="search" size="40rpx" color="#999" />
|
||||
<input type="text" v-model="keyword" class="f1 mlr20" placeholder="请输入关键字"
|
||||
@blur="handleSearch" />
|
||||
<uni-icons type="camera" size="40rpx" color="#999" />
|
||||
<view class="btn bar sm primary ml20 plr20">搜索</view>
|
||||
</view>
|
||||
</template>
|
||||
</apex>
|
||||
<view class="shopHeaderBg pfull"></view>
|
||||
</view>
|
||||
|
||||
<view class="container f1 pr">
|
||||
<scroll-view scroll-y="true" class="scroll">
|
||||
<view class="main oh">
|
||||
<template v-if="mode === 'search'">
|
||||
<view class="searchList">
|
||||
<view class="header rows">
|
||||
<view class="title">历史搜索</view>
|
||||
<uni-icons type="trash" size="30rpx" color="#999" />
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item,index) in 3" :key="index">袖子</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="searchList">
|
||||
<view class="header rows">
|
||||
<view class="title">搜索发现</view>
|
||||
<view class="rows">
|
||||
<uni-icons type="refreshempty" size="30rpx" color="#999" />
|
||||
<view class="ml10 f24 c999">换一批</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item,index) in 4" :key="index">笔记本电脑</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="mode == 'result'">
|
||||
<view class="product oh">
|
||||
<view class="screen rows bfff">
|
||||
<view class="item fmid f1">
|
||||
<view>综合</view>
|
||||
<uni-icons type="bottom" size="30rpx" color="#999" />
|
||||
</view>
|
||||
|
||||
<view class="item fmid f1">
|
||||
<view>销量</view>
|
||||
<uni-icons type="bottom" size="30rpx" color="#999" />
|
||||
</view>
|
||||
|
||||
<view class="item fmid f1">
|
||||
<view>价格</view>
|
||||
<uni-icons type="bottom" size="30rpx" color="#999" />
|
||||
</view>
|
||||
|
||||
<view class="item fmid f1">
|
||||
<view>筛选</view>
|
||||
<uni-icons type="bars" size="30rpx" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list mtb30 mlr30">
|
||||
<productList />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
.apexBox {
|
||||
overflow: hidden;
|
||||
padding-bottom: 30rpx;
|
||||
|
||||
//
|
||||
.shopHeaderBg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
.container {
|
||||
margin-top: -30rpx;
|
||||
padding-top: 30rpx;
|
||||
|
||||
.scroll {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索列表
|
||||
.searchList {
|
||||
margin: 30rpx;
|
||||
|
||||
.title {
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.item {
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 5rpx 15rpx;
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 产品
|
||||
.product {
|
||||
.screen {
|
||||
font-size: 24rpx;
|
||||
|
||||
.item {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<template>
|
||||
<view class="search-container">
|
||||
<view class="title">
|
||||
<text>历史记录</text>
|
||||
<view @click="clearHistory">
|
||||
<uni-icons class="icon" type="trash" size="18">
|
||||
</uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<text @click="search(item)" class="item" v-for="(item, index) in history" :key="index">
|
||||
{{ item }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="title">
|
||||
<text>搜索发现</text>
|
||||
<view @click="getSearchFound">
|
||||
<uni-icons class="icon" type="reload" size="18" />
|
||||
换一批
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<text @click="search(item)" class="item" v-for="(item, index) in search_found" :key="index">
|
||||
{{ item }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineEmits } from 'vue'
|
||||
// 历史记录
|
||||
const history = ref([])
|
||||
//搜索发现
|
||||
const search_found = ref([])
|
||||
//是否展示历史记录
|
||||
const clearHistory = () => {
|
||||
//移除本地存储
|
||||
uni.removeStorageSync('history')
|
||||
history.value = []
|
||||
}
|
||||
const emit = defineEmits(['search'])
|
||||
//点击了记录
|
||||
const search = (val) => {
|
||||
emit('search', val)
|
||||
}
|
||||
const getSearchFound = async () => {
|
||||
//
|
||||
}
|
||||
//本地获取历史记录
|
||||
const getHistory = () => {
|
||||
history.value = uni.getStorageSync('history') || []
|
||||
}
|
||||
const init = () => {
|
||||
getHistory()
|
||||
getSearchFound()
|
||||
}
|
||||
|
||||
init()
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.search-container {
|
||||
margin-top: 40rpx;
|
||||
padding: 0 40rpx;
|
||||
background: $uni-bg-color;
|
||||
border-top-left-radius: 40rpx;
|
||||
border-top-right-radius: 40rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.item {
|
||||
width: fit-content;
|
||||
font-size: 26rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 50rpx;
|
||||
opacity: 1;
|
||||
/* 自动布局 */
|
||||
display: flex;
|
||||
color: #333333;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8rpx 16rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
gap: 10rpx;
|
||||
background: #F6F8FE;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,361 +0,0 @@
|
|||
<template>
|
||||
<view class="zh-wrapper">
|
||||
<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
|
||||
<view class="wrapper">
|
||||
<view class="menu" :id="`menu-${item.id}`" :class="{ 'current': item.id == curCateId }"
|
||||
v-for="(item, index) in goods" :key="index" @click="handleMenuTap(item.id)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop"
|
||||
@scroll="handleGoodsScroll">
|
||||
<view class="wrapper">
|
||||
<view class="list">
|
||||
<!-- category begin -->
|
||||
<view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`">
|
||||
<slot name="custom" :data="item">
|
||||
<view class="title">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="items">
|
||||
<!-- 商品 begin -->
|
||||
<view class="good" v-for="(good, key) in item.goods_list" :key="key">
|
||||
<view class="right">
|
||||
<view class="tips">
|
||||
<text @click="clickTips(tips)" class="tips_item"
|
||||
:class="{ 'tips_current': handerTips(tips) }"
|
||||
v-for="(tips, k) in good.tips" :key="k">
|
||||
{{ tips }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品 end -->
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
|
||||
<!-- category end -->
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, getCurrentInstance, watch, defineEmits } from "vue";
|
||||
const props = defineProps({
|
||||
scrollList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
const instance = getCurrentInstance();
|
||||
const menuScrollIntoView = ref("");
|
||||
const curCateId = ref(6905);
|
||||
const cateScrollTop = ref(0);
|
||||
// 计算高度状态
|
||||
const sizeCalcState = ref(false);
|
||||
const goods = ref([]);
|
||||
//选中的数组
|
||||
const curCate = ref([])
|
||||
const emit = defineEmits(['clickTips'])
|
||||
//tips选中
|
||||
const clickTips = (id) => {
|
||||
//判断id是否在里面
|
||||
let index = curCate.value.indexOf(id)
|
||||
if (index > -1) {
|
||||
//删除
|
||||
curCate.value.splice(index, 1)
|
||||
} else {
|
||||
//添加
|
||||
curCate.value.push(id)
|
||||
}
|
||||
emit('clickTips', curCate)
|
||||
}
|
||||
//判断是否有选中的tips
|
||||
const handerTips = (id) => {
|
||||
//判断id是否在里面
|
||||
return curCate.value.indexOf(id) > -1
|
||||
}
|
||||
//重置选择
|
||||
const resetTips = () => {
|
||||
curCate.value = []
|
||||
}
|
||||
//暴露方法
|
||||
defineExpose({
|
||||
resetTips
|
||||
})
|
||||
//监听数据变化
|
||||
watch(
|
||||
() => props.scrollList,
|
||||
newVal => {
|
||||
goods.value = newVal;
|
||||
nextTick(() => {
|
||||
if (newVal && newVal.length > 0) {
|
||||
calcSize();
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
// 点击左侧菜单
|
||||
function handleMenuTap(id) {
|
||||
if (!sizeCalcState.value) {
|
||||
calcSize()
|
||||
}
|
||||
curCateId.value = id
|
||||
nextTick(() => {
|
||||
cateScrollTop.value = goods.value.find(item => item.id == id).top
|
||||
})
|
||||
}
|
||||
|
||||
// 商品滚动
|
||||
function handleGoodsScroll({ detail }) {
|
||||
if (!sizeCalcState.value) {
|
||||
calcSize()
|
||||
}
|
||||
const { scrollTop } = detail
|
||||
// 此处scrollTop + 1为了处理scrolltop的偏差值
|
||||
let tabs = goods.value.filter(item => item.top <= (scrollTop + 1)).reverse()
|
||||
if (tabs.length > 0) {
|
||||
curCateId.value = tabs[0].id
|
||||
}
|
||||
}
|
||||
|
||||
function calcSize() {
|
||||
let h = 10
|
||||
|
||||
goods.value.forEach(item => {
|
||||
let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`)
|
||||
view.fields({
|
||||
size: true
|
||||
}, (data) => {
|
||||
item.top = h
|
||||
h += data.height
|
||||
item.bottom = h
|
||||
}).exec()
|
||||
})
|
||||
sizeCalcState.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$text-color-assist: #919293; // 辅助色
|
||||
$text-color-base: #5A5B5C; // 基础色
|
||||
$choose: #FF9B27;
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zh-wrapper {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.menus {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: $uni-bg-color-grey;
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 30rpx 20rpx;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
position: relative;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 130rpx;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $uni-bg-color;
|
||||
color: $choose;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
font-size: $uni-font-size-sm;
|
||||
background-color: $uni-color-primary;
|
||||
color: $uni-bg-color;
|
||||
top: 16rpx;
|
||||
right: 10rpx;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: $uni-bg-color;
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20rpx;
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
font-size: $uni-font-size-base;
|
||||
padding-bottom: 130rpx;
|
||||
|
||||
:deep(.category) {
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
padding: 30rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-color-base;
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.items) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: -30rpx;
|
||||
|
||||
.good {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding-right: 14rpx;
|
||||
|
||||
.name {
|
||||
font-size: $uni-font-size-base;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 172rpx;
|
||||
height: 74rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
background: $uni-bg-color-grey;
|
||||
margin: 10rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
&.tips_current {
|
||||
color: $choose;
|
||||
background: rgba(248, 209, 164, 0.2);
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #FF9B27;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.price_and_action {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price {
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: $uni-font-size-sm;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
|
||||
&.property_btn {
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
&.add_btn,
|
||||
&.reduce_btn {
|
||||
padding: 0;
|
||||
width: 44rpx;
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
background-color: $uni-bg-color;
|
||||
border: 1px solid $uni-color-primary;
|
||||
color: $uni-color-primary;
|
||||
font-size: $uni-font-size-sm;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
right: -12rpx;
|
||||
top: -10rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
<template>
|
||||
<view class="sort-container df fdr jcsa aic">
|
||||
<view class="sort-item" v-for="(item, index) in filteredList" :key="index" @click="emit('status', item)">
|
||||
<uni-data-select v-if="item.list" :localdata="item.list" v-model="item.value" :clear="false">
|
||||
<template #icon="{ showPicker }">
|
||||
<image class="ud" :src="showPicker ? up : down"></image>
|
||||
</template>
|
||||
</uni-data-select>
|
||||
<view class="df aic" v-else>
|
||||
<view class="label">{{ item.label }}</view>
|
||||
<view class="up-down df fdc jcsa aic">
|
||||
<image v-if="item.isUp" class="ud mb5" :src="up"></image>
|
||||
<image v-if="item.isDown" class="ud" :src="down"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="up-down" v-if="item.slot">
|
||||
<slot :name="item.slot">
|
||||
<uni-icons type="bars" size="16"></uni-icons>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineEmits } from 'vue'
|
||||
import down from '@/static/down.png';
|
||||
import up from '@/static/up.png';
|
||||
|
||||
const props = defineProps({
|
||||
filteredList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['status'])
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.sort-container {
|
||||
padding: 20rpx 0;
|
||||
// 上下圆角
|
||||
border-radius: 50rpx 50rpx 0 0;
|
||||
background-color: #fff;
|
||||
margin-top: 10rpx;
|
||||
|
||||
::v-deep .uni-select {
|
||||
border: none !important;
|
||||
|
||||
.uni-select__selector {
|
||||
width: fit-content;
|
||||
|
||||
}
|
||||
|
||||
.uni-select__selector-item {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.uni-select__input-text {
|
||||
margin-right: 8rpx;
|
||||
font-size: $uni-font-size-lg;
|
||||
color: $uni-text-color;
|
||||
line-height: 42rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-item {
|
||||
display: flex;
|
||||
|
||||
.label {
|
||||
font-size: $uni-font-size-lg;
|
||||
color: $uni-text-color;
|
||||
line-height: 42rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.ud {
|
||||
width: 20rpx;
|
||||
height: 14rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.up-down {
|
||||
|
||||
|
||||
.icon {
|
||||
color: $uni-text-color-grey
|
||||
}
|
||||
|
||||
.up,
|
||||
.down {
|
||||
color: $uni-bg-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
<template>
|
||||
<JyPopup ref="popup" type="bottom" title="筛选">
|
||||
<view class="content">
|
||||
<!-- 筛选内容 -->
|
||||
<JyLinkage v-if="scrollList.length > 0" ref="jy_linkage" class="jy-linkage" :scrollList="scrollList"
|
||||
@clickTips="onGoodItem">
|
||||
</JyLinkage>
|
||||
<!-- 幽灵盒子 -->
|
||||
<view class="jy-bottom-btn-ghost"></view>
|
||||
<view class="btn-group">
|
||||
<view class="reset" @click="reset">重置</view>
|
||||
<view class="determine" @click="close">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</JyPopup>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import JyLinkage from '../jy-linkage'
|
||||
import JyPopup from '@/components/public/jy-popup'
|
||||
const popup = ref(null)
|
||||
const jy_linkage = ref(null)
|
||||
const scrollList = ref([{
|
||||
"id": 6905,
|
||||
"goods_list": [
|
||||
{
|
||||
"id": 65825,
|
||||
"content": "享早餐指定饮品半价",
|
||||
"name": "晨间套餐",
|
||||
"tips": ['1', '2', '3']
|
||||
}
|
||||
],
|
||||
"name": "早晨的享受"
|
||||
},
|
||||
{
|
||||
"id": 6906,
|
||||
"goods_list": [
|
||||
{
|
||||
"id": 65826,
|
||||
"content": "购买牛角包,享咖啡买一送一",
|
||||
"name": "午后小食",
|
||||
"tips": ['1', '2', '3']
|
||||
},
|
||||
{
|
||||
"id": 65827,
|
||||
"content": "购买鸡蛋饼,享茶饮半价",
|
||||
"name": "中午套餐",
|
||||
"tips": ['1', '2', '3']
|
||||
}
|
||||
],
|
||||
"name": "午间时光"
|
||||
}])
|
||||
const onGoodItem = (item) => {
|
||||
console.log(item);
|
||||
uni.showToast({
|
||||
title: `点击了 ${item.name}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
const reset = () => {
|
||||
jy_linkage.value.resetTips()
|
||||
}
|
||||
const close = () => {
|
||||
popup.value.close()
|
||||
}
|
||||
const open = () => {
|
||||
popup.value.open()
|
||||
}
|
||||
defineExpose({
|
||||
close, open
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
$bg-text: #F6F6F6;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
background: $uni-bg-color;
|
||||
//上面两个圆角
|
||||
border-top-left-radius: 50rpx;
|
||||
border-top-right-radius: 50rpx;
|
||||
|
||||
.jy-linkage {
|
||||
height: calc(100% - 120px);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
font-weight: 600;
|
||||
font-size: $uni-font-size-lg;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 30rpx;
|
||||
display: inline-block;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.jy-bottom-btn-ghost {
|
||||
height: 124rpx;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-bottom: 40rpx;
|
||||
width: 100%;
|
||||
|
||||
.determine {
|
||||
width: 428rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||||
}
|
||||
|
||||
.reset {
|
||||
/* 自动布局子元素 */
|
||||
width: 234rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
/* 自动布局 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #F6F8FE;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
<template>
|
||||
<JyCommonHead ref="jy_head" background="jb">
|
||||
<template #center>
|
||||
<JySearch ref="jy_search" :disabled="false" @search="setHistory"></JySearch>
|
||||
</template>
|
||||
<template #bottom>
|
||||
<JyScreen v-if="!showHistory" @status="statusScreening" :filteredList="filteredList"></JyScreen>
|
||||
<!-- -->
|
||||
<jyHistory v-if="showHistory" class="history-list" @search="clickHistory"></jyHistory>
|
||||
</template>
|
||||
</JyCommonHead>
|
||||
<!-- 内容 -->
|
||||
<!-- 商品卡片组 加载更多 -->
|
||||
<!-- <JyContent ref="jy_content" v-if="!showHistory"></JyContent> -->
|
||||
<!-- 筛选详情弹窗 -->
|
||||
<!-- <JyScreening ref="jy_screening"></JyScreening> -->
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
// 内容
|
||||
// import JyContent from '@/components/public/jy-shop-content'
|
||||
// 筛选
|
||||
import JyScreen from './components/jy-screen'
|
||||
// 头部
|
||||
import JyCommonHead from '@/components/public/jy-common-head'
|
||||
// 搜索
|
||||
import JySearch from '../components/jy-search'
|
||||
// 筛选
|
||||
// import JyScreening from './components/jy-screening'
|
||||
//历史记录
|
||||
import jyHistory from './components/jy-history'
|
||||
import {
|
||||
onReachBottom,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
// 头部组件的ref
|
||||
const jy_head = ref(null)
|
||||
// 内容ref
|
||||
const jy_content = ref(null)
|
||||
// 显示 搜索后的列表
|
||||
const showHistory = ref(true)
|
||||
// 搜索组件的ref
|
||||
const jy_search = ref(null)
|
||||
//
|
||||
const conditions = ref({})
|
||||
const jy_screening = ref(null)
|
||||
const filteredList = ref([{
|
||||
label: '综合',
|
||||
value: 1,
|
||||
isDown: true,
|
||||
list: [{
|
||||
value: 1,
|
||||
text: '综合排序'
|
||||
}, {
|
||||
value: 2,
|
||||
text: '价格排序'
|
||||
}],
|
||||
slot: null
|
||||
}, {
|
||||
label: '销量',
|
||||
value: 2,
|
||||
slot: null
|
||||
}, {
|
||||
label: '价格',
|
||||
value: 3,
|
||||
isUp: true,
|
||||
isDown: true,
|
||||
slot: null
|
||||
}, {
|
||||
label: '筛选',
|
||||
value: 4,
|
||||
slot: 'screening',
|
||||
fun: "openPopup"
|
||||
}])
|
||||
const fun = {
|
||||
openPopup: () => {
|
||||
jy_screening.value.open()
|
||||
}
|
||||
}
|
||||
//筛选状态变更
|
||||
const statusScreening = (val) => {
|
||||
conditions.value = val
|
||||
conditions.value.currentId = val.label
|
||||
val.fun && fun[val.fun]()
|
||||
}
|
||||
//点击历史记录
|
||||
const clickHistory = (val) => {
|
||||
jy_search.value.updateSearch(val)
|
||||
}
|
||||
// 搜索
|
||||
const setHistory = (val) => {
|
||||
if (!val) {
|
||||
showHistory.value = true
|
||||
return
|
||||
}
|
||||
showHistory.value = false
|
||||
jy_head.value.updateAltitude()
|
||||
let arr = uni.getStorageSync('history') || []
|
||||
//添加到本地存储
|
||||
arr.push(val)
|
||||
//长度大于10个就删除第一个
|
||||
if (arr.length > 10) {
|
||||
arr.shift()
|
||||
}
|
||||
uni.setStorageSync('history', arr)
|
||||
}
|
||||
onReachBottom(() => {
|
||||
!showHistory.value ? jy_content.value.getData(false, 'onReachBottom') : uni.stopPullDownRefresh()
|
||||
|
||||
})
|
||||
onPullDownRefresh(() => {
|
||||
!showHistory.value ? jy_content.value.getData(false, 'onPullDownRefresh') : uni.stopPullDownRefresh()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header-search {
|
||||
padding-right: 20rpx;
|
||||
|
||||
.icon {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Loading…
Reference in New Issue