服务类商品、购物车样式
This commit is contained in:
parent
8dd0c2617f
commit
0fd87acc48
41
App.vue
41
App.vue
|
|
@ -1,3 +1,42 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLaunch } from '@dcloudio/uni-app'
|
||||
//小程序加载的时候调用该方法
|
||||
onLaunch(()=>{
|
||||
// console.log('onLaunch方法被触发');
|
||||
// getFonts() //更改全局字体
|
||||
})
|
||||
// const getFonts = () => { //导入字体
|
||||
// uni.loadFontFace({
|
||||
// family: 'FangZhengFonts',
|
||||
// source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
||||
// success: (res) => {
|
||||
// console.log('success', res);
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.log('err', err);
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
/* //设置圆角 */
|
||||
checkbox.round .wx-checkbox-input,
|
||||
checkbox.round .uni-checkbox-input {
|
||||
border-radius: 100upx;
|
||||
border: 1px solid #ec6330;
|
||||
}
|
||||
/* //设置背景色 */
|
||||
checkbox.red[checked] .wx-checkbox-input,
|
||||
checkbox.red.checked .uni-checkbox-input {
|
||||
background-color: #E79EA1 !important;
|
||||
border-color: #ebebeb !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
/* //元素使用的时候就是使用 round 和 red */
|
||||
</style>
|
||||
|
|
@ -1,36 +1,48 @@
|
|||
export const stateList = [
|
||||
//订单状态数组
|
||||
export const stateList = [
|
||||
{
|
||||
state: '待支付',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FFybMDtHR-dengdaifukuan.png',
|
||||
msg: '等待买家付款'
|
||||
msg: '等待买家付款',
|
||||
tips: '请于15分钟内付款，超时订单将自动关闭'
|
||||
},
|
||||
{
|
||||
state: '待发货',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEOzVqolp-fahuo.png',
|
||||
msg: '等待卖家发货'
|
||||
msg: '等待卖家发货',
|
||||
tips: '耐心等待工艺品发货~'
|
||||
},
|
||||
{
|
||||
state: '已退款',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FlPnvgqCp-yituikuan.png',
|
||||
msg: '订单已经退款'
|
||||
msg: '订单已经退款',
|
||||
tips: '希望下次能让君满意'
|
||||
},
|
||||
{
|
||||
state: '待收货',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEOzVqolp-fahuo.png',
|
||||
msg: '商品已发货，注意查收'
|
||||
msg: '商品已发货，注意查收',
|
||||
tips: '非遗工艺品马上到手啦，耐心点'
|
||||
},
|
||||
{
|
||||
state: '交易成功',
|
||||
img: '',
|
||||
msg: '订单完成，感谢您的支持'
|
||||
msg: '订单完成，感谢您的支持',
|
||||
tips: '感谢您的支持'
|
||||
},
|
||||
{
|
||||
state: '交易关闭',
|
||||
img: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FaHDhacaI-dengdaifukuan.png',
|
||||
msg: '您的订单已关闭'
|
||||
msg: '您的订单已关闭',
|
||||
tips: '下次看好了之后再买哦'
|
||||
}
|
||||
]
|
||||
export const stateMap = new Map()
|
||||
stateList.forEach((item)=>{
|
||||
stateMap.set(item.state,item)
|
||||
})
|
||||
})
|
||||
//获取选中日期是星期几方法
|
||||
export const weekDay = function(time) {
|
||||
let datelist = ['周日','周一','周二','周三','周四','周五','周六',]
|
||||
return datelist[new Date(time).getDay()];
|
||||
}
|
||||
|
|
|
|||
24
pages.json
24
pages.json
|
|
@ -211,8 +211,28 @@
|
|||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/Shopping-cart/productmain/testproductmain",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/workshop/component/testTimePopUp",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"plugins" : {
|
||||
"logisticsPlugin" : {
|
||||
"version": "2.3.0",
|
||||
"provider": "wx9ad912bf20548d92"
|
||||
}
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
|
|
@ -231,12 +251,12 @@
|
|||
"text":"首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/store-home/main/main",
|
||||
"pagePath": "pages/store-home/main/testMain",
|
||||
"iconPath": "./static/store.png",
|
||||
"text":"商城"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/Shopping-cart/productmain/productmain",
|
||||
"pagePath": "pages/Shopping-cart/productmain/testproductmain",
|
||||
"iconPath": "./static/shopcar.png",
|
||||
"text":"购物车"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -319,7 +319,10 @@ const editOrSettle = async ()=>{ //去结算或者删除状态方法
|
|||
showCancel: false,
|
||||
success: (e)=>{
|
||||
if(e.confirm) {
|
||||
deleteProduct(res.data.data)
|
||||
// getProductCart() //重新获取购物车信息
|
||||
uni.reLaunch({
|
||||
url: '/pages/Shopping-cart/productmain/productmain'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
683
pages/Shopping-cart/productmain/testproductmain.vue
Normal file
683
pages/Shopping-cart/productmain/testproductmain.vue
Normal file
|
|
@ -0,0 +1,683 @@
|
|||
<template>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-row items-center section_2">
|
||||
<text class="font text">购物车</text>
|
||||
<view class="flex-row items-center flex-1 section_3 ml-17">
|
||||
<image
|
||||
class="shrink-0 image"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FANvSsQui-sousuo.png"
|
||||
/>
|
||||
<input v-model="searchText" class="section_1 ml-4" placeholder="搜索购物车商品" />
|
||||
</view>
|
||||
<text class="font text_2 ml-17" @click="changeState">{{ stateText.topBtn }}</text>
|
||||
</view>
|
||||
<view class="flex-col section_5">
|
||||
<view class="flex-row justify-between self-stretch group">
|
||||
<text class="font_2 text_3" :style="getTextStyle(1)" @click="changeType(1)">商品类</text>
|
||||
<text class="font_2 text_4" :style="getTextStyle(2)" @click="changeType(2)">服务类</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col list">
|
||||
<checkbox-group @change="checkBoxChange">
|
||||
<view class="flex-col list-item mt-14" v-for="(item, index) in products" :key="index">
|
||||
<!-- 实体类商品 -->
|
||||
<view class="flex-row section_10" v-if="current == 1">
|
||||
<!-- 多选框 -->
|
||||
<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked"/>
|
||||
<view class="flex-row items-end flex-1 self-center ml-22">
|
||||
<image
|
||||
class="shrink-0 image_2"
|
||||
:src="item.cartGoodVO.goodImg.split(';')[0]"
|
||||
@click="jump_product(item.goodId)"
|
||||
/>
|
||||
<view class="flex-col flex-1 group_2">
|
||||
<view class="flex-row justify-center group_3">
|
||||
<text class="font_3 text_5" @click="jump_product(item.goodId)">{{ item.cartGoodVO.name }}</text>
|
||||
<text class="font_3" @click="jump_product(item.goodId)">【{{ item.cartGoodVO.type }}】</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center mt-46">
|
||||
<view class="flex-row items-end">
|
||||
<text class="font_4 text_6" @click="jump_product(item.goodId)">￥{{ item.cartGoodVO.price }}</text>
|
||||
<!-- <image
|
||||
class="shrink-0 image_6"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=babcf6110b7f4238c5be5c44afb0a800.png"
|
||||
/>
|
||||
<text class="font_5 text_7">00</text> -->
|
||||
</view>
|
||||
<!-- 减少数量 -->
|
||||
<image
|
||||
class="image_4"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVBaGfZxE-short.png"
|
||||
@click="decrease(index , item.checked)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row shrink-0 group_4">
|
||||
<view class="flex-col justify-start items-center text-wrapper"><text class="font_6">{{ item.quantity }}</text></view>
|
||||
<!-- 添加数量 -->
|
||||
<image
|
||||
class="image_5 ml-2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FLsCJgzgf-add.png"
|
||||
@click="increase(index , item.checked)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 服务类商品 -->
|
||||
<view class="flex-col list-item_2 mt-14" v-if="current == 2">
|
||||
<view class="flex-row">
|
||||
<image
|
||||
class="shrink-0 self-start image_8"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=bbd3dd8989652c3ab7b9e5bd53d5db7d.png"
|
||||
/>
|
||||
<image
|
||||
class="shrink-0 image_7"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=df47ebd42125801292be7272770f505a.png"
|
||||
/>
|
||||
<view class="flex-col flex-1 group_5">
|
||||
<text class="font_7">【非遗手工艺体验】纸笺加工技艺-流沙笺团扇制作体验</text>
|
||||
<view class="flex-row justify-between items-center section_7 mt-14">
|
||||
<view class="flex-col items-start">
|
||||
<text class="font_8">仿真丝团扇;上午场(09:30-12:00)</text>
|
||||
<text class="font_8 text_8 mt-6">预约日期：2024-10-15</text>
|
||||
</view>
|
||||
<image
|
||||
class="image_9"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=c86722cdfe0aafd70ce1bdc9227561d6.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-end items-center group_6 mt-16">
|
||||
<view class="flex-row items-center">
|
||||
<text class="font_9 text_9">138.</text>
|
||||
<image
|
||||
class="shrink-0 image_12"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=0ea9293deedfe538187f9813efe15880.png"
|
||||
/>
|
||||
<text class="font_10 text_10">00</text>
|
||||
</view>
|
||||
<view class="flex-row ml-83">
|
||||
<image
|
||||
class="image_10"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=35c583f367baecfc803c6018dad7f951.png"
|
||||
/>
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-2"><text class="font_6">1</text></view>
|
||||
<image
|
||||
class="image_11 ml-2"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=db5f3531d9c85943afe86625bb8d6073.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_8">
|
||||
<view class="flex-row items-center">
|
||||
<checkbox class="shrink-0 image_8 round red" :checked="allCheck" @tap="allChecked"/>
|
||||
<!-- <image
|
||||
class="shrink-0 image_8 image_13"
|
||||
src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=3f81d5886d1e216ce7cc53687e0c5499.png"
|
||||
/> -->
|
||||
<text class="font_2 text_11 ml-9">全选</text>
|
||||
</view>
|
||||
<view class="flex-row items-center">
|
||||
<text class="font_2 text_12">合计：{{ totalPrice }}元</text>
|
||||
<view class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-7">
|
||||
<text class="font_4 text_13" @click="editOrSettle">{{ stateText.bottomBtn }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref , onMounted , toRaw} from 'vue'
|
||||
import { onShow , onLoad } from "@dcloudio/uni-app";
|
||||
import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
|
||||
import * as math from 'mathjs'
|
||||
const products = ref([])
|
||||
const current = ref(1) //用于判断是实体类商品还是服务类商品
|
||||
const allCheck = ref(false) //全选
|
||||
const checkedData = ref([]) //选择的暂存保存数组
|
||||
const totalPrice = ref(0) //总金额
|
||||
const searchText = ref('')
|
||||
const stateText = ref({
|
||||
topBtn: '编辑',
|
||||
bottomBtn: '去结算'
|
||||
})
|
||||
onShow(()=>{
|
||||
getProductCart() //获取商品类
|
||||
})
|
||||
onLoad(()=>{
|
||||
getProductCart() //再获取一次实体类商品的列表
|
||||
getFonts()
|
||||
})
|
||||
//小程序刷新根据用户id获取购物车信息
|
||||
const getProductCart = async ()=>{
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/cart/list',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync('cookie')
|
||||
}
|
||||
})
|
||||
// console.log('res--->',res.data);
|
||||
if(res.data.code === 1) {
|
||||
products.value = res.data.data
|
||||
products.value.forEach((item)=>{
|
||||
item.checked = false
|
||||
})
|
||||
}
|
||||
console.log('products-->',products.value);
|
||||
}
|
||||
const deleteProduct = async (idArr) =>{ //删除商品
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/cart/delete',
|
||||
method: 'POST',
|
||||
data: idArr ,
|
||||
header: {
|
||||
'cookie': wx.getStorageSync('cookie')
|
||||
}
|
||||
})
|
||||
console.log(res.data);
|
||||
if(res.data.code === 1) {
|
||||
// getProductCart() //重新获取购物车信息
|
||||
uni.reLaunch({
|
||||
url: '/pages/Shopping-cart/testproductmain/testproductmain'
|
||||
})
|
||||
totalPrice.value = 0
|
||||
}
|
||||
}
|
||||
const getServiceCart =()=>{
|
||||
console.log('获取服务类商品方法被触发');
|
||||
}
|
||||
//更改实体商品和服务类方法
|
||||
const changeType = async (num)=>{
|
||||
current.value = num;
|
||||
if(num ===1 ) { //为一的时候就获取用户商品购物车
|
||||
|
||||
}
|
||||
}
|
||||
//更改下划线
|
||||
const getTextStyle = (num) => ({
|
||||
'border-bottom' : current.value === num ? '2px solid orange' : '2px solid #ffffff'
|
||||
});
|
||||
//复选框绑定方法
|
||||
const checkBoxChange =(event)=>{
|
||||
//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
|
||||
console.log('length---->',event.detail.value.length);
|
||||
// console.log('product--->',products.value);
|
||||
if(event.detail.value.length == products.value.length) {
|
||||
allCheck.value = true
|
||||
} else {
|
||||
allCheck.value = false
|
||||
}
|
||||
checkedData.value = [] //每次都要重置一下
|
||||
totalPrice.value = 0;
|
||||
let count = 0; //用于记录checkedData不为null的个数
|
||||
console.log('event--->',event.detail);
|
||||
if(event.detail.value.length) {
|
||||
products.value[parseInt(event.detail.value)].checked = true; //勾选
|
||||
} else {
|
||||
products.value.forEach((item)=>{
|
||||
item.checked = false
|
||||
})
|
||||
}
|
||||
//计算一下总金额
|
||||
for(let key in event.detail.value) {
|
||||
let temp = parseInt(event.detail.value[parseInt(key)]) //相当于商品数组下标
|
||||
computed(products.value[temp].cartGoodVO.price , products.value[temp].quantity)
|
||||
}
|
||||
event.detail.value.forEach((item)=>{
|
||||
products.value[parseInt(item)].checked = true
|
||||
})
|
||||
//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
|
||||
products.value.forEach((x)=>{
|
||||
event.detail.value.forEach((y)=>{
|
||||
if(x.value == y) {
|
||||
x.checked = true
|
||||
}
|
||||
})
|
||||
})
|
||||
event.detail.value.forEach((item)=>{ //将选中的商品信息赋值给checkedData
|
||||
console.log('products.value[parseInt(item)].goodId',products.value[parseInt(item)].goodId);
|
||||
if(products.value[parseInt(item)] !== null) {
|
||||
checkedData.value.push(products.value[parseInt(item)].id)
|
||||
// console.log(products.value[parseInt(item)].goodId);
|
||||
count += 1
|
||||
}
|
||||
})
|
||||
console.log('checkedData--->',checkedData.value);
|
||||
//将选中的数组保存在某一个ref中
|
||||
// checkedData.value = event.detail.value
|
||||
// console.log('checkedData--->',checkedData.value);
|
||||
}
|
||||
//全选方法
|
||||
const allChecked = ()=>{
|
||||
allCheck.value = !allCheck.value
|
||||
totalPrice.value = 0
|
||||
if ( allCheck.value == true ) {
|
||||
products.value.forEach((item)=>{
|
||||
item.checked = true //将全部选项选上
|
||||
computed(item.cartGoodVO.price , item.quantity)
|
||||
})
|
||||
checkedData.value = products.value.map((item)=>( item.id ))
|
||||
console.log('checkedData--->',checkedData.value);
|
||||
} else {
|
||||
products.value.forEach((item)=>{
|
||||
item.checked = false //将全部都取消选择
|
||||
})
|
||||
}
|
||||
}
|
||||
//减少商品
|
||||
const decrease =(index , item)=>{ //item用于监测是否选中
|
||||
console.log('decrease,index-->',index);
|
||||
console.log('decrease,item-->',item);
|
||||
if(products.value[index].quantity > 1) {
|
||||
products.value[index].quantity -= 1
|
||||
if(item && products.value[index].quantity >= 1) {
|
||||
computed(-products.value[index].cartGoodVO.price, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
//增加商品的方法
|
||||
const increase =(index , item) =>{ //item用于监测是否选中
|
||||
console.log('increase,index-->',index);
|
||||
console.log('increase,item-->',item);
|
||||
if(products.value[index].quantity < products.value[index].cartGoodVO.inventory) {
|
||||
if(item && products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
|
||||
computed(products.value[index].cartGoodVO.price, 1)
|
||||
}
|
||||
products.value[index].quantity += 1
|
||||
}
|
||||
}
|
||||
//计算方法
|
||||
const computed =( price , quantity )=>{
|
||||
totalPrice.value = math.round(totalPrice.value+price * quantity,2)
|
||||
return totalPrice.value
|
||||
}
|
||||
const jump_product =(gid)=>{
|
||||
uni.navigateTo({
|
||||
url:'../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(gid)
|
||||
})
|
||||
}
|
||||
const editOrSettle = async ()=>{ //去结算或者删除状态方法
|
||||
// console.log('要传到订单详情页面的checked--->',checkedData.value);
|
||||
if(stateText.value.bottomBtn === '去结算') {
|
||||
if(checkedData.value.length === 0) { //在没有勾选的时候禁止发请求
|
||||
return;
|
||||
}
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/cart/submit/error',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'cookie': wx.getStorageSync('cookie')
|
||||
}
|
||||
})
|
||||
console.log(res.data);
|
||||
if(res.data.data.length != 0) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '购物车商品发生改变，点击移除变化商品',
|
||||
showCancel: false,
|
||||
success: (e)=>{
|
||||
if(e.confirm) {
|
||||
// getProductCart() //重新获取购物车信息
|
||||
uni.reLaunch({
|
||||
url: '/pages/Shopping-cart/productmain/productmain'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/order/product-waitpay/product-waitpay?cartInfo=' + JSON.stringify(checkedData.value)
|
||||
})
|
||||
checkedData.value.splice(0,checkedData.value.length)
|
||||
}
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除商品?',
|
||||
success: (e) => {
|
||||
if(e.confirm) {
|
||||
deleteProduct(checkedData.value)
|
||||
}
|
||||
else if(e.cancel)
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const changeState =()=>{ //修改购物车订单方法
|
||||
if(stateText.value.topBtn === '编辑') {
|
||||
stateText.value.topBtn = '完成',
|
||||
stateText.value.bottomBtn = '删除'
|
||||
} else {
|
||||
stateText.value.topBtn = '编辑',
|
||||
stateText.value.bottomBtn = '去结算'
|
||||
}
|
||||
}
|
||||
const productSearch = () =>{ //搜索框方法
|
||||
var arr = []
|
||||
products.value.forEach((item) => arr.push(item))
|
||||
console.log(123);
|
||||
}
|
||||
const getFonts = () => { //导入字体
|
||||
uni.loadFontFace({
|
||||
family: 'FangZhengFonts',
|
||||
source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
||||
success: (res) => {
|
||||
console.log('success', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ml-17 {
|
||||
margin-left: 31.88rpx;
|
||||
}
|
||||
.ml-83 {
|
||||
margin-left: 155.63rpx;
|
||||
}
|
||||
.ml-9 {
|
||||
margin-left: 16.88rpx;
|
||||
}
|
||||
.ml-7 {
|
||||
margin-left: 13.13rpx;
|
||||
}
|
||||
.page {
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
// height: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.section_2 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 28.13rpx 30.69rpx 18.75rpx;
|
||||
background-color: #fbdedf;
|
||||
z-index: 99;
|
||||
}
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 27.77rpx;
|
||||
color: #c35c5d;
|
||||
}
|
||||
.text {
|
||||
line-height: 28.24rpx;
|
||||
}
|
||||
.section_3 {
|
||||
padding: 0 15rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.38rpx;
|
||||
height: 56.25rpx;
|
||||
}
|
||||
.image {
|
||||
width: 54.38rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
.section_1 {
|
||||
flex: 1 1 0;
|
||||
margin-right: 7.5rpx;
|
||||
}
|
||||
.text_2 {
|
||||
margin-right: 4.46rpx;
|
||||
}
|
||||
.section_5 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 102rpx;
|
||||
padding: 0 121.88rpx;
|
||||
background-color: #ffffff;
|
||||
z-index: 99;
|
||||
}
|
||||
.group {
|
||||
padding: 27.06rpx 4.33rpx 23.08rpx 10.89rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 27.77rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_3 {
|
||||
line-height: 27.9rpx;
|
||||
}
|
||||
.text_4 {
|
||||
line-height: 28.71rpx;
|
||||
}
|
||||
.section_6 {
|
||||
background-color: #fb8b05;
|
||||
width: 112.5rpx;
|
||||
height: 5.63rpx;
|
||||
}
|
||||
.list {
|
||||
margin: 192rpx 24rpx 120rpx 24rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mt-14 {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.section_10 {
|
||||
padding: 38.1rpx 31.52rpx 30.07rpx 27.31rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.image_3 {
|
||||
transform: scale(0.7);
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
.image_2 {
|
||||
// margin-bottom: 8.7rpx;
|
||||
border-radius: 9.38rpx;
|
||||
width: 127.5rpx;
|
||||
height: 170.00rpx;
|
||||
}
|
||||
.group_2 {
|
||||
margin-left: 23.31rpx;
|
||||
margin-top: 2.33rpx;
|
||||
}
|
||||
.group_3 {
|
||||
padding: 0 9.49rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 25.01rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_5 {
|
||||
line-height: 25.54rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 22.07rpx;
|
||||
color: #e79ea1;
|
||||
}
|
||||
.text_6 {
|
||||
margin-left: 24.19rpx;
|
||||
margin-bottom: 7.78rpx;
|
||||
line-height: 22.54rpx;
|
||||
}
|
||||
.image_6 {
|
||||
margin-left: -76.69rpx;
|
||||
width: 30rpx;
|
||||
height: 28.13rpx;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 18.73rpx;
|
||||
color: #e79ea1;
|
||||
}
|
||||
.text_7 {
|
||||
margin-left: 61.44rpx;
|
||||
margin-bottom: 6.15rpx;
|
||||
line-height: 17.53rpx;
|
||||
}
|
||||
.image_4 {
|
||||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||||
width: 45.21rpx;
|
||||
height: 48.13rpx;
|
||||
}
|
||||
.group_4 {
|
||||
margin-left: 3.77rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 14.74rpx 0 14.66rpx;
|
||||
background-color: #fbdedf;
|
||||
width: 58.41rpx;
|
||||
height: 48.13rpx;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 18.73rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.image_5 {
|
||||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||||
width: 45.21rpx;
|
||||
height: 48.13rpx;
|
||||
}
|
||||
.list-item_2 {
|
||||
padding: 22.01rpx 18.84rpx 33.75rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.image_8 {
|
||||
transform: scale(0.7);
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
.image_7 {
|
||||
margin-left: 39.79rpx;
|
||||
margin-top: 2.36rpx;
|
||||
width: 121.88rpx;
|
||||
height: 172.5rpx;
|
||||
}
|
||||
.group_5 {
|
||||
margin: 0 13.99rpx 7.5rpx 23.25rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 31.88rpx;
|
||||
color: #323233;
|
||||
}
|
||||
.section_7 {
|
||||
margin-right: 8.63rpx;
|
||||
padding: 11.1rpx 10.14rpx 14.25rpx;
|
||||
background-color: #fbdedf;
|
||||
border-radius: 9.38rpx;
|
||||
}
|
||||
.font_8 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 22.07rpx;
|
||||
color: #6b6e72;
|
||||
}
|
||||
.text_8 {
|
||||
line-height: 20.83rpx;
|
||||
}
|
||||
.image_9 {
|
||||
margin-right: 5.06rpx;
|
||||
width: 22.5rpx;
|
||||
height: 22.5rpx;
|
||||
}
|
||||
.group_6 {
|
||||
padding: 0 22.61rpx;
|
||||
}
|
||||
.font_9 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 25.01rpx;
|
||||
font-weight: 600;
|
||||
color: #e79ea1;
|
||||
}
|
||||
.text_9 {
|
||||
margin-left: 25.14rpx;
|
||||
line-height: 24.88rpx;
|
||||
}
|
||||
.image_12 {
|
||||
margin-left: -90.77rpx;
|
||||
width: 30rpx;
|
||||
height: 26.25rpx;
|
||||
}
|
||||
.font_10 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 18.73rpx;
|
||||
font-weight: 600;
|
||||
color: #e79ea1;
|
||||
}
|
||||
.text_10 {
|
||||
margin-left: 61.61rpx;
|
||||
line-height: 19.29rpx;
|
||||
}
|
||||
.image_10 {
|
||||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||||
width: 45.24rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.text-wrapper_2 {
|
||||
padding: 12.39rpx 0 13.88rpx;
|
||||
background-color: #fbdedf;
|
||||
width: 58.42rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.image_11 {
|
||||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||||
width: 45.24rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
.section_8 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20.63rpx 20.63rpx 15rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.image_13 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.text_11 {
|
||||
line-height: 27.3rpx;
|
||||
}
|
||||
.text_12 {
|
||||
color: #000000;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 20.93rpx 0 25.24rpx;
|
||||
background-color: #e79ea1;
|
||||
border-radius: 75rpx;
|
||||
width: 219.38rpx;
|
||||
height: 76.88rpx;
|
||||
}
|
||||
.text_13 {
|
||||
color: #ffffff;
|
||||
line-height: 30.71rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -95,49 +95,49 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow,
|
||||
onLoad
|
||||
} from "@dcloudio/uni-app";
|
||||
onMounted(() => {
|
||||
getFonts() //启动使从服务器下载字体
|
||||
import {
|
||||
onMounted,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow,
|
||||
onLoad
|
||||
} from "@dcloudio/uni-app";
|
||||
onMounted(() => {
|
||||
getFonts() //启动使从服务器下载字体
|
||||
})
|
||||
// const goto = () => { //跳转到订单
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/mine/mineorders/mineorders"
|
||||
// })
|
||||
// }
|
||||
const goToText = () => { //跳转到联系人信息
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/Contact/Contact'
|
||||
})
|
||||
// const goto = () => { //跳转到订单
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/mine/mineorders/mineorders"
|
||||
// })
|
||||
// }
|
||||
const goToText = () => { //跳转到联系人信息
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/Contact/Contact'
|
||||
})
|
||||
}
|
||||
const goTo = ()=>{ //跳转到预约
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/bookings/booking'
|
||||
})
|
||||
}
|
||||
const goto = (tab) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mineorders/mineorders?zt='+JSON.stringify(tab)
|
||||
})
|
||||
}
|
||||
const getFonts = () => { //导入字体
|
||||
uni.loadFontFace({
|
||||
family: 'FangZhengFonts',
|
||||
source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
||||
success: (res) => {
|
||||
console.log('success', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const goTo = ()=>{ //跳转到预约
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/bookings/booking'
|
||||
})
|
||||
}
|
||||
const goto = (tab) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mineorders/mineorders?zt='+JSON.stringify(tab)
|
||||
})
|
||||
}
|
||||
const getFonts = () => { //导入字体
|
||||
uni.loadFontFace({
|
||||
family: 'FangZhengFonts',
|
||||
source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
||||
success: (res) => {
|
||||
console.log('success', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
@click="changeTab('待发货')">
|
||||
待发货
|
||||
</view>
|
||||
<view class="font_22" :class="{ active: orderStatus === '已发货', selected: isSelected('已发货') }"
|
||||
@click="changeTab('已发货')">
|
||||
<view class="font_22" :class="{ active: orderStatus === '待收货', selected: isSelected('待收货') }"
|
||||
@click="changeTab('待收货')">
|
||||
已发货
|
||||
</view>
|
||||
<view class="font_22" :class="{ active: orderStatus === '已退款', selected: isSelected('已退款') }"
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-end group_7" v-if="order.orderStatus==='待收货'">
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-14">
|
||||
<view class="flex-col justify-start items-center text-wrapper_2 ml-14" @click="viewLogistics()">
|
||||
<text class="font_3">查看物流</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -125,8 +125,10 @@ const Status = ref({
|
|||
orders: [],
|
||||
displayedOrders: [],
|
||||
})
|
||||
const orderStatus = ''
|
||||
const orderStatus = '' //订单状态
|
||||
const currentColor = ref(0);
|
||||
var plugin = requirePlugin('logisticsPlugin') //微信插件
|
||||
let waybillToken = '' //物流信息唯一标识符
|
||||
const isSelected = (tab) => Status.value.orderStatus === tab
|
||||
onMounted(async () => {
|
||||
await Getorder()
|
||||
|
|
@ -141,8 +143,8 @@ const isSelected = (tab) => Status.value.orderStatus === tab
|
|||
case '待发货':
|
||||
return order.orderStatus === '待发货'
|
||||
case '已发货':
|
||||
return order.orderStatus === '已发货'
|
||||
case '已退款':
|
||||
return order.orderStatus === '待收货'
|
||||
case '待收货':
|
||||
return order.orderStatus === '已退款'
|
||||
default:
|
||||
return false;
|
||||
|
|
@ -281,6 +283,28 @@ const postCancelOrder = async(order)=>{ //向后端发送取消订单请求
|
|||
})
|
||||
}
|
||||
}
|
||||
//查看物流方法
|
||||
const viewLogistics = ()=>{
|
||||
console.log('这是查看物流方法');
|
||||
// var plugin = requirePlugin('logisticsPlugin')
|
||||
uni.request({
|
||||
url: baseUrl + '/logistics/get/info',
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: 125125278
|
||||
},
|
||||
header: {
|
||||
'cookie': wx.getStorageSync("cookie")
|
||||
},
|
||||
success: (res) => {
|
||||
console.log(res.data.data)
|
||||
waybillToken = res.data.data.waybill_token
|
||||
plugin.openWaybillTracking({
|
||||
waybillToken: waybillToken
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//获取字体
|
||||
const getFonts =()=>{
|
||||
uni.loadFontFace({
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
/>
|
||||
<view class="flex-col items-start flex-1 ml-6">
|
||||
<text class="font text">{{ stateObject.msg }}</text>
|
||||
<text class="text_2 mt-4">请于15分钟内付款，超时订单将自动关闭</text>
|
||||
<text class="text_2 mt-4">{{ stateObject.tips }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section_3">
|
||||
|
|
@ -240,7 +240,7 @@ const buffer = async ()=>{ //缓冲函数
|
|||
.page {
|
||||
padding-top: 17.25rpx;
|
||||
background-color: #f8e8c1;
|
||||
background-image: url('https://ide.code.fun/api/image?token=6764d712797f850011f38d7b&name=b87e8545124c67f43b5de0d4813f79b5.png');
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -323,10 +323,10 @@ const wxPay = async( oid )=> { //传入订单id
|
|||
console.log('支付成功res--->',res);
|
||||
},
|
||||
fail(e) {
|
||||
uni.showModal({
|
||||
content: '支付失败，原因为:' + e.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
// uni.showModal({
|
||||
// content: '支付失败，原因为:' + e.errMsg,
|
||||
// showCancel: false
|
||||
// })
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/product-paysuccess/product-paysuccess?oid=' + JSON.stringify(oid)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<text class="font mt-13">￥{{ item.price }}</text>
|
||||
</view>
|
||||
<image class="self-start image_5"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FRcPadqFv-add.png" @click.stop/>
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FRcPadqFv-add.png" @click.stop />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
|
@ -129,8 +129,7 @@ const changeTypes = async (item , index) =>{
|
|||
const getBoxStyle = (index) => ({
|
||||
backgroundColor: currentColor.value === index ? 'brown' : '#fffef8'
|
||||
});
|
||||
|
||||
|
||||
//跳转商品详情
|
||||
const goToProduct = (item) => {
|
||||
uni.navigateTo({
|
||||
url: '../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(item.id)
|
||||
|
|
|
|||
|
|
@ -1,50 +1,60 @@
|
|||
<template>
|
||||
<view class="flex-row relative page">
|
||||
<view class="flex-row justify-between items-center section_2 pos_9">
|
||||
<view class="flex-row justify-between items-center section_2 pos">
|
||||
<text class="text">商品</text>
|
||||
<view class="flex-row items-center section_3">
|
||||
<image
|
||||
class="image"
|
||||
src="https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=28ba6eb522ea75763e30176e00a6dc3a.png"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FODjBDedI-sousuo.png"
|
||||
/>
|
||||
<text class="font text_2 ml-30">“梅花簪子”</text>
|
||||
<input class="text-wrapper" placeholder="“梅花簪子”" />
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
class="image_2 pos_1"
|
||||
src="https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=b76714d3da7f86025735dfadff342eb6.png"
|
||||
class="image_2 pos_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FloZarLZD-%E6%B5%8B%E8%AF%95%E6%8F%92%E5%85%A5.jpg"
|
||||
/>
|
||||
<view class="flex-col section_4 pos_8">
|
||||
<view class="flex-col items-center self-stretch relative group" v-for="(item, index) in items" :key="index">
|
||||
<image
|
||||
class="image_3"
|
||||
src="https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=46b84eacccfe4ba701e720a92c26f90d.png"
|
||||
/>
|
||||
<view class="section_5 pos"></view>
|
||||
<text class="relative font text_5">发簪</text>
|
||||
</view>
|
||||
<!-- 类别列表 -->
|
||||
<view class="flex-col justify-start items-center section_4 pos_3">
|
||||
<!-- <view class="flex-col"> -->
|
||||
<scroll-view scroll-y class="scrollable-contentType">
|
||||
<view class="flex-col items-center self-stretch group"
|
||||
v-for="(item, index) in sort"
|
||||
:key="index"
|
||||
@click="changeTypes(item , index)"
|
||||
>
|
||||
<image
|
||||
:style="changeImgStyle(index)"
|
||||
class="image_3"
|
||||
:src="item.imgurl"
|
||||
/>
|
||||
<text class="font_2 text_4" :style="FontsStyle(index)">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
<view class="flex-row section_6 pos_2">
|
||||
<text class="font_2 text_3">发</text>
|
||||
<text class="font_2 ml-12">簪</text>
|
||||
</view>
|
||||
<view class="flex-col pos_6">
|
||||
<view class="flex-row list-item mt-9" v-for="(item, index) in items_1" :key="index">
|
||||
<!-- 商品列表 -->
|
||||
<view class="flex-col pos_5">
|
||||
<scroll-view scroll-y class="scrollable-content">
|
||||
<view class="flex-row list-item mt-9" v-for="(item, index) in productList" :key="index" @click="goToProduct(item)">
|
||||
<image
|
||||
class="self-center image_4"
|
||||
src="https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=c7ccccbe00e8f4c6f0fb90cc641168c7.png"
|
||||
:src="item.goodImg.split(';')[0]"
|
||||
/>
|
||||
<view class="flex-col items-start self-center group_6">
|
||||
<text class="font text_14">琉璃发体验包</text>
|
||||
<text class="font_3 mt-10">非遗材料包，匠心独运</text>
|
||||
<text class="font_4 text_6 mt-10">￥750</text>
|
||||
<view class="flex-col items-start self-center group_1">
|
||||
<text class="font">{{ item.name }}</text>
|
||||
<text class="font_3 mt-9">{{ item.intro }}</text>
|
||||
<text class="font_4 text_5 text_1 mt-9">￥{{ item.price }}</text>
|
||||
</view>
|
||||
<image
|
||||
class="self-start image_5"
|
||||
src="https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=e20444f9a975445c969b636750776aa5.png"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FhuDBpAGx-add.png"
|
||||
@click.stop
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<text class="font text_3 pos_4">{{ product_type.type }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -56,16 +66,15 @@ const sort =ref([{}]) //商品类别对象数组
|
|||
const headerList = ref([{}]) //类别标题和介绍
|
||||
const productList = ref([{}]) //类别下对应的商品
|
||||
const cookie = wx.getStorageSync("cookie")
|
||||
const product_type = [{
|
||||
type: "材料包",
|
||||
detail: "提供材料自行DIY"
|
||||
}]
|
||||
const items = [null,null,null,null]
|
||||
const product_type = ref({
|
||||
type: "材料包"
|
||||
})
|
||||
const items_1 = [null,null,null]
|
||||
onMounted( async () => {
|
||||
console.log('cookie--->',cookie);
|
||||
await Getsort() //获取商品类别
|
||||
await changeTypes( sort.value[0] , 0 ) //首先获取最开始的类别
|
||||
getFonts() //获取字体
|
||||
})
|
||||
//获取商品分类
|
||||
const Getsort = async ()=>{
|
||||
|
|
@ -99,7 +108,8 @@ const Getsort = async ()=>{
|
|||
}
|
||||
//更改类别
|
||||
const changeTypes = async (item , index) =>{
|
||||
currentColor.value = index
|
||||
currentColor.value = index
|
||||
product_type.value.type = item.name
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/category/list/type',
|
||||
method: 'POST',
|
||||
|
|
@ -120,37 +130,56 @@ const changeTypes = async (item , index) =>{
|
|||
})
|
||||
}
|
||||
}
|
||||
//更改box颜色
|
||||
const getBoxStyle = (index) => ({
|
||||
backgroundColor: currentColor.value === index ? 'brown' : '#fffef8'
|
||||
//点击后颜色变为红色
|
||||
const FontsStyle = (index) => ({
|
||||
color: currentColor.value === index ? '#C35C5D' : '#727272'
|
||||
})
|
||||
//点击后类别图片有阴影
|
||||
const changeImgStyle = (index) => ({
|
||||
filter: currentColor.value === index ? 'drop-shadow(0rpx 7.5rpx 3.75rpx #acacac)' : 'none'
|
||||
});
|
||||
|
||||
|
||||
//跳转商品详情
|
||||
const goToProduct = (item) => {
|
||||
console.log('跳转商品详情的item--->',item);
|
||||
uni.navigateTo({
|
||||
url: '../../../pages/store-home/ProductDetails/ProductDetails?info=' + JSON.stringify(item)
|
||||
url: '../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(item.id)
|
||||
})
|
||||
}
|
||||
const getFonts = () => { //导入字体
|
||||
uni.loadFontFace({
|
||||
family: 'FangZhengFonts',
|
||||
source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
|
||||
success: (res) => {
|
||||
console.log('success', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('err', err);
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrollable-contentType {
|
||||
height: 56vh;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.page {
|
||||
background-color: #ffffff;
|
||||
background-image: url('https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=31fcc3e3780867994362dce95afbe89a.png');
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
.section_2 {
|
||||
padding: 30rpx 45.41rpx 33.75rpx;
|
||||
background-color: #ebe7e4;
|
||||
}
|
||||
.pos_9 {
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -159,7 +188,7 @@ const goToProduct = (item) => {
|
|||
.text {
|
||||
color: #000000;
|
||||
font-size: 45rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 41.66rpx;
|
||||
}
|
||||
.section_3 {
|
||||
|
|
@ -167,7 +196,6 @@ const goToProduct = (item) => {
|
|||
padding: 5.49rpx 12.99rpx 5.76rpx;
|
||||
background-color: #f2eeeb;
|
||||
border-radius: 28.13rpx;
|
||||
width: 468.75rpx;
|
||||
height: 90rpx;
|
||||
border: solid 1.88rpx #fffef8;
|
||||
}
|
||||
|
|
@ -175,86 +203,59 @@ const goToProduct = (item) => {
|
|||
width: 95.63rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 28.13rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.24rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_2 {
|
||||
color: #bf654f;
|
||||
letter-spacing: 11.25rpx;
|
||||
.text-wrapper {
|
||||
margin-left: -9.38rpx;
|
||||
margin-right: 15.26rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 100vw;
|
||||
height: 55vw;
|
||||
}
|
||||
.pos_1 {
|
||||
.pos_2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 153.75rpx;
|
||||
}
|
||||
.section_4 {
|
||||
padding: 3.75rpx 0 62.01rpx;
|
||||
background-color: #f0ece8;
|
||||
width: 182.01rpx;
|
||||
padding: 7.5rpx 0 0rpx;
|
||||
background-color: #f4f3f1;
|
||||
width: 109.75rpx;
|
||||
}
|
||||
.pos_8 {
|
||||
.pos_3 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 570rpx;
|
||||
top: 566.25rpx;
|
||||
}
|
||||
.group {
|
||||
padding-top: 22.5rpx;
|
||||
margin: 0 2.44rpx 20rpx 0;
|
||||
// margin-right: 2.44rpx;
|
||||
}
|
||||
.image_3 {
|
||||
width: 101.25rpx;
|
||||
height: 105rpx;
|
||||
}
|
||||
.section_5 {
|
||||
background-color: #fa7e8233;
|
||||
border-radius: 9.38rpx;
|
||||
width: 180rpx;
|
||||
height: 133.13rpx;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.text_5 {
|
||||
margin-top: 15.64rpx;
|
||||
}
|
||||
.section_6 {
|
||||
padding: 33.39rpx 0 20.16rpx;
|
||||
background-image: url('https://ide.code.fun/api/image?token=675e8b75797f850011f292da&name=7c35c1d42a85635085a71398166d6c05.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 245.63rpx;
|
||||
}
|
||||
.pos_2 {
|
||||
position: absolute;
|
||||
left: 178.13rpx;
|
||||
top: 575.63rpx;
|
||||
// filter: drop-shadow(0rpx 7.5rpx 3.75rpx #acacac); //点击图片有阴影
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 33.75rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 30.06rpx;
|
||||
color: #c35c5d;
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 24.41rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_3 {
|
||||
margin-left: 74.57rpx;
|
||||
.text_4 {
|
||||
font-size: 12px;
|
||||
color: #727272;
|
||||
line-height: 25.43rpx;
|
||||
}
|
||||
.pos_6 {
|
||||
.pos_5 {
|
||||
position: absolute;
|
||||
right: 10.99rpx;
|
||||
top: 671.25rpx;
|
||||
right: 34.63rpx;
|
||||
top: 628.13rpx;
|
||||
}
|
||||
.list-item {
|
||||
padding: 17.53rpx 14.19rpx 18.23rpx;
|
||||
width: 580rpx;
|
||||
padding: 17.53rpx 13.89rpx 18.23rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 9.38rpx;
|
||||
}
|
||||
|
|
@ -263,37 +264,52 @@ const goToProduct = (item) => {
|
|||
}
|
||||
.image_4 {
|
||||
border-radius: 9.38rpx;
|
||||
width: 123.75rpx;
|
||||
width: 121.88rpx;
|
||||
height: 112.5rpx;
|
||||
}
|
||||
.group_6 {
|
||||
margin-left: 22.84rpx;
|
||||
.group_1 {
|
||||
margin-left: 21.68rpx;
|
||||
}
|
||||
.text_14 {
|
||||
.font {
|
||||
font-size: 30rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 28.95rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 21.88rpx;
|
||||
color: #727272;
|
||||
width: 180px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 28.13rpx;
|
||||
font-family: STFangsong;
|
||||
line-height: 18rpx;
|
||||
font-size: 26.25rpx;
|
||||
font-family: FangZhengFonts;
|
||||
line-height: 17.53rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
.text_6 {
|
||||
font-size: 26.25rpx;
|
||||
.text_5 {
|
||||
-webkit-text-stroke: 1.88rpx #ff000040;
|
||||
}
|
||||
.text_1 {
|
||||
margin-left: 3.43rpx;
|
||||
}
|
||||
.image_5 {
|
||||
margin: 63.77rpx 6.02rpx 0 90.64rpx;
|
||||
margin: 37.77rpx 2.8rpx 0 0.85rpx;
|
||||
border-radius: 9.38rpx;
|
||||
width: 52.5rpx;
|
||||
height: 48.75rpx;
|
||||
}
|
||||
.text_3 {
|
||||
color: #c35c5d;
|
||||
line-height: 29.06rpx;
|
||||
}
|
||||
.pos_4 {
|
||||
position: absolute;
|
||||
left: 142.29rpx;
|
||||
top: 585.94rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
|
|||
418
pages/workshop/component/testTimePopUp.vue
Normal file
418
pages/workshop/component/testTimePopUp.vue
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start page">
|
||||
<view class="flex-col section">
|
||||
<view class="flex-row justify-between group">
|
||||
<view class="flex-row items-end">
|
||||
<image
|
||||
class="image"
|
||||
:src="productInfo.goodImg"
|
||||
/>
|
||||
<view class="flex-col items-start relative group_2 ml-13">
|
||||
<view class="group_3">
|
||||
<text class="font text_2">￥</text>
|
||||
<text class="text">{{ productInfo.price }}</text>
|
||||
</view>
|
||||
<text class="font_2 text_3">请选择</text>
|
||||
<!-- <text class="font_2 pos_2">数量：20</text> -->
|
||||
<text class="font_2 pos">场次</text>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
class="self-start image_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col mt-2">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row justify-between items-center section_2">
|
||||
<text class="font text_4">参加日期：2024年11月</text>
|
||||
<text class="font_2 text_5">当前预约人数：10</text>
|
||||
</view>
|
||||
<view class="flex-col group_4 mt-5">
|
||||
<view class="flex-col self-stretch group_5">
|
||||
<text class="self-start font_3 text_6">选择预约时间</text>
|
||||
<view class="flex-col justify-start self-stretch view mt-14">
|
||||
<scroll-view class="group_10" :scroll-x="true">
|
||||
<view class="flex-row justify-between items-baseline">
|
||||
<text :style="{color: textColor[index]}" class="font_4 text_7" v-for="(item, index) in items" :key="index" @click="choose(index)">
|
||||
今天12-09
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row self-center relative grid">
|
||||
<view class="flex-col justify-start grid-item pos_1">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 text_11 pos_3">10:00-12:00</text>
|
||||
<text class="font_3 pos_5">可预约</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start grid-item_2 pos_14">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 pos_4">12:00-14:00</text>
|
||||
<text class="font_3 pos_6">可预约</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center grid-item_3 pos_15">
|
||||
<text class="font_3">可预约</text>
|
||||
<view class="flex-col justify-start items-center text-wrapper pos_7">
|
||||
<text class="font_5">14:00-16:00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start grid-item_2 pos_11">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 pos_8">16:00-18:00</text>
|
||||
<text class="font_3 pos_9">可预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start self-stretch group_6">
|
||||
<view class="flex-row justify-between section_5">
|
||||
<text class="font_3 text_12">预约时间</text>
|
||||
<view class="flex-row items-center group_7">
|
||||
<text class="font_5">2024-12-09</text>
|
||||
<text class="font_5 ml-22">暂未选择</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col items-start self-stretch section_6">
|
||||
<text class="font">购买须知：本次课程活动最少需要到</text>
|
||||
<text class="font">达5人才能进行授课</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center section_7">
|
||||
<view class="flex-row section_8">
|
||||
<text class="font_4 text_13">加入购物车</text>
|
||||
<!-- <text class="font_4 text_14 ml-21">买</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '../../../api/request';
|
||||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
const items = ref([null,null,null,null,null,null,null])
|
||||
const father = defineProps(['pid'])
|
||||
const pid = ref(0) //商品id
|
||||
const productInfo = ref({}) //商品对象
|
||||
const bookTimeList = ref([]) //时间段数组
|
||||
const textColor = ref(['#000', '#000', '#000', '#000', '#000', '#000', '#000'])
|
||||
onLoad((options)=>{
|
||||
})
|
||||
onMounted(()=>{
|
||||
// console.log('onMounted--->',father.pid);
|
||||
getProduct()
|
||||
})
|
||||
const choose = (index) => { //选中后要改变颜色和切换
|
||||
console.log(textColor.value[index]);
|
||||
textColor.value[index] = '#C35C5D'
|
||||
}
|
||||
const getProduct = async ()=>{
|
||||
pid.value = father.pid //父组件传来的商品id
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/goods/service/list/id',
|
||||
method: 'POST',
|
||||
data:{ id: pid.value },
|
||||
header: { cookie }
|
||||
})
|
||||
console.log('后端传来的商品信息--->',res.data.data);
|
||||
if(res.data.code === 1 ) {
|
||||
productInfo.value = res.data.data
|
||||
bookTimeList.value = res.data.data.appointmentDateVOList
|
||||
}
|
||||
console.log('商品信息--->',productInfo.value);
|
||||
console.log('时间段信息--->',bookTimeList.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ml-13 {
|
||||
margin-left: 24.38rpx;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
}
|
||||
.ml-21 {
|
||||
margin-left: 39.38rpx;
|
||||
}
|
||||
.page {
|
||||
padding-bottom: 18.75rpx;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.section {
|
||||
padding: 28.13rpx 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||||
}
|
||||
.group {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.image {
|
||||
border-radius: 5.63rpx;
|
||||
width: 195rpx;
|
||||
height: 204.38rpx;
|
||||
}
|
||||
.group_2 {
|
||||
margin-bottom: 5.29rpx;
|
||||
padding-bottom: 28.86rpx;
|
||||
width: 157.8rpx;
|
||||
}
|
||||
.group_3 {
|
||||
margin-left: 17.51rpx;
|
||||
line-height: 29.7rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 37.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 45rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_2 {
|
||||
color: #c35c5d;
|
||||
line-height: 24.17rpx;
|
||||
}
|
||||
.text {
|
||||
color: #c35c5d;
|
||||
font-size: 45rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 29.7rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 31.88rpx;
|
||||
color: #818181;
|
||||
}
|
||||
.text_3 {
|
||||
margin-top: 21.26rpx;
|
||||
}
|
||||
.pos_2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.pos {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 28.03rpx;
|
||||
}
|
||||
.image_2 {
|
||||
margin-right: 20.63rpx;
|
||||
margin-top: 5.63rpx;
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
.section_2 {
|
||||
padding: 30.53rpx 21.86rpx 30.36rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
}
|
||||
.text_4 {
|
||||
color: #000000;
|
||||
line-height: 36.62rpx;
|
||||
}
|
||||
.text_5 {
|
||||
margin-right: 16.14rpx;
|
||||
line-height: 25.43rpx;
|
||||
}
|
||||
.group_4 {
|
||||
padding: 0 20.63rpx 35.63rpx;
|
||||
}
|
||||
.group_5 {
|
||||
padding: 31.76rpx 7.5rpx 0;
|
||||
border-top: solid 1.88rpx #d9d9d9;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.07rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_6 {
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.view {
|
||||
margin-right: 7.5rpx;
|
||||
padding: 35.98rpx 0 35.87rpx 20rpx;
|
||||
background-color: #faddde;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.group_10 {
|
||||
// margin-left: 11.78rpx;
|
||||
margin-right: 14.83rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.07rpx;
|
||||
color: #c35c5d;
|
||||
}
|
||||
.text_7 {
|
||||
// border: 1px solid red;
|
||||
margin-right: 20rpx;
|
||||
line-height: 27.3rpx;
|
||||
}
|
||||
.grid {
|
||||
margin-top: 75rpx;
|
||||
width: 605.63rpx;
|
||||
height: 228.75rpx;
|
||||
}
|
||||
.grid-item {
|
||||
background-color: #fbdedf;
|
||||
border-radius: 18.75rpx;
|
||||
background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_1 {
|
||||
position: absolute;
|
||||
left: 3.75rpx;
|
||||
top: 0;
|
||||
}
|
||||
.section_4 {
|
||||
background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 90rpx;
|
||||
}
|
||||
.font_5 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 20.04rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_11 {
|
||||
width: 150rpx;
|
||||
}
|
||||
.pos_3 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 16.99rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.pos_5 {
|
||||
position: absolute;
|
||||
left: 74.53rpx;
|
||||
bottom: 12.06rpx;
|
||||
}
|
||||
.grid-item_2 {
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_14 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.pos_4 {
|
||||
position: absolute;
|
||||
right: 42.83rpx;
|
||||
top: 20.74rpx;
|
||||
}
|
||||
.pos_6 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 13.93rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.grid-item_3 {
|
||||
padding: 54.62rpx 0 8.31rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_15 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 138.75rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 22.61rpx 0 47.34rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 256.88rpx;
|
||||
}
|
||||
.pos_7 {
|
||||
position: absolute;
|
||||
left: 3.75rpx;
|
||||
right: -7.5rpx;
|
||||
top: 0;
|
||||
}
|
||||
.pos_11 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 138.75rpx;
|
||||
}
|
||||
.pos_8 {
|
||||
position: absolute;
|
||||
right: 39.67rpx;
|
||||
top: 18.86rpx;
|
||||
}
|
||||
.pos_9 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 8.31rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 97.5rpx;
|
||||
padding-bottom: 9.38rpx;
|
||||
border-bottom: solid 1.88rpx #d9d9d9;
|
||||
}
|
||||
.section_5 {
|
||||
margin-left: 22.5rpx;
|
||||
margin-right: 11.27rpx;
|
||||
padding: 12.66rpx 14.42rpx 27.9rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.text_12 {
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.group_7 {
|
||||
margin-right: 13.74rpx;
|
||||
}
|
||||
.section_6 {
|
||||
margin: 43.13rpx 46.88rpx 0 41.25rpx;
|
||||
padding: 25.28rpx 6.62rpx 38.19rpx 12.13rpx;
|
||||
background-color: #fff2f2f5;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.section_7 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// border: 1px solid red;
|
||||
margin-left: 7.5rpx;
|
||||
margin-right: 5.63rpx;
|
||||
padding: 16.88rpx 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.section_8 {
|
||||
padding: 26.14rpx 0 25.07rpx;
|
||||
background-color: #fbdedf;
|
||||
border-radius: 46.88rpx;
|
||||
width: 618.75rpx;
|
||||
}
|
||||
.text_13 {
|
||||
margin-left: 240.94rpx;
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
.text_14 {
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
@ -1,114 +1,147 @@
|
|||
<template>
|
||||
<view class="flex-col justify-start page">
|
||||
<view class="flex-col section">
|
||||
<view class="flex-row justify-between group">
|
||||
<view class="flex-row items-end">
|
||||
<image
|
||||
class="image"
|
||||
:src="productInfo.goodImg"
|
||||
/>
|
||||
<view class="flex-col items-start relative group_2 ml-13">
|
||||
<view class="group_3">
|
||||
<text class="font text_2">￥</text>
|
||||
<text class="text">{{ productInfo.price }}</text>
|
||||
</view>
|
||||
<text class="font_2 text_3">请选择</text>
|
||||
<!-- <text class="font_2 pos_2">数量：20</text> -->
|
||||
<text class="font_2 pos">场次</text>
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
class="self-start image_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="flex-col mt-2">
|
||||
<view class="flex-col">
|
||||
<view class="flex-row justify-between items-center section_2">
|
||||
<text class="font text_4">参加日期：2024年11月</text>
|
||||
<text class="font_2 text_5">当前预约人数：10</text>
|
||||
</view>
|
||||
<view class="flex-col group_4 mt-5">
|
||||
<view class="flex-col self-stretch group_5">
|
||||
<text class="self-start font_3 text_6">选择预约时间</text>
|
||||
<view class="flex-col justify-start self-stretch view mt-14">
|
||||
<scroll-view class="group_10" :scroll-x="true">
|
||||
<view class="flex-row justify-between items-baseline">
|
||||
<text :style="{color: textColor[index]}" class="font_4 text_7" v-for="(item, index) in items" :key="index" @click="choose(index)">
|
||||
今天12-09
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row self-center relative grid">
|
||||
<view class="flex-col justify-start grid-item pos_1">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 text_11 pos_3">10:00-12:00</text>
|
||||
<text class="font_3 pos_5">可预约</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start grid-item_2 pos_14">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 pos_4">12:00-14:00</text>
|
||||
<text class="font_3 pos_6">可预约</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center grid-item_3 pos_15">
|
||||
<text class="font_3">可预约</text>
|
||||
<view class="flex-col justify-start items-center text-wrapper pos_7">
|
||||
<text class="font_5">14:00-16:00</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start grid-item_2 pos_11">
|
||||
<view class="section_4"></view>
|
||||
<text class="font_5 pos_8">16:00-18:00</text>
|
||||
<text class="font_3 pos_9">可预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start self-stretch group_6">
|
||||
<view class="flex-row justify-between section_5">
|
||||
<text class="font_3 text_12">预约时间</text>
|
||||
<view class="flex-row items-center group_7">
|
||||
<text class="font_5">2024-12-09</text>
|
||||
<text class="font_5 ml-22">暂未选择</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col items-start self-stretch section_6">
|
||||
<text class="font">购买须知：本次课程活动最少需要到</text>
|
||||
<text class="font">达5人才能进行授课</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center section_7">
|
||||
<view class="flex-row section_8">
|
||||
<text class="font_4 text_13">加入购物车</text>
|
||||
<!-- <text class="font_4 text_14 ml-21">买</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col page">
|
||||
<view class="flex-col self-stretch">
|
||||
<view class="flex-col self-stretch group">
|
||||
<view class="flex-row justify-between group_2">
|
||||
<view class="flex-row items-end group_3">
|
||||
<image class="image-wrapper" :src="productInfo.goodImg"></image>
|
||||
<view class="flex-col items-start relative group_5 ml-13">
|
||||
<view class="group_6">
|
||||
<text class="font text_2">￥</text>
|
||||
<text class="text">{{ productInfo.price }}</text>
|
||||
</view>
|
||||
<text class="font_2 text_3">请选择</text>
|
||||
<text class="font_2 pos_2">最大人数：0</text>
|
||||
<text class="font_2 pos">场次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col group_4">
|
||||
<image
|
||||
class="self-end image_2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTZQhzAYT-close.png"
|
||||
/>
|
||||
<view class="flex-row self-stretch mt-63">
|
||||
<image
|
||||
class="image_3"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FnKMzaToH-short.png"
|
||||
@click="short()"
|
||||
/>
|
||||
<view class="flex-col justify-start items-center text-wrapper ml-2"><text class="text_4">{{ classNum }}</text></view>
|
||||
<image
|
||||
class="image_4 ml-2"
|
||||
src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FhvzZoTdm-add.png"
|
||||
@click="add()"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-between items-center section">
|
||||
<text class="font text_5">参加日期：{{ selected.date }}</text>
|
||||
<text class="font_2 text_6">当前预约人数：10</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="self-stretch divider view"></view>
|
||||
<text class="self-start font_3 text_7">选择预约时间</text>
|
||||
<view class="section_1">
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="flex-row justify-between items-baseline group_1">
|
||||
<text :style="{ color: item.color }" class="font_4 text_8" v-for="(item, index) in bookTimeList" :key="index" @click="chooseDate(index)">
|
||||
{{ weekDay(item.specificDate) }}{{ item.specificDate.substring(5,10) }}
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row justify-start self-center grid">
|
||||
<!-- 时间段数组小于等于2的情况 -->
|
||||
<view class="flex-1 list_temp" v-if="timeSlotList.length <= 2">
|
||||
<view class="flex-col justify-start relative" v-for="(item, index) in timeSlotList" :key="index" @click="chooseTimeSlot(index)">
|
||||
<view :style="{ backgroundColor: item.color }" class="section_3" ></view>
|
||||
<text class="font_5 text_12 pos_temp3">{{ item.timeSlot }}</text>
|
||||
<text class="font_3 pos_temp5">可预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 时间段数组大于三才显示 -->
|
||||
<view class="flex-1 list_2" v-if="timeSlotList.length >= 3">
|
||||
<view class="flex-col justify-start relative" v-for="(item, index) in timeSlotList" :key="index" @click="chooseTimeSlot(index)">
|
||||
<view class="section_3" :style="{ backgroundColor: item.color }"></view>
|
||||
<text class="font_5 text_12 pos_3">{{ item.timeSlot }}</text>
|
||||
<!-- 缺当前预约人数 -->
|
||||
<text class="font_3 pos_5">可预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col self-stretch group_7">
|
||||
<view class="flex-row justify-between section_4">
|
||||
<text class="font_3 text_13">预约时间</text>
|
||||
<text class="font_3 text_14">{{ selected.date }} {{ selected.time }}</text>
|
||||
</view>
|
||||
<view class="divider mt-9"></view>
|
||||
</view>
|
||||
<view class="flex-col items-start self-center section_5">
|
||||
<text class="font_6">购买须知：本次课程活动最少需要到达5人才</text>
|
||||
<text class="font_6 text_1">能进行授课</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center self-stretch section_6">
|
||||
<view class="flex-row section_7">
|
||||
<text class="font_4 text_15">加入购物车</text>
|
||||
<!-- <text class="font_4 text_16 ml-21">买</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { baseUrl } from '../../../api/request';
|
||||
import { weekDay } from '../../../common/global';
|
||||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
const items = ref([null,null,null,null,null,null,null])
|
||||
const father = defineProps(['pid'])
|
||||
const pid = ref(0) //商品id
|
||||
const productInfo = ref({}) //商品对象
|
||||
const bookTimeList = ref([]) //时间段数组
|
||||
const textColor = ref(['#000', '#000', '#000', '#000', '#000', '#000', '#000'])
|
||||
const bookTimeList = ref([]) //日期数组
|
||||
const timeSlotList = ref([]) //时间段数组
|
||||
const selected = ref({ //选中的日期+时间
|
||||
date: '',
|
||||
time: '',
|
||||
minNum: 0,
|
||||
maxNum: 0
|
||||
})
|
||||
const classNum = ref(1) //课程数量
|
||||
const flag = ref(0)
|
||||
onLoad((options)=>{
|
||||
})
|
||||
onMounted(()=>{
|
||||
// console.log('onMounted--->',father.pid);
|
||||
getProduct()
|
||||
})
|
||||
const choose =(index)=>{}
|
||||
const getProduct = async ()=>{
|
||||
const chooseDate = (index) => { //选中后要改变颜色和切换日期
|
||||
selected.value.date = bookTimeList.value[index].specificDate
|
||||
selected.value.time = ''
|
||||
classNum.value = 1 //切换了时间就初始化
|
||||
bookTimeList.value.forEach((item)=>{
|
||||
if(item != bookTimeList.value[index]) {
|
||||
item.color = '#000000'
|
||||
} else {
|
||||
bookTimeList.value[index].color = '#C35C5D'
|
||||
}
|
||||
})
|
||||
timeSlotList.value = bookTimeList.value[index].timePeriodVOList //将当前日期下的时间段赋值
|
||||
console.log('选中下日期时间段--->',bookTimeList.value[index].timePeriodVOList);
|
||||
}
|
||||
const chooseTimeSlot =(index) => { //选中后要改变颜色和切换时间段
|
||||
selected.value.time = timeSlotList.value[index].timeSlot
|
||||
selected.value.maxNum = timeSlotList.value[index].maxNumber
|
||||
classNum.value = 1 //切换了时间就初始化
|
||||
timeSlotList.value.forEach((item)=>{
|
||||
if(item != timeSlotList.value[index]) {
|
||||
item.color = '#FFFFFF'
|
||||
} else {
|
||||
item.color = '#FBDEDF'
|
||||
}
|
||||
})
|
||||
}
|
||||
const getProduct = async ()=>{ //获取商品信息
|
||||
pid.value = father.pid //父组件传来的商品id
|
||||
const res = await uni.request({
|
||||
url: baseUrl + '/goods/service/list/id',
|
||||
|
|
@ -119,10 +152,36 @@ const getProduct = async ()=>{
|
|||
console.log('后端传来的商品信息--->',res.data.data);
|
||||
if(res.data.code === 1 ) {
|
||||
productInfo.value = res.data.data
|
||||
bookTimeList.value = res.data.data.appointmentDateVOList
|
||||
bookTimeList.value = res.data.data.appointmentDateVOList
|
||||
}
|
||||
console.log('商品信息--->',productInfo.value);
|
||||
console.log('时间段信息--->',bookTimeList.value);
|
||||
console.log('日期+时间段信息--->',bookTimeList.value);
|
||||
}
|
||||
const short =()=> { //减少购买课程数量
|
||||
if( selected.value.maxNum === 0 ) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '请先选择时间段',
|
||||
duration: 1000
|
||||
})
|
||||
return;
|
||||
}
|
||||
if(classNum.value > 1) {
|
||||
classNum.value -= 1
|
||||
}
|
||||
}
|
||||
const add =()=> { //传入当前课程最大人数
|
||||
if( selected.value.maxNum === 0 ) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '请先选择时间段',
|
||||
duration: 1000
|
||||
})
|
||||
return;
|
||||
}
|
||||
if(classNum.value < selected.value.maxNum) {
|
||||
classNum.value += 1
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -130,46 +189,53 @@ const getProduct = async ()=>{
|
|||
.ml-13 {
|
||||
margin-left: 24.38rpx;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 9.38rpx;
|
||||
.mt-63 {
|
||||
margin-top: 118.13rpx;
|
||||
}
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
.ml-21 {
|
||||
margin-left: 39.38rpx;
|
||||
}
|
||||
.page {
|
||||
padding-bottom: 18.75rpx;
|
||||
padding-top: 28.13rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.section {
|
||||
padding: 28.13rpx 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
|
||||
}
|
||||
.group {
|
||||
padding-bottom: 9.38rpx;
|
||||
}
|
||||
.group_2 {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.image {
|
||||
.group_3 {
|
||||
margin-bottom: 5.01rpx;
|
||||
}
|
||||
.image-wrapper {
|
||||
border-radius: 5.63rpx;
|
||||
// background-image: url('https://ide.code.fun/api/image?token=677b3b47797f850011f57419&name=f41b64b57071affd8eecfaa15a455af2.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 195rpx;
|
||||
height: 204.38rpx;
|
||||
}
|
||||
.group_2 {
|
||||
.group_5 {
|
||||
margin-bottom: 5.29rpx;
|
||||
padding-bottom: 28.86rpx;
|
||||
width: 157.8rpx;
|
||||
}
|
||||
.group_3 {
|
||||
.group_6 {
|
||||
margin-left: 17.51rpx;
|
||||
line-height: 29.7rpx;
|
||||
}
|
||||
.font {
|
||||
font-size: 37.5rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 45rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_2 {
|
||||
color: #c35c5d;
|
||||
|
|
@ -200,31 +266,57 @@ const getProduct = async ()=>{
|
|||
right: 0;
|
||||
bottom: 28.03rpx;
|
||||
}
|
||||
.group_4 {
|
||||
margin-top: 5.63rpx;
|
||||
width: 176.25rpx;
|
||||
}
|
||||
.image_2 {
|
||||
margin-right: 20.63rpx;
|
||||
margin-top: 5.63rpx;
|
||||
width: 37.5rpx;
|
||||
height: 37.5rpx;
|
||||
}
|
||||
.section_2 {
|
||||
.image_3 {
|
||||
border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
|
||||
width: 45.21rpx;
|
||||
height: 48.13rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 14.74rpx 0 14.66rpx;
|
||||
background-color: #ffffff;
|
||||
width: 58.41rpx;
|
||||
height: 48.13rpx;
|
||||
}
|
||||
.text_4 {
|
||||
color: #323232;
|
||||
font-size: 26.25rpx;
|
||||
font-family: Open Sans;
|
||||
line-height: 18.73rpx;
|
||||
}
|
||||
.image_4 {
|
||||
border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
|
||||
width: 45.21rpx;
|
||||
height: 48.13rpx;
|
||||
}
|
||||
.section {
|
||||
padding: 30.53rpx 21.86rpx 30.36rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 28.13rpx;
|
||||
}
|
||||
.text_4 {
|
||||
.text_5 {
|
||||
color: #000000;
|
||||
line-height: 36.62rpx;
|
||||
}
|
||||
.text_5 {
|
||||
.text_6 {
|
||||
margin-right: 16.14rpx;
|
||||
line-height: 25.43rpx;
|
||||
}
|
||||
.group_4 {
|
||||
padding: 0 20.63rpx 35.63rpx;
|
||||
.divider {
|
||||
background-color: #d9d9d9;
|
||||
height: 1.88rpx;
|
||||
}
|
||||
.group_5 {
|
||||
padding: 31.76rpx 7.5rpx 0;
|
||||
border-top: solid 1.88rpx #d9d9d9;
|
||||
.view {
|
||||
margin-left: 20.63rpx;
|
||||
margin-right: 26.27rpx;
|
||||
}
|
||||
.font_3 {
|
||||
font-size: 30rpx;
|
||||
|
|
@ -232,51 +324,78 @@ const getProduct = async ()=>{
|
|||
line-height: 27.07rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_6 {
|
||||
.text_7 {
|
||||
margin-left: 29.31rpx;
|
||||
margin-top: 29.89rpx;
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.view {
|
||||
margin-right: 7.5rpx;
|
||||
padding: 35.98rpx 0 35.87rpx 20rpx;
|
||||
background-color: #faddde;
|
||||
border-radius: 18.75rpx;
|
||||
.section_1 {
|
||||
padding: 30rpx 0;
|
||||
background-color: #FBDEDF;
|
||||
border-radius: 10rpx;
|
||||
align-self: stretch;
|
||||
margin: 26.47rpx 28.13rpx 0 28.13rpx;
|
||||
}
|
||||
.group_10 {
|
||||
// margin-left: 11.78rpx;
|
||||
.group_1 {
|
||||
margin-left: 11.78rpx;
|
||||
margin-right: 14.83rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 30rpx;
|
||||
// font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 27.07rpx;
|
||||
color: #c35c5d;
|
||||
color: #000000;
|
||||
}
|
||||
.text_7 {
|
||||
// border: 1px solid red;
|
||||
margin-right: 20rpx;
|
||||
.text_8 {
|
||||
line-height: 27.3rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
.grid {
|
||||
margin-top: 75rpx;
|
||||
margin-top: 60rpx;
|
||||
width: 605.63rpx;
|
||||
}
|
||||
.list_2 {
|
||||
height: 228.75rpx;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
row-gap: 54rpx;
|
||||
column-gap: 102rpx;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.grid-item {
|
||||
background-color: #fbdedf;
|
||||
border-radius: 18.75rpx;
|
||||
background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 253.13rpx;
|
||||
//处理时间段数组长度小于2的情况
|
||||
.list_temp {
|
||||
height: 105.75rpx;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
row-gap: 54rpx;
|
||||
column-gap: 102rpx;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.pos_1 {
|
||||
position: absolute;
|
||||
left: 3.75rpx;
|
||||
top: 0;
|
||||
.pos_temp3 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 52.99rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.section_4 {
|
||||
background-image: url('https://ide.code.fun/api/image?token=67582be6797f850011f1edb7&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-size: 100% 100%;
|
||||
.pos_temp5 {
|
||||
position: absolute;
|
||||
left: 74.53rpx;
|
||||
bottom: -14.94rpx;
|
||||
}
|
||||
.group_temp7 {
|
||||
margin-top: 97.5rpx;
|
||||
padding: 0 22.5rpx;
|
||||
}
|
||||
//到这里结束
|
||||
.section_3 {
|
||||
background-image: url('https://ide.code.fun/api/image?token=677b3b47797f850011f57419&name=5f9759dd4fc5b6049913f513ad7248f2.png');
|
||||
background-color: #ffffff;
|
||||
border-radius: 26rpx;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
|
@ -286,7 +405,7 @@ const getProduct = async ()=>{
|
|||
line-height: 20.04rpx;
|
||||
color: #000000;
|
||||
}
|
||||
.text_11 {
|
||||
.text_12 {
|
||||
width: 150rpx;
|
||||
}
|
||||
.pos_3 {
|
||||
|
|
@ -300,116 +419,59 @@ const getProduct = async ()=>{
|
|||
left: 74.53rpx;
|
||||
bottom: 12.06rpx;
|
||||
}
|
||||
.grid-item_2 {
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 253.13rpx;
|
||||
.group_7 {
|
||||
margin-top: 60rpx;
|
||||
padding: 0 22.5rpx;
|
||||
}
|
||||
.pos_14 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.pos_4 {
|
||||
position: absolute;
|
||||
right: 42.83rpx;
|
||||
top: 20.74rpx;
|
||||
}
|
||||
.pos_6 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 13.93rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.grid-item_3 {
|
||||
padding: 54.62rpx 0 8.31rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 18.75rpx;
|
||||
width: 253.13rpx;
|
||||
}
|
||||
.pos_15 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 138.75rpx;
|
||||
}
|
||||
.text-wrapper {
|
||||
padding: 22.61rpx 0 47.34rpx;
|
||||
background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVQSWQJrq-selectbox.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
width: 256.88rpx;
|
||||
}
|
||||
.pos_7 {
|
||||
position: absolute;
|
||||
left: 3.75rpx;
|
||||
right: -7.5rpx;
|
||||
top: 0;
|
||||
}
|
||||
.pos_11 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 138.75rpx;
|
||||
}
|
||||
.pos_8 {
|
||||
position: absolute;
|
||||
right: 39.67rpx;
|
||||
top: 18.86rpx;
|
||||
}
|
||||
.pos_9 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 8.31rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.group_6 {
|
||||
margin-top: 97.5rpx;
|
||||
padding-bottom: 9.38rpx;
|
||||
border-bottom: solid 1.88rpx #d9d9d9;
|
||||
}
|
||||
.section_5 {
|
||||
margin-left: 22.5rpx;
|
||||
margin-right: 11.27rpx;
|
||||
padding: 12.66rpx 14.42rpx 27.9rpx;
|
||||
.section_4 {
|
||||
margin-left: 20.63rpx;
|
||||
margin-right: 9.38rpx;
|
||||
// padding: 12.66rpx 13.54rpx 76.65rpx 16.29rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.text_12 {
|
||||
.text_13 {
|
||||
line-height: 28.01rpx;
|
||||
}
|
||||
.group_7 {
|
||||
margin-right: 13.74rpx;
|
||||
.text_14 {
|
||||
line-height: 28.84rpx;
|
||||
}
|
||||
.section_6 {
|
||||
margin: 43.13rpx 46.88rpx 0 41.25rpx;
|
||||
padding: 25.28rpx 6.62rpx 38.19rpx 12.13rpx;
|
||||
.section_5 {
|
||||
margin-top: 54.38rpx;
|
||||
padding: 32.23rpx 10.56rpx 91.29rpx 17.57rpx;
|
||||
background-color: #fff2f2f5;
|
||||
border-radius: 18.75rpx;
|
||||
}
|
||||
.section_7 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// border: 1px solid red;
|
||||
margin-left: 7.5rpx;
|
||||
margin-right: 5.63rpx;
|
||||
.font_6 {
|
||||
font-size: 30rpx;
|
||||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||||
line-height: 35.63rpx;
|
||||
color: #323232;
|
||||
}
|
||||
.text_1 {
|
||||
margin-left: 2.12rpx;
|
||||
}
|
||||
.section_6 {
|
||||
margin-left: 15rpx;
|
||||
margin-top: 88.13rpx;
|
||||
padding: 16.88rpx 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.section_8 {
|
||||
.section_7 {
|
||||
padding: 26.14rpx 0 25.07rpx;
|
||||
background-color: #fbdedf;
|
||||
border-radius: 46.88rpx;
|
||||
width: 618.75rpx;
|
||||
}
|
||||
.text_13 {
|
||||
margin-left: 240.94rpx;
|
||||
.text_15 {
|
||||
// margin-left: 260.94rpx;
|
||||
margin: 0 auto;
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
.text_14 {
|
||||
.text_16 {
|
||||
line-height: 27.54rpx;
|
||||
}
|
||||
.text_8:first-child {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
@import url(../../../common/css/global.css);
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
</text>
|
||||
</view>
|
||||
<view class="flex-row items-baseline self-stretch group_2 mt-15">
|
||||
<text class="font_3">最近可预约时间：2024.11.11</text>
|
||||
<text class="font_3 ml-1">9：30 - 10：30</text>
|
||||
<text class="font_3" style="margin-left: 0;">最近可预约时间：{{ specificDate }}</text>
|
||||
<text class="font_3 ml-1" style="margin-left: 20rpx;">{{ specificTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-col section_4 mt-6">
|
||||
|
|
@ -81,6 +81,8 @@ const pid = ref(0) //商品id
|
|||
const cookie = wx.getStorageSync("cookie") //请求头
|
||||
const productObject = ref({})
|
||||
const popup = ref(null) //弹窗对象
|
||||
const specificDate = ref('') //渲染最近可预约日期
|
||||
const specificTime = ref('') //渲染最近可预约时间段
|
||||
onMounted(()=>{
|
||||
emitter.on('close',()=>{
|
||||
close()
|
||||
|
|
@ -103,6 +105,9 @@ const getProduct = async() =>{
|
|||
})
|
||||
if(res.data.code === 1) {
|
||||
productObject.value = res.data.data
|
||||
specificDate.value = res.data.data.appointmentDateVOList[0].specificDate //最近可预约日期
|
||||
specificTime.value = res.data.data.appointmentDateVOList[0].timePeriodVOList[0].timeSlot //最近可预约时间
|
||||
console.log('商品对象为--->',productObject.value);
|
||||
} else {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user