init
This commit is contained in:
BIN
components/.DS_Store
vendored
Normal file
BIN
components/.DS_Store
vendored
Normal file
Binary file not shown.
74
components/customer-skeleton/customer-skeleton.vue
Normal file
74
components/customer-skeleton/customer-skeleton.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="skeleton animated">
|
||||
<div class="skeleton-row" v-for="(item, index) in rowList" :style="item.style || {}" :key="index">
|
||||
<div class="skeleton-row-item" v-for="(colItem, colIndex) in item.colItems"
|
||||
:class="[colItem.childRowItems ? 'no-height' : '']" :key="colIndex" :style="colItem.style">
|
||||
<template v-if="colItem.childRowItems">
|
||||
<div class="skeleton-row-item" v-for="(childRowItem, childRowIndex) in colItem.childRowItems"
|
||||
:key="childRowIndex" :style="childRowItem.style || {}"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Skeleton',
|
||||
props: {
|
||||
rowList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.skeleton {
|
||||
width: 100%;
|
||||
--color: #F6F6F6;
|
||||
|
||||
&.animated {
|
||||
animation: blink 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
.skeleton-row-item {
|
||||
height: 26px;
|
||||
border-radius: 12rpx;
|
||||
display: inline-block;
|
||||
|
||||
&:not(.no-height) {
|
||||
background: var(--color);
|
||||
}
|
||||
|
||||
&.no-height {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
components/emptyCard.vue
Normal file
46
components/emptyCard.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
import {watch,ref,reactive} from "vue"
|
||||
// icons
|
||||
import normal from "/static/default_icon.png"
|
||||
import search_icon from "/static/default_search_icon.png"
|
||||
// props
|
||||
const props = defineProps(['type',"title","message"])
|
||||
// 变量
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<view class="default-icon-box">
|
||||
<view class="icon-box">
|
||||
<image v-if="type=='search'" :src="search_icon" mode="widthFix"></image>
|
||||
<image v-else :src="normal" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="text-box">
|
||||
<view class="title-part">{{title?title:'暂无数据...'}}</view>
|
||||
<view class="message-part empty-text">{{message?message:''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.default-icon-box{
|
||||
padding: 20rpx;
|
||||
.icon-box{
|
||||
text-align: center;
|
||||
image{
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
.text-box{
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color:gray;
|
||||
.title-part{
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.message-part{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
components/goodsCard.vue
Normal file
219
components/goodsCard.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<script setup>
|
||||
import { ref} from "vue"
|
||||
// type：category-分类 ； list：内容列表
|
||||
const props = defineProps(['info','type','list','title','buy_type']);
|
||||
import goodsInfo from "@/components/goodsInfo.vue"
|
||||
import goodsSpecs from "@/components/goodsSpecs.vue"
|
||||
// import goodsCartPay from "@/components/goodsCartPay.vue"
|
||||
import api from "@/api/index"
|
||||
// 变量
|
||||
const detail_info = ref(null)
|
||||
const show_state = ref(false)
|
||||
// const isShow = ref(false)
|
||||
// 函数
|
||||
function toDetail(item) { // 商品详情
|
||||
let url = ''
|
||||
// if(props.buy_type == 'group') { // 团购
|
||||
// url = '/pages/goods/goodsDetail?info='+encodeURIComponent(JSON.stringify(item))+"&buy_type="+props.buy_type
|
||||
// }
|
||||
// else if(props.buy_type == 'limited'){ // 限时秒杀
|
||||
|
||||
// }
|
||||
// else{ // 开学季尊享活动
|
||||
// url = '/pages/goods/goodsDetail?info='+encodeURIComponent(JSON.stringify(item))+"&buy_type="+props.buy_type
|
||||
// }
|
||||
url = '/pages/goods/goodsDetail?id='+item.id+'&info='+encodeURIComponent(JSON.stringify(item))+"&buy_type="+props.buy_type
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
function toPlate() { //前往板块区域，比如限时秒杀
|
||||
let url = ''
|
||||
// if(props.buy_type == 'group') { // 团购
|
||||
// url = "/pages/goods/goodsPlate?info="+JSON.stringify(props.info)
|
||||
// }
|
||||
// else{
|
||||
// return
|
||||
// }
|
||||
url = "/pages/goods/goodsPlate?info="+encodeURIComponent(JSON.stringify(props.info))+"&buy_type="+props.buy_type
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
}
|
||||
function addToCart(item) { // 加入购物车
|
||||
getGoodsDetail(item.id)
|
||||
return
|
||||
// uni.showToast({
|
||||
// title: '已加入购物车！',
|
||||
// icon:'success',
|
||||
// duration: 2000,
|
||||
// // mask:true
|
||||
// });
|
||||
}
|
||||
async function getGoodsDetail(id) {// 获取商品详情 为了打开规格选项
|
||||
const res = await api.getGoodsDetail({
|
||||
id
|
||||
})
|
||||
if(res.code === 1) {
|
||||
detail_info.value = res.data
|
||||
detail_info.value = res.data
|
||||
// 解析轮播图
|
||||
if(detail_info.value.goods_images) {
|
||||
detail_info.value.goods_images = detail_info.value.goods_images.split(",")
|
||||
detail_info.value.goods_images = detail_info.value.goods_images.map((item,i) => {
|
||||
let o = {
|
||||
image:item,
|
||||
skip_url:'',
|
||||
skip_url_type:2
|
||||
}
|
||||
return item = o
|
||||
})
|
||||
}
|
||||
// 详情
|
||||
// console.log(detail_info.value)
|
||||
show_state.value = !show_state.value
|
||||
}
|
||||
}
|
||||
function afterChoose(params) { // 确定加入购物车
|
||||
if(params.state === 1) {
|
||||
// current_info.value.id
|
||||
// getCartList() // 获取最新购物车
|
||||
uni.showToast({
|
||||
title: '已加入购物车！',
|
||||
icon:'success',
|
||||
duration: 2000,
|
||||
// mask:true
|
||||
});
|
||||
// isShow.value = true
|
||||
}
|
||||
}
|
||||
// function closedFunc() {
|
||||
// isShow.value = false
|
||||
// }
|
||||
</script>
|
||||
<template>
|
||||
<view class="goods-card-box">
|
||||
<!-- 展示分类 -->
|
||||
<view class="category-box" v-if="type === 'category'">
|
||||
<view class="gcb-title" style="justify-content: center;">
|
||||
{{title}}
|
||||
</view>
|
||||
<view class="gcb-list">
|
||||
<view class="gcb-list-card" v-for="(item,i) in list">
|
||||
<!-- <img style="width:100%;border:1px solid #f1f1f1;border-radius: 5px;" :src="item.cover" alt=""> -->
|
||||
<image style="width: 100%;border-radius: 5px;" :style="{ height: item.goods_image?'':'100rpx'}" :src="item.goods_image" mode="widthFix"></image>
|
||||
<view class="g-show-name text-ellipsis-1">{{item.goods_name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品分组 方式1-->
|
||||
<view class="goods-box" v-if="type === 'goods'">
|
||||
<view class="gcb-title" @tap="toPlate">
|
||||
<view class="title-wrap">
|
||||
{{title}}
|
||||
</view>
|
||||
<uni-icons class="toCss" type="right" color="white" size="16"></uni-icons>
|
||||
</view>
|
||||
<view class="gcb-list">
|
||||
<view class="gcb-list-card" v-for="(item,i) in list">
|
||||
<goodsInfo @tap="toDetail(item)" type=1 :info="item" >
|
||||
<template v-if="buy_type=='activity'" #btn>
|
||||
<view class="g-cart" @tap.stop="addToCart(item)">
|
||||
<image src="@/static/cart.png" mode="widthFix" ></image>
|
||||
</view>
|
||||
</template>
|
||||
</goodsInfo>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<goodsSpecs :goods_info="detail_info" @choosedOk="afterChoose" :show_state="show_state"></goodsSpecs>
|
||||
<!-- <goodsCartPay :isShow="isShow" @closedState="closedFunc"></goodsCartPay> -->
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.gcb-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.toCss{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
// position: absolute; right: 10px; top: 30%;
|
||||
}
|
||||
.title-wrap{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.g-cart{
|
||||
image{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.g-buy-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.g-price-box{
|
||||
color: #FD5B4E;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
.g-price{
|
||||
font-size: 18px;
|
||||
margin-right: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.g-price-o{
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-desc{
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.g-show-name{
|
||||
margin-top: 20rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.gcb-title{
|
||||
position: relative;
|
||||
background: linear-gradient(0deg, #82c8ea, #abdef4);
|
||||
color: white;
|
||||
padding: 16rpx 0;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.gcb-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
.gcb-list-card{
|
||||
// padding: 20rpx;
|
||||
width: 48%;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
}
|
||||
.goods-card-box{
|
||||
background: white;
|
||||
border: 1px solid #82c8ea;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40rpx;
|
||||
border-top: unset;
|
||||
.category-box{
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
225
components/goodsCart.vue
Normal file
225
components/goodsCart.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<script setup>
|
||||
// 引入
|
||||
import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
|
||||
import {ref,onMounted,nextTick,reactive,watch} from "vue"
|
||||
import myButton from "@/components/myButton.vue"
|
||||
import { useStore } from '@/store'
|
||||
import api from "@/api/index"
|
||||
import goodsInfo from "@/components/goodsInfo.vue"
|
||||
const store = useStore()
|
||||
const props = defineProps(['cart_show','cart_list']);
|
||||
const emits = defineEmits(['del_cart'])
|
||||
onLoad((e) => {
|
||||
styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
|
||||
// console.log("组件:",props.goods_info)
|
||||
// getList()
|
||||
})
|
||||
watch(
|
||||
() => props.cart_list,
|
||||
(newVal, oldVal) => {
|
||||
// info.value = newVal
|
||||
list.value = newVal
|
||||
console.log("cart_list新值：",newVal)
|
||||
updateList()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
()=>props.cart_show,
|
||||
(newVal, oldVal) => {
|
||||
styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
|
||||
cart_popup.value.open('bottom')
|
||||
})
|
||||
//变量
|
||||
const list = ref([])
|
||||
const cart_popup = ref()
|
||||
const styleObject = ref({
|
||||
height: '0px',
|
||||
})
|
||||
const total_num = ref(1)
|
||||
const current_ = ref(0)
|
||||
// 函数
|
||||
function updateList(){
|
||||
// console.log(list.value)
|
||||
if(list.value && list.value.length>0) {
|
||||
for(let item of list.value) {
|
||||
item.goods_image = item.goods.goods_image
|
||||
item.goods_name = item.goods.goods_name
|
||||
item.goods_id = item.goods.id
|
||||
item.sell_price = item.price * item.num
|
||||
item.single_price = item.price
|
||||
item.desc = item.spec.name+',￥'+item.spec.sell_price
|
||||
}
|
||||
}
|
||||
}
|
||||
async function getList() { // 获取购物车列表
|
||||
const res = await api.getCartList()
|
||||
if(res.code ===1) {
|
||||
list.value = res.data
|
||||
}
|
||||
}
|
||||
function changeNumFunc(value){
|
||||
setTimeout(() => {
|
||||
// console.log(value,current_.value)
|
||||
if(value>0) {
|
||||
list.value[current_.value].num = value
|
||||
list.value[current_.value].sell_price = list.value[current_.value].single_price * value
|
||||
// list.value[current_.value].price = value
|
||||
// 修改订单
|
||||
store.cartChange = !store.cartChange
|
||||
emits('update_cart',[list.value[current_.value].id,list.value[current_.value].num])
|
||||
}
|
||||
else if(value<1) { // 删除购物车
|
||||
// total_num.value = 1
|
||||
store.cartChange = !store.cartChange
|
||||
emits('del_cart',[list.value[current_.value].id])
|
||||
}
|
||||
else{ // 超过库存
|
||||
}
|
||||
},0)
|
||||
}
|
||||
function lockItem(i) { // 锁定当前操作的索引
|
||||
current_.value = i
|
||||
}
|
||||
async function ofunc() { // 去结算
|
||||
if(list.value.length > 0) {
|
||||
uni.navigateTo({
|
||||
url:'../order/order_submit?type=cart&info='+encodeURIComponent(JSON.stringify(props.cart_list))
|
||||
})
|
||||
}
|
||||
}
|
||||
async function clearFunc() { // 清除购物车
|
||||
if(list.value.length<1) {
|
||||
uni.showToast({
|
||||
title:"没有商品哦~",
|
||||
icon:"none"
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title:'清除提示',
|
||||
content:'确定要清除购物车吗?',
|
||||
success:(val)=>{
|
||||
console.log(val)
|
||||
if(val.confirm) {
|
||||
let arr = []
|
||||
for(let item of list.value) {
|
||||
arr.push(item.id)
|
||||
}
|
||||
store.cartChange = !store.cartChange
|
||||
emits('del_cart',arr)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="goodsCartBox">
|
||||
<uni-popup ref="cart_popup" @change="change">
|
||||
<view class="popup-content" :style="styleObject" >
|
||||
<view class="pc-top">
|
||||
<view class="pc-top-left">
|
||||
已选商品
|
||||
<text style="color: gray;">(共{{list.length}}件)</text>
|
||||
</view>
|
||||
<view class="pc-top-right" style="color: gray;" @click="clearFunc">
|
||||
清空购物车
|
||||
</view>
|
||||
</view>
|
||||
<view class="pc-content">
|
||||
<view class="list-row" v-for="(item,i) in list" @tap="lockItem(i)">
|
||||
<goodsInfo :type="2" :info="item" >
|
||||
<template #btn>
|
||||
<uni-number-box :value="item.num" @change="changeNumFunc" />
|
||||
</template>
|
||||
</goodsInfo>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pc-bottom" style="padding: 40rpx 0 ;">
|
||||
<!-- 按钮 -->
|
||||
<myButton v-if="list.length>0" style="width: 100%;" class="op-right" :type="2" @tap="ofunc(3)">
|
||||
去结算
|
||||
</myButton>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.pc-bottom{
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.goodsCartBox{
|
||||
.popup-content{
|
||||
position: relative;
|
||||
padding-top: 40rpx;
|
||||
background-color: white;
|
||||
border-radius: 10px 10px 0 0;
|
||||
overflow: scroll;
|
||||
.pc-top{
|
||||
position: fixed;
|
||||
top: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 40rpx;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
}
|
||||
.pc-content{
|
||||
.list-row{
|
||||
padding: 20rpx;
|
||||
}
|
||||
margin-bottom: 260rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.pc-row{
|
||||
padding:0 40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
.pcr-title{
|
||||
color: gray;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.pc-choose-card-box{
|
||||
.pc-choose-card{
|
||||
display: inline-block;
|
||||
background: #f1f1f1;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
// font-weight: bolder;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-info{
|
||||
display: flex;
|
||||
// align-items:;
|
||||
.pcr-left{
|
||||
margin-right: 40rpx;
|
||||
.pcrl-img-box{
|
||||
border: 2rpx solid #dadada;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
image{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pcr-right{
|
||||
.pcrr-row{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
components/goodsCartPay.vue
Normal file
169
components/goodsCartPay.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
import { onLoad,onShow } from "@dcloudio/uni-app"
|
||||
import api from "@/api/index"
|
||||
import {ref,onMounted,nextTick,watch} from "vue"
|
||||
// import custom from "@/utils/index"
|
||||
import { useStore } from '@/store'
|
||||
const store = useStore()
|
||||
// import searchBox from "@/components/searchBox.vue"
|
||||
// import notice from "@/components/notice.vue"
|
||||
// import goodsInfo from "@/components/goodsInfo.vue"
|
||||
// import goodsSpecs from "@/components/goodsSpecs.vue"
|
||||
import goodsCart from "@/components/goodsCart.vue"
|
||||
const props = defineProps(['isShow']);
|
||||
const emits = defineEmits([])
|
||||
watch(() => {
|
||||
return props.isShow
|
||||
},(val1,val2) => {
|
||||
console.log(props.isShow)
|
||||
})
|
||||
// 变量
|
||||
const cart_show = ref(false)
|
||||
const current_ = ref(0)
|
||||
const choosed_list = ref([])
|
||||
const choosed_info_list = ref([])
|
||||
const totalprice = ref(0)
|
||||
const detail_info = ref(null)
|
||||
// 函数
|
||||
function showCart() { // 打开购物车
|
||||
cart_show.value = !cart_show.value
|
||||
}
|
||||
async function update_cart_func(params) {
|
||||
// console.log(params)
|
||||
const res = await api.updateCart({
|
||||
cart_id:params[0],
|
||||
num:params[1]
|
||||
})
|
||||
if(res.code === 1) {
|
||||
getCartList()
|
||||
}
|
||||
}
|
||||
const cart_list = ref(null)
|
||||
async function getCartList() { // 购物车列表
|
||||
const res = await api.getCartList()
|
||||
// console.log(res)
|
||||
if(res.code === 1) {
|
||||
// if(res.data.length >0) {
|
||||
cart_list.value = res.data
|
||||
// console.log(cart_list.value)
|
||||
totalprice.value = cart_list.value.reduce((total,item) => {
|
||||
return total + parseFloat(item.price)
|
||||
},0)
|
||||
// choosed_list.value.push(item.id)
|
||||
// totalprice.value += item.sell_price
|
||||
// choosed_info_list.value.push(item)
|
||||
// }
|
||||
}
|
||||
}
|
||||
async function toPay() { // 跳转支付
|
||||
// 获取默认地址，若无，则跳转地址设置界面
|
||||
const res = await api.getDefaultAddress()
|
||||
if(res.code ===1 ) {
|
||||
if(!res.data) { // 没有默认地址
|
||||
uni.showToast({
|
||||
title:"请设置默认地址",
|
||||
duration:1500,
|
||||
icon:'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url:'../address/index'
|
||||
})
|
||||
},1500)
|
||||
}
|
||||
else{
|
||||
uni.navigateTo({
|
||||
url:'../order/order_submit?info='+encodeURIComponent(JSON.stringify(cart_list.value))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="goodsCartPayBox">
|
||||
<view class="checkoutBox" v-if="cart_list && cart_list.length>0" @tap="showCart">
|
||||
<!-- 结算信息 -->
|
||||
<view class="checkoutBox-left">
|
||||
<!-- 商品数量 -->
|
||||
<view class="goods-num">
|
||||
<image src="../..//static/cart2.png" mode=""></image>
|
||||
<view class="num-show">{{cart_list.length}}</view>
|
||||
</view>
|
||||
<!-- 价格信息以及配送费 -->
|
||||
<view class="goods-info">
|
||||
<view class="g-price">￥{{totalprice}}</view>
|
||||
<view class="g-price-o" >
|
||||
<!-- 另需配送费￥10 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkoutBox-right">
|
||||
<view class="checkout-btn" @tap.stop="toPay">
|
||||
去结算
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<goodsCart @del_cart="del_cart_func" @update_cart="update_cart_func" :cart_show="cart_show" :cart_list="cart_list"></goodsCart>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.goodsCartPayBox{
|
||||
|
||||
}
|
||||
.checkoutBox-right{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.checkout-btn{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #7cc4e8;
|
||||
padding: 0 20rpx;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
.g-price{
|
||||
color: #FD5B4E;
|
||||
font-size: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.g-price-o{
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
// text-decoration: line-through;
|
||||
}
|
||||
.checkoutBox{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
.checkoutBox-left{
|
||||
padding: 20rpx;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
.goods-num{
|
||||
margin-right: 40rpx;
|
||||
padding: 20rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 50%;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
image{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
components/goodsInfo.vue
Normal file
139
components/goodsInfo.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<script setup>
|
||||
import { ref} from "vue"
|
||||
// type：category-分类 ； list：内容列表
|
||||
const props = defineProps(['type','info',"noPrice"]);
|
||||
</script>
|
||||
<template>
|
||||
<view class="goodsInfoBox">
|
||||
<!-- 展示方式1 上下结构-->
|
||||
<view class="showtype1 " v-if="type==1">
|
||||
<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
|
||||
<image style="width: 100%;border-radius: 5px;" :style="{ height: info && info.goods_image?'340rpx':'340rpx'}" :src="info?.goods_image" mode="aspectFill"></image>
|
||||
<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
|
||||
<view class="g-desc">
|
||||
{{info?.desc}}
|
||||
</view>
|
||||
<view class="g-buy-box">
|
||||
<view class="g-price-box">
|
||||
<view class="g-price">￥{{info?.sell_price}}</view>
|
||||
<view class="g-price-o" v-if="info?.market_price">
|
||||
￥{{info?.market_price}}
|
||||
</view>
|
||||
</view>
|
||||
<slot name="btn"></slot>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 展示方式2 左右结构-->
|
||||
<view class="showtype2 " v-else>
|
||||
<view class="gcb-list-card-img-box">
|
||||
<!-- <img style="width:100%;border-radius: 5px;" :src="info.cover" alt=""> -->
|
||||
<!-- <image :src="info?.goods_image" style="width: 100%;" :style="{ height: info && info.goods_image?'':'100rpx'}" mode="widthFix"></image> -->
|
||||
<image :src="info?.goods_image" style="width: 100%;" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="gcb-list-card-info-box">
|
||||
<view class="g-show-name text-ellipsis-1">{{info?.goods_name}}</view>
|
||||
<view class="g-desc">
|
||||
{{info?.desc}}
|
||||
</view>
|
||||
<view class="g-buy-box">
|
||||
<view class="g-price-box" v-if="!noPrice">
|
||||
<view class="g-price">￥{{info?.sell_price}}</view>
|
||||
<view class="g-price-o" v-if="info?.market_price">
|
||||
￥{{info?.market_price}}
|
||||
</view>
|
||||
</view>
|
||||
<slot name="btn"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.gcb-list-card-info-box{
|
||||
width: 70%;
|
||||
}
|
||||
.showtype2{
|
||||
display: flex;
|
||||
.gcb-list-card-img-box{
|
||||
// width: 30%;
|
||||
// padding: 20rpx;
|
||||
max-height: 200rpx;
|
||||
max-width: 200rpx;
|
||||
width: 30%;
|
||||
border: 1px solid #ececec;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image{
|
||||
max-height: 200rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.g-buy-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.g-cart{
|
||||
image{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
.g-price-box{
|
||||
color: #FD5B4E;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.g-price{
|
||||
font-size: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.g-price-o{
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.g-desc{
|
||||
color: gray;
|
||||
font-size: 28rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
.g-show-name{
|
||||
margin-top: 20rpx;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.gcb-title{
|
||||
background: linear-gradient(0deg, #82c8ea, #abdef4);
|
||||
color: white;
|
||||
padding: 16rpx 0;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.gcb-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
.gcb-list-card{
|
||||
// padding: 20rpx;
|
||||
width: 48%;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
}
|
||||
.goods-card-box{
|
||||
background: white;
|
||||
border: 2rpx solid #82c8ea;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
.category-box{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
439
components/goodsSpecs.vue
Normal file
439
components/goodsSpecs.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<script setup>
|
||||
// 引入
|
||||
import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
|
||||
import {ref,onMounted,nextTick,reactive,watch} from "vue"
|
||||
import myButton from "@/components/myButton.vue"
|
||||
import { useStore } from '@/store'
|
||||
import api from "@/api/index"
|
||||
const store = useStore()
|
||||
/*
|
||||
！！！！！注意区分：show_status-按钮是否有效；show_state-是否展示本组件
|
||||
show_type如果是团购或秒杀，无法添加到购物车
|
||||
*/
|
||||
const props = defineProps(['show_type','goods_info','btn_text','show_state','show_status','payBtn']);// goods_info:商品详情(goodsDetail页面的info变量)
|
||||
const emits = defineEmits(['choosedOk','choosedDeliveryOk'])
|
||||
onLoad((e) => {
|
||||
console.log('规格！！！',props)
|
||||
// styleObject.value.height = store.systemInfo.screenHeight/1.5+'px'
|
||||
// console.log("组件:",styleObject.value)
|
||||
getDelivery()
|
||||
})
|
||||
onShow(() =>{
|
||||
// styleObject.value.height = store.systemInfo.screenHeight/1.5+'px'
|
||||
})
|
||||
watch(
|
||||
() => props.goods_info,
|
||||
(newVal, oldVal) => {
|
||||
info.value = newVal
|
||||
console.log('监听参数',info.value)
|
||||
goods_type.value = info.value.type
|
||||
handleFunc()
|
||||
}
|
||||
)
|
||||
watch(()=>props.show_state,(newVal, oldVal) => {
|
||||
// console.log(11111,props.show_type)
|
||||
if(newVal && !deliveryInfo.value) {
|
||||
getDelivery()
|
||||
}
|
||||
styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
|
||||
popup.value.open('bottom')
|
||||
// console.log(deliveryInfo.value)
|
||||
// console.log("组件:",props.show_state)
|
||||
})
|
||||
// 变量
|
||||
const goods_type = ref(null)
|
||||
const update_fields = ref(['cost_price','createtime','market_price','sales','sell_price','stock','weight']) // 需要更新的商品字段
|
||||
const styleObject = ref({
|
||||
height: '',
|
||||
})
|
||||
const info = ref(null)
|
||||
const total_num = ref(1)
|
||||
const popup = ref()
|
||||
const info_text = ref('')
|
||||
const deliveryInfo = ref(null)
|
||||
// 函数
|
||||
async function getDelivery(){ // 获取配送相关的选项
|
||||
const res = await api.getDelivery()
|
||||
// console.log(res)
|
||||
if(res.code === 1) {
|
||||
deliveryInfo.value = res.data
|
||||
// console.log(deliveryInfo.value)
|
||||
}
|
||||
}
|
||||
function chooseFunc(type){
|
||||
// type.value = type
|
||||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
||||
popup.value.open(type)
|
||||
}
|
||||
function change(e) {
|
||||
// console.log('当前模式：' + e.type + ',状态：' + e.show);
|
||||
}
|
||||
function handleFunc() {
|
||||
if(info.value.specs && info.value.specs.length>0) {
|
||||
choosed_list.value = new Array(info.value.specs.length);
|
||||
// console.log("choosed_list:",choosed_list.value)
|
||||
}
|
||||
}
|
||||
const choosed_list = ref([])
|
||||
function choosePopFunc2(i,i2) { // 规格选择函数
|
||||
choosed_list.value[i] = i2
|
||||
let str = choosed_list.value.join()
|
||||
getNewinfo(i,i2,str)
|
||||
}
|
||||
const current_specs_id = ref(null)
|
||||
const emitParams = ref({total_num:1})
|
||||
async function getNewinfo(i,i2,str) {
|
||||
// console.log(str)
|
||||
const res = await api.getNewinfo({
|
||||
goods_id:info.value.id,
|
||||
ks:str
|
||||
})
|
||||
if(res.code === 1) {
|
||||
info.value.specs[i].choosed_val = i2
|
||||
// 更新对应数据
|
||||
for(let prop in update_fields.value) {
|
||||
info.value[update_fields.value[prop]] = res.data[update_fields.value[prop]]
|
||||
}
|
||||
info_text.value = res.data.name
|
||||
// console.log(info.value)
|
||||
current_specs_id.value = res.data.id
|
||||
emitParams.value.current_specs_id = res.data.id
|
||||
emitParams.value.flag_res = checkFunc()
|
||||
emits('choosedOk',emitParams.value)
|
||||
}
|
||||
else{
|
||||
// res.msg
|
||||
uni.showToast({
|
||||
duration:2000,
|
||||
title:res.msg,
|
||||
icon:'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
function changeNumFunc(value){
|
||||
if(value<info.value.stock && value>0) {
|
||||
// info.value.sell_price = parseFloat(info.value.sell_price) ++
|
||||
total_num.value = value
|
||||
}
|
||||
else if(value<1) {
|
||||
total_num.value = 1
|
||||
}
|
||||
else{ // 超过库存
|
||||
uni.showToast({
|
||||
title:"超出库存了",
|
||||
icon:"error"
|
||||
})
|
||||
return
|
||||
}
|
||||
emitParams.value.total_num = total_num.value
|
||||
emitParams.value.flag_res = checkFunc()
|
||||
emits("choosedOk",emitParams.value)
|
||||
// console.log(value)
|
||||
}
|
||||
async function ofunc(type) { // 加入购物车
|
||||
if(['group','limited'].includes(props.show_type)){ // 秒杀和团购 无法添加购物车
|
||||
return
|
||||
}
|
||||
let flag_res = checkFunc()
|
||||
let iocn_flag = 'success',title = '已加入购物车！'
|
||||
// console.log(flag_res)
|
||||
if(!flag_res.flag) {
|
||||
iocn_flag = 'error',
|
||||
title = flag_res.text
|
||||
}
|
||||
else{
|
||||
if(goods_type==1) {
|
||||
// 检查配送相关
|
||||
let warning_text = checkDeliveryInfo()
|
||||
if(warning_text) {
|
||||
uni.showToast({
|
||||
title:warning_text,
|
||||
icon:"error"
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
let add_res = await addCart()
|
||||
if(add_res.state) {
|
||||
popup.value.close()
|
||||
emitParams.value.state = 1
|
||||
emitParams.value.flag_res = checkFunc()
|
||||
store.cartChange = !store.cartChange
|
||||
emits('choosedOk',emitParams.value)
|
||||
}
|
||||
else{
|
||||
iocn_flag = 'error'
|
||||
}
|
||||
title = add_res.msg
|
||||
|
||||
}
|
||||
uni.showToast({
|
||||
title,
|
||||
icon:iocn_flag,
|
||||
duration: 2000,
|
||||
// mask:true
|
||||
});
|
||||
}
|
||||
async function addCart() {
|
||||
// let add_res = false
|
||||
let add_res = {
|
||||
state:false,
|
||||
msg:''
|
||||
}
|
||||
let params = {
|
||||
goods_id:info.value.id,
|
||||
spec_id:current_specs_id.value?current_specs_id.value:-1,
|
||||
num:total_num.value,
|
||||
frequency:deliveryInfo.value.frequency[deliveryInfo.value.frequency_index],
|
||||
delivery_start_time:deliveryInfo.value.start_time[deliveryInfo.value.start_time_index],
|
||||
need_milk_box:deliveryInfo.value.need_milk_box[deliveryInfo.value.need_milk_box_index]
|
||||
}
|
||||
const res = await api.addCart(params)
|
||||
if(res.code === 1) {
|
||||
add_res.state = true
|
||||
}
|
||||
add_res.msg = res.msg
|
||||
return add_res
|
||||
}
|
||||
function checkDeliveryInfo() { // 检查配送相关
|
||||
if(!deliveryInfo.value) {
|
||||
return '请选择配送频率'
|
||||
}
|
||||
let c_arr = [
|
||||
{
|
||||
prop:'frequency_index',
|
||||
title:'请选择配送频率'
|
||||
},
|
||||
{
|
||||
prop:'start_time_index',
|
||||
title:'请选择起送时间'
|
||||
},
|
||||
{
|
||||
prop:'need_milk_box_index',
|
||||
title:'请选择是否需要奶箱'
|
||||
}
|
||||
]
|
||||
// deliveryInfo.value.
|
||||
for(let i = 0;i<c_arr.length;i++) {
|
||||
if(!deliveryInfo.value.hasOwnProperty(c_arr[i].prop)) {
|
||||
return c_arr[i].title
|
||||
}
|
||||
}
|
||||
}
|
||||
function checkFunc() {
|
||||
let flag = true
|
||||
let res_flag = {
|
||||
flag:true,
|
||||
text:''
|
||||
}
|
||||
if(info.value.specs && info.value.specs.length>0) {
|
||||
for(let item of info.value.specs) {
|
||||
if(!item.hasOwnProperty('choosed_val')) {
|
||||
res_flag.flag = false
|
||||
res_flag.text = '请选择'+item.title
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log(info.value)
|
||||
return res_flag
|
||||
}
|
||||
function chooseDeliveryFunc(prop,title) {
|
||||
// console.log(prop,title)
|
||||
deliveryInfo.value[prop] = title
|
||||
emits('choosedDeliveryOk',{info:deliveryInfo.value})
|
||||
}
|
||||
function determine(func) {
|
||||
emits('payOk')
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="goodsSpecsBox">
|
||||
<!-- <view class="g-cart btn-css" @tap="chooseFunc('bottom')">
|
||||
选择
|
||||
</view> -->
|
||||
<uni-popup ref="popup" @change="change">
|
||||
<view class="popup-content" :style="styleObject" >
|
||||
<!-- 产品主信息 -->
|
||||
<view class="pc-row main-info">
|
||||
<view class="pcr-left">
|
||||
<view class="pcrl-img-box">
|
||||
<image :src="info?.goods_image" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pcr-right">
|
||||
<view class="pcrr-row bold-text">
|
||||
{{info?.goods_name}}
|
||||
</view>
|
||||
<view class="pcrr-row small-text">
|
||||
产品描述
|
||||
</view>
|
||||
<view class="pcrr-row small-text">
|
||||
{{info?.sellpoint}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规格 -->
|
||||
<view class="pc-row" v-for="(item,i) in info?.specs">
|
||||
<view class="pcr-title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view class="pc-choose-card-box">
|
||||
<view @tap="choosePopFunc2(i,i2)" :class="{choosedCard:item.choosed_val==i2}" class="pc-choose-card" v-for="(item2,i2) in item.items">
|
||||
{{item2.title}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="small-text">
|
||||
温馨提示:配送区域为重庆市南岸区四公里到六公里
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- 配送相关选项 -->
|
||||
<!-- deliveryInfo -->
|
||||
<template v-if="goods_type == 1">
|
||||
<view class="pc-row">
|
||||
<view class="pcr-title">
|
||||
配送频率
|
||||
</view>
|
||||
<view class="pc-choose-card-box">
|
||||
<view @tap="chooseDeliveryFunc('frequency_index',i2)" :class="{choosedCard:deliveryInfo?.frequency_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.frequency">
|
||||
{{item2}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pc-row">
|
||||
<view class="pcr-title">
|
||||
起送时间
|
||||
</view>
|
||||
<view class="pc-choose-card-box">
|
||||
<view @tap="chooseDeliveryFunc('start_time_index',i2)" :class="{choosedCard:deliveryInfo?.start_time_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.start_time">
|
||||
{{item2}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pc-row">
|
||||
<view class="pcr-title">
|
||||
是否需要奶箱
|
||||
</view>
|
||||
<view class="pc-choose-card-box">
|
||||
<view @tap="chooseDeliveryFunc('need_milk_box_index',i2)" :class="{choosedCard:deliveryInfo?.need_milk_box_index==i2}" class="pc-choose-card" v-for="(item2,i2) in deliveryInfo?.need_milk_box">
|
||||
{{item2}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 数量 -->
|
||||
<view class="pc-row total-info-box">
|
||||
<view class="tib-left">
|
||||
<view class="tib-left-row">
|
||||
<text class="total-price bold-text">￥{{parseFloat(info?.sell_price) * total_num}}</text>
|
||||
<text class="small-text">（库存{{info?.stock}}）</text>
|
||||
</view>
|
||||
<view class="tib-left-row small-text">
|
||||
{{info_text}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tib-right">
|
||||
<uni-number-box :value="total_num" @change="changeNumFunc" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="pc-row total-info-box">
|
||||
<myButton :invalid="['group','limited'].includes(show_type)" showType="plain" style="width: 100%;" class="op-right" :type="2" @tap="ofunc(3)">
|
||||
加入购物车
|
||||
</myButton>
|
||||
<myButton @tap="determine(1)" v-if="['group','limited'].includes(show_type) && payBtn" style="width: 100%;" class="op-right" :type="2">
|
||||
{{btn_text}}
|
||||
</myButton>
|
||||
<myButton v-else-if="payBtn" style="width: 100%;" class="op-right" :type="2" @tap="determine(1)">
|
||||
去结算
|
||||
</myButton>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
// .invalidCss .add-btn-part .add-btn {
|
||||
// color: white !important;
|
||||
// background-color: #d7d7d7 !important;
|
||||
// border: 2rpx solid #d7d7d7 !important;
|
||||
// }
|
||||
.btn-css{
|
||||
background: #7CC4E8;
|
||||
color: white;
|
||||
padding: 6rpx 40rpx;
|
||||
border-radius: 20px;
|
||||
font-size: 28rpx;
|
||||
white-space: nowrap;
|
||||
margin-left: 10rpx;
|
||||
position: relative;
|
||||
}
|
||||
// 数量
|
||||
.total-info-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tib-left{
|
||||
margin-right: 20rpx;
|
||||
.tib-left-row{
|
||||
color: red;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 选择区域
|
||||
.choosedCard{
|
||||
background-color: rgb(124, 196, 232) !important;
|
||||
color: white !important;
|
||||
}
|
||||
.goodsSpecsBox{
|
||||
.popup-content{
|
||||
padding-top: 40rpx;
|
||||
background-color: white;
|
||||
border-radius: 10px 10px 0 0;
|
||||
overflow: scroll;
|
||||
.pc-row{
|
||||
padding:0 40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
.pcr-title{
|
||||
color: gray;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.pc-choose-card-box{
|
||||
.pc-choose-card{
|
||||
display: inline-block;
|
||||
background: #f1f1f1;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
// font-weight: bolder;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-info{
|
||||
display: flex;
|
||||
// align-items:;
|
||||
.pcr-left{
|
||||
margin-right: 40rpx;
|
||||
.pcrl-img-box{
|
||||
border: 2rpx solid #dadada;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
image{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pcr-right{
|
||||
.pcrr-row{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
components/goodsSpecs2.vue
Normal file
9
components/goodsSpecs2.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<view class="testBox">
|
||||
测试
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
</style>
|
||||
136
components/i-skeleton/i-skeleton.vue
Normal file
136
components/i-skeleton/i-skeleton.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<view class="i-skeleton" :style="{width: 'calc(100% - '+ size +')', background: bgColor}">
|
||||
<view class="body">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="body" :style="{width: width, height: height}" v-if="rows">
|
||||
<view class="item_row">
|
||||
<view class="icon" v-if="icon"></view>
|
||||
<view class="colunm" v-if="type==='column'" :style="{width: icon ? '75%' : '100%'}">
|
||||
<view class="rows"
|
||||
:style="{width: typeof rowsW === 'string' ? rowsW : rowsW[index], height: typeof rowsH === 'string' ? rowsH : rowsH[index] }"
|
||||
v-for="(item,index) in rows" :key="index"></view>
|
||||
</view>
|
||||
<view class="row" v-else-if="type === 'row'">
|
||||
<view class="rows"
|
||||
:style="{width: typeof rowsW === 'string' ? rowsW : rowsW[index], height: typeof rowsH === 'string' ? rowsH : rowsH[index] }"
|
||||
v-for="(item,index) in rows" :key="index"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'column'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '64rpx'
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300rpx'
|
||||
},
|
||||
icon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rowsW: {
|
||||
type: [String, Array],
|
||||
default: '300rpx'
|
||||
},
|
||||
rowsH: {
|
||||
type: [String, Array],
|
||||
default: '20rpx'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.i-skeleton {
|
||||
margin: 0 auto;
|
||||
border-radius: 12rpx;
|
||||
.body {
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item_row {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
.icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background-color: #E6E6F0;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 24rpx;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeHolderShimmer;
|
||||
animation-timing-function: ease-out;
|
||||
background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
|
||||
background-size: 800rpx 104rpx;
|
||||
|
||||
}
|
||||
.colunm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.rows {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
.rows {
|
||||
border-radius: 4rpx;
|
||||
margin-bottom: 8rpx;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: placeHolderShimmer;
|
||||
animation-timing-function: ease-out;
|
||||
background: linear-gradient(to right, #E6E6F0 8%, #dddddd 18%, #E6E6F0 33%);
|
||||
background-size: 800rpx 100rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes placeHolderShimmer {
|
||||
0% {
|
||||
background-position: -400rpx 0
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 400rpx 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
components/mapPlat/mapPlat.nvue
Normal file
128
components/mapPlat/mapPlat.nvue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div>
|
||||
<map class="positFemr" show-location :latitude="latitude" :longitude="longitude" scale="15" :markers="markers"
|
||||
@regionchange="regionchange" @callouttap="navigation" @markertap="markertaptap" @tap="tapMap">
|
||||
<cover-view class="among" v-if="showOper">
|
||||
详情信息
|
||||
<cover-image />
|
||||
</cover-view>
|
||||
</map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
latitude: { //纬度
|
||||
type: Number,
|
||||
default: ''
|
||||
},
|
||||
longitude: { //经度
|
||||
type: Number,
|
||||
default: ''
|
||||
},
|
||||
markers: { //点数据
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showOper:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
regionchange(e) {
|
||||
this.$emit('regionchange', e)
|
||||
},
|
||||
navigation(e) {
|
||||
this.$emit('navigation', e)
|
||||
},
|
||||
relativeposi() {
|
||||
uni.createMapContext("map", this).moveToLocation({
|
||||
latitude: this.latitude,
|
||||
longitude: this.longitude,
|
||||
});
|
||||
},
|
||||
markertaptap(e) {
|
||||
this.$emit('markertaptap', e)
|
||||
},
|
||||
tapMap(e) {
|
||||
this.$emit('tapMap', e)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.positFemr {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.coloena {
|
||||
color: #000;
|
||||
background: #fff;
|
||||
padding: 15rpx 20rpx;
|
||||
border-radius: 5px;
|
||||
font-size: 28rpx;
|
||||
box-shadow: 1px 2px 6px 1px rgba(130, 146, 188, 0.3400);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 90rpx;
|
||||
font-weight: none;
|
||||
|
||||
}
|
||||
|
||||
.tieoarr {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.imgSieor {
|
||||
width: 136rpx;
|
||||
height: 80rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.maoetop {
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.maoetop1 {
|
||||
color: #0F2E51FF;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.maoetop2 {
|
||||
color: #46C166FF;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.among {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
46
components/myButton.vue
Normal file
46
components/myButton.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const props = defineProps(['bgcolor','type','showType','invalid'])
|
||||
// const type = ref(1) // 1-底部大按钮;2-局部按钮
|
||||
</script>
|
||||
<template>
|
||||
<view class="buttonBox">
|
||||
<view class="add-btn-part" :class="{normalCss:type==2,plainCss:showType=='plain'}">
|
||||
<view class="add-btn" :style="{ background: bgcolor?bgcolor:'#7cc4e8'}" :class="{plainCss:showType=='plain',invalidCssBtn:invalid}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.normalCss{
|
||||
position: unset !important;
|
||||
bottom: unset !important;
|
||||
width: 100%;
|
||||
}
|
||||
.plainCss{
|
||||
background: white !important;
|
||||
color: #7cc4e8 !important;
|
||||
}
|
||||
.invalidCssBtn{
|
||||
color: white !important;
|
||||
background-color: #d7d7d7 !important;
|
||||
border: 2rpx solid #d7d7d7 !important;
|
||||
}
|
||||
.add-btn-part{
|
||||
position: fixed;
|
||||
bottom: 40rpx;
|
||||
width: 100%;
|
||||
.add-btn{
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
background: #7cc4e8;
|
||||
border: 1px solid #7cc4e8;
|
||||
color: white;
|
||||
padding: 10px 0;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
components/myCoupon.vue
Normal file
298
components/myCoupon.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<script setup>
|
||||
// 引入
|
||||
import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
|
||||
import {ref,onMounted,nextTick,reactive,watch} from "vue"
|
||||
import myButton from "@/components/myButton.vue"
|
||||
import { useStore } from '@/store'
|
||||
import api from "@/api/index"
|
||||
import goodsInfo from "@/components/goodsInfo.vue"
|
||||
import emptyCard from "@/components/emptyCard.vue"
|
||||
const store = useStore()
|
||||
const props = defineProps(['coupon_show','coupon_list']);
|
||||
const emits = defineEmits(['choosedOk'])
|
||||
import utils from "@/utils/index.js"
|
||||
onLoad((e) => {
|
||||
styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
|
||||
// console.log("组件:",props.goods_info)
|
||||
// getList()
|
||||
})
|
||||
watch(
|
||||
() => props.coupon_list,
|
||||
(newVal, oldVal) => {
|
||||
// info.value = newVal
|
||||
list.value = newVal
|
||||
console.log(newVal)
|
||||
updateList()
|
||||
}
|
||||
)
|
||||
watch(
|
||||
()=>props.coupon_show,
|
||||
(newVal, oldVal) => {
|
||||
cart_popup.value.open('bottom')
|
||||
})
|
||||
//变量
|
||||
const list = ref([])
|
||||
const cart_popup = ref()
|
||||
const styleObject = ref({
|
||||
height: '0px',
|
||||
})
|
||||
const total_num = ref(1)
|
||||
const current_ = ref(-1)
|
||||
// 函数
|
||||
function updateList(){
|
||||
// console.log(list.value)
|
||||
if(list.value && list.value.length>0) {
|
||||
for(let item of list.value) {
|
||||
// item.goods_image = item.goods.goods_image
|
||||
// item.goods_name = item.goods.goods_name
|
||||
// item.goods_id = item.goods.id
|
||||
// item.sell_price = item.price * item.num
|
||||
// item.single_price = item.price
|
||||
// item.desc = item.spec.name+',￥'+item.spec.sell_price
|
||||
}
|
||||
}
|
||||
}
|
||||
// async function getList() { // 获取购物车列表
|
||||
// const res = await api.getCartList()
|
||||
// if(res.code ===1) {
|
||||
// list.value = res.data
|
||||
// }
|
||||
// }
|
||||
// function changeNumFunc(value){
|
||||
// setTimeout(() => {
|
||||
// // console.log(value,current_.value)
|
||||
// if(value>0) {
|
||||
// list.value[current_.value].num = value
|
||||
// list.value[current_.value].sell_price = list.value[current_.value].single_price * value
|
||||
// // list.value[current_.value].price = value
|
||||
// // 修改订单
|
||||
// emits('update_cart',[list.value[current_.value].id,list.value[current_.value].num])
|
||||
// }
|
||||
// else if(value<1) { // 删除购物车
|
||||
// // total_num.value = 1
|
||||
// emits('del_cart',[list.value[current_.value].id])
|
||||
// }
|
||||
// else{ // 超过库存
|
||||
// }
|
||||
// },0)
|
||||
// }
|
||||
// function lockItem(i) { // 锁定当前操作的索引
|
||||
// current_.value = i
|
||||
// }
|
||||
async function toUseFunc(item,i) { // 选择优惠券
|
||||
current_.value = i
|
||||
// const res = await api.couponsCenterReceive({
|
||||
// coupon_id:item.id
|
||||
// })
|
||||
// if(res.code === 1) {
|
||||
// uni.showToast({
|
||||
// title:"领取成功",
|
||||
// icon:"success"
|
||||
// })
|
||||
// // getList()
|
||||
// }
|
||||
}
|
||||
function ofunc() {
|
||||
if(current_.value==-1) {
|
||||
uni.showToast({
|
||||
title:"请选择优惠券",
|
||||
icon:"error"
|
||||
})
|
||||
}
|
||||
else{
|
||||
// console.log(list.value[current_.value])
|
||||
cart_popup.value.close()
|
||||
emits("choosedOk",list.value[current_.value])
|
||||
}
|
||||
}
|
||||
function timestampToDate(stamp) { // 时间戳转日期
|
||||
var time = new Date(stamp);
|
||||
var y = time.getFullYear();
|
||||
var m = time.getMonth()+1;
|
||||
var d = time.getDate();
|
||||
const date = `${y}-${m}-${d}`
|
||||
return date
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="goodsCartBox">
|
||||
<uni-popup ref="cart_popup" @change="change">
|
||||
<view class="popup-content" :style="styleObject" >
|
||||
<view class="pc-top">
|
||||
<view class="pc-top-left">
|
||||
优惠券
|
||||
<!-- <text style="color: gray;">(共{{list.length}}件)</text> -->
|
||||
</view>
|
||||
<!-- <view class="pc-top-right" style="color: gray;" @click="clearFunc">
|
||||
清空购物车
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="pc-content couponBox">
|
||||
<!-- <view class="list-row" v-for="(item,i) in list" @tap="lockItem(i)">
|
||||
<goodsInfo :type="2" :info="item" >
|
||||
<template #btn>
|
||||
<uni-number-box :value="item.num" @change="changeNumFunc" />
|
||||
</template>
|
||||
</goodsInfo>
|
||||
</view> -->
|
||||
<view class="c-part" v-if="list.length>0" @tap="toUseFunc(item,i)" v-for="(item,i) in list">
|
||||
<view class="state-css small-text" v-if="item.bind_type == 1">
|
||||
<!-- 已领取 -->
|
||||
<!-- <image src="../../static/had.png" mode="widthFix"></image> -->
|
||||
</view>
|
||||
<view class="cp-row" style="padding-bottom: 0px;">
|
||||
<view class="cpr-left">
|
||||
{{item.coupon_name}}
|
||||
</view>
|
||||
<view class="cpr-right" style="color: red;">
|
||||
￥<text class="big-text">{{item.money}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cp-row small-text" style="padding-top: 0px;">
|
||||
<view class="cpr-left">
|
||||
有效期至{{item.expire_time}}
|
||||
</view>
|
||||
<view class="cpr-right">
|
||||
<text class="red-text">满{{item.num}}可用</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="cp-row small-text">
|
||||
<view class="cpr-left">
|
||||
指定商品可用
|
||||
</view>
|
||||
<view class="cpr-right">
|
||||
<view class="checkBox-css">
|
||||
<uni-icons v-if="current_ == i" type="checkmarkempty" size="20"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<emptyCard v-else></emptyCard>
|
||||
</view>
|
||||
<view class="pc-bottom" style="padding: 40rpx 0 ;">
|
||||
<!-- 按钮 -->
|
||||
<myButton v-if="list.length>0" style="width: 100%;" class="op-right" :type="2" @tap="ofunc">
|
||||
确认使用
|
||||
</myButton>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.checkBox-css{
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border: 1px solid #cacaca;
|
||||
}
|
||||
/*
|
||||
优惠券
|
||||
*/
|
||||
.hasDone{
|
||||
background-color: #cccccc !important;
|
||||
}
|
||||
.state-css{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
image{
|
||||
width: 100rpx;
|
||||
}
|
||||
}
|
||||
.button-css{
|
||||
background-color: red;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
padding: 6rpx 20rpx;
|
||||
}
|
||||
.couponBox{
|
||||
.c-part{
|
||||
background-color: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 5px;
|
||||
.cp-row{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pc-bottom{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
.goodsCartBox{
|
||||
.popup-content{
|
||||
position: relative;
|
||||
padding-top: 40rpx;
|
||||
background-color: white;
|
||||
border-radius: 10px 10px 0 0;
|
||||
overflow: scroll;
|
||||
background: #f2f2f2;
|
||||
.pc-top{
|
||||
position: fixed;
|
||||
top:120rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 40rpx;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
.pc-content{
|
||||
.list-row{
|
||||
padding: 20rpx;
|
||||
}
|
||||
margin-bottom: 240rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
.pc-row{
|
||||
padding:0 40rpx;
|
||||
padding-bottom: 40rpx;
|
||||
.pcr-title{
|
||||
color: gray;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.pc-choose-card-box{
|
||||
.pc-choose-card{
|
||||
display: inline-block;
|
||||
background: #f1f1f1;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
// font-weight: bolder;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-info{
|
||||
display: flex;
|
||||
// align-items:;
|
||||
.pcr-left{
|
||||
margin-right: 40rpx;
|
||||
.pcrl-img-box{
|
||||
border: 2rpx solid #dadada;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
image{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pcr-right{
|
||||
.pcrr-row{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
components/mySwiper.vue
Normal file
97
components/mySwiper.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
import {watch,ref,reactive} from "vue"
|
||||
// props
|
||||
const props = defineProps(['lbt_list',"height","isRadius","indicatorDots"])
|
||||
// 变量
|
||||
const interval = ref(2000)
|
||||
const autoplay = ref(true)
|
||||
// const indicatorDots = ref(false)
|
||||
// 监听
|
||||
watch(()=> {
|
||||
return props.lbt_list
|
||||
},(val1,val2) => {
|
||||
// console.log(val1)
|
||||
|
||||
})
|
||||
// 方法
|
||||
function intervalChange(e) {
|
||||
interval.value = e.target.value
|
||||
}
|
||||
function lbtFunc(item) {
|
||||
// 新版数据结构的跳转形式
|
||||
uni.navigateTo({
|
||||
url:item.url
|
||||
});
|
||||
return
|
||||
|
||||
// 旧版数据结构的跳转形式
|
||||
// if(item.skip_url_type == 2) { // 内链
|
||||
// uni.navigateTo({
|
||||
// url:item.skip_url
|
||||
// });
|
||||
// }
|
||||
// else{ // 外链
|
||||
// uni.navigateTo({
|
||||
// url:`/pages/webview/webview?links=${item.skip_url}&name=${item.name}`
|
||||
// });
|
||||
// }
|
||||
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="swiper-box">
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" :class="{radiuscss:isRadius}" :style="'height: '+height*2+'rpx;'" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
||||
:duration="duration">
|
||||
<swiper-item @click="lbtFunc(item)" v-for="(item,i) in lbt_list">
|
||||
<view class="swiper-item uni-bg-red">
|
||||
<!-- <img style="width: 100%;" :src="item.url" alt=""> -->
|
||||
<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.radiuscss{
|
||||
border-radius:30rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swiper-box{
|
||||
|
||||
}
|
||||
.swiper-item>img{
|
||||
width: 100%;
|
||||
}
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.uni-common-mt {
|
||||
margin-top: 60rpx;
|
||||
position: relative;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
.uni-padding-wrap {
|
||||
width: 550rpx;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
</style>
|
||||
71
components/notice.vue
Normal file
71
components/notice.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
import { ref} from "vue"
|
||||
const props = defineProps(['type','list'])
|
||||
const showAll = ref(false)
|
||||
function switchFunc() {
|
||||
showAll.value=!showAll.value
|
||||
console.log(showAll.value)
|
||||
}
|
||||
function toDetailFunc(item) {
|
||||
uni.navigateTo({
|
||||
url:"/pages/notice/index?content="+encodeURIComponent(item.content)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="notice-box">
|
||||
<view class="n-row" v-if="!showAll" @tap="toDetailFunc(list[0])">
|
||||
<view class="nr-left">
|
||||
<image class="icon-custom" src="@/static/notice.png" mode=""></image>
|
||||
<view class="nr-text text-ellipsis-1" :class="{smalltext:type=='small'}">
|
||||
{{list[0]?.content}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="list.length > 1 && !showAll" class="showmore-btn" @tap="switchFunc" :class="{smalltext:type=='small'}">
|
||||
更多
|
||||
<uni-icons type="bottom" size="15"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="n-row-part" v-else>
|
||||
<view class="n-row" v-for="(item,i) in list" @tap="toDetailFunc(item)">
|
||||
<view class="nr-left">
|
||||
<image class="icon-custom" src="@/static/notice.png" mode=""></image>
|
||||
<view class="nr-text text-ellipsis-1" :class="{smalltext:type=='small'}">
|
||||
{{item?.content}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showAll" class="showmore-btn" style="text-align: right;" :class="{smalltext:type=='small'}">
|
||||
<text @tap="switchFunc">收起</text>
|
||||
<uni-icons type="top" size="15"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.smalltext{
|
||||
color: gray !important;
|
||||
font-size: 28rpx !important;
|
||||
font-weight: unset !important;
|
||||
}
|
||||
.n-row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20rpx 0;
|
||||
.icon-custom{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.nr-left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.nr-text{
|
||||
width: 85%;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.showmore-btn{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
61
components/searchBox.vue
Normal file
61
components/searchBox.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup>
|
||||
import { useStore } from '@/store'
|
||||
const store = useStore()
|
||||
// props
|
||||
const props = defineProps(['width'])
|
||||
</script>
|
||||
<template>
|
||||
<!-- <view class="custom-status-bar" id="custom-status-bar" :style="{paddingTop: `${store.status_bar_height}px`,width:`${width}`}"> -->
|
||||
<view class="custom-status-bar" id="custom-status-bar" :style="{width:`${width}`}">
|
||||
<view class="empty-wrap"></view>
|
||||
<view class="search-box">
|
||||
<input class="uni-input" confirm-type="search" placeholder="" />
|
||||
<view class="search-btn">
|
||||
<icon style="color: rgb(248, 248, 248);" type="search" size="16"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.empty-wrap{
|
||||
width: 100%;
|
||||
height:20rpx;
|
||||
}
|
||||
.search-btn{
|
||||
position: absolute;
|
||||
/* right: 0%; */
|
||||
/* background: #26758d; */
|
||||
color: white;
|
||||
width: 63rpx;
|
||||
height: 63rpx;
|
||||
/* border-radius: 50%; */
|
||||
text-align: center;
|
||||
line-height: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* box-shadow: -1px 1px 10px grey; */
|
||||
}
|
||||
.uni-input{
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
/* margin: 20rpx 0; */
|
||||
/* border: 2rpx solid #e7e7e7; */
|
||||
/* border-radius: 100rpx; */
|
||||
font-size: 20rpx;
|
||||
color: gray;
|
||||
}
|
||||
.search-box{
|
||||
display: flex;
|
||||
/* width: 95%; */
|
||||
align-items: center;
|
||||
position: relative;
|
||||
/* width: 100%; */
|
||||
/* position: fixed; */
|
||||
top:0px;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
border-radius: 100rpx;
|
||||
border: 2rpx solid #eeeeee;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user