hly
/
drink-answer-wechat-uniapp-24-9-2
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 1 year ago
parent
139029b311
commit
7ca9e5babf
4 changed files with 0 additions and 454 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -12
      pages.json
  2. +0
    -256
      pages/index/cart.vue
  3. +0
    -181
      pages/index/category.vue
  4. +0
    -5
      store/store.js

+ 0
- 12
pages.json View File

@ -11,23 +11,11 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/category",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/center",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/index/cart",
"style": {
"navigationBarTitleText": ""
}
}
],
"preloadRule": {


+ 0
- 256
pages/index/cart.vue View File

@ -1,256 +0,0 @@
<template>
<view class="page">
<navbar/>
<view class="user">
<uv-checkbox-group
shape="circle"
v-model="checkboxValue">
<uv-swipe-action>
<view
v-for="(item, index) in list"
:key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item
:options="options">
<view class="item">
<view class="checkbox">
<uv-checkbox
:name="item.id"
activeColor="#FA5A0A"
size="40rpx"
icon-size="35rpx"
></uv-checkbox>
</view>
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="info">
<view class="title">
<view class="">
{{ item.title }}
</view>
<view class="">
<uv-number-box v-model="item.num"
@change="valChange"></uv-number-box>
</view>
</view>
<view class="unit">
规格：{{ item.unit }}
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
￥<text>{{ item.price }}</text>元
</view>
</view>
</view>
</uv-swipe-action-item>
</view>
</uv-swipe-action>
</uv-checkbox-group>
<view class="action">
<view class="icon">
<image src="/static/image/cart/1.png" mode=""></image>
<view class="num">
{{ checkboxValue.length }}
</view>
</view>
<view class="price">
<view class="count">
合计
<view class="">
￥<text>{{ totalPrice }}</text>
</view>
</view>
<view class="text">
共{{ checkboxValue.length }}件，已享受更低优惠
</view>
</view>
<view class="btn">
去结算
</view>
</view>
</view>
<tabber select="3" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
export default {
components: {
tabber,
},
data() {
return {
value : 0,
checkboxValue : [],
options: [
{
text: '删除',
style: {
backgroundColor: '#FA5A0A'
}
},
],
list : [
{
id : 1,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
{
id : 2,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
],
}
},
computed: {
totalPrice(){
if (!this.checkboxValue.length) {
return 0
}
let price = 0
this.list.forEach(n => {
if(this.checkboxValue.includes(n.id)){
price += n.price * n.num
}
})
return price
},
},
methods: {
valChange(){
},
}
}
</script>
<style scoped lang="scss">
.page {
padding-bottom: 200rpx;
}
.user {
.item{
background-color: #fff;
display: flex;
padding: 30rpx;
.checkbox{
display: flex;
justify-content: center;
align-items: center;
}
.image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.info{
flex: 1;
.title{
display: flex;
padding: 10rpx 20rpx;
justify-content: space-between;
}
.unit{
font-size: 24rpx;
padding: 10rpx 20rpx;
color: #717171;
display: flex;
align-items: center;
}
.price{
color: $uni-color;
font-size: 28rpx;
padding: 10rpx 20rpx;
text{
font-size: 36rpx;
font-weight: 900;
}
}
}
}
.action{
width: 700rpx;
position: fixed;
bottom: 220rpx;
left: 25rpx;
background-color: #fff;
height: 100rpx;
border-radius: 50rpx;
box-shadow: 0 0 6rpx 6rpx #00000010;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.icon{
position: relative;
width: 80rpx;
height: 80rpx;
margin: 0 20rpx;
image{
width: 80rpx;
height: 80rpx;
}
.num{
position: absolute;
right: 10rpx;
top: 0rpx;
background-color: $uni-color;
color: #fff;
font-size: 18rpx;
border-radius: 50%;
height: 30rpx;
width: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.price{
.count{
display: flex;
font-size: 26rpx;
align-items: center;
view{
color: $uni-color;
margin-left: 10rpx;
text{
font-size: 32rpx;
font-weight: 900;
}
}
}
.text{
font-size: 20rpx;
color: #717171;
}
}
.btn{
margin-left: auto;
background-color: $uni-color;
height: 100%;
padding: 0 50rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>

+ 0
- 181
pages/index/category.vue View File

@ -1,181 +0,0 @@
<template>
<view class="page">
<navbar/>
<view class="category">
<uv-vtabs
:chain="chain"
:list="category"
height="1000px"
:barItemBadgeStyle="{right:'20px',top:'12px'}"
@change="change">
<uv-vtabs-item>
<view class="category-title">
租赁
</view>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')">
<view class="item-image">
<image
:src="item.image"
mode="aspectFill"></image>
</view>
<view class="item-unit">
<text class="text">{{item.unit}}</text>
</view>
</view>
</view>
</uv-vtabs-item>
</uv-vtabs>
</view>
<tabber select="1" />
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
export default {
components: {
tabber,
},
data() {
return {
category: [
{
name : '桌布'
},
{
name : '桌布'
},
{
name : '桌布'
},
],
list : [
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
{
unit : '100*50*60',
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
},
],
chain: false,
value: 0
}
},
computed: {
list2() {
const _list = this.list[this.value]?.childrens;
return _list ? _list : [];
}
},
onReady() {
},
methods: {
change(index) {
console.log('选项改变：', index)
this.value = index;
}
}
}
</script>
<style scoped lang="scss">
.category {
font-size: 30rpx;
color: #333;
min-height: 100vh;
.category-title{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 120rpx;
&::before,
&::after {
position: absolute;
top: 50%;
content: '';
width: 10%;
border-top: 2rpx solid black;
}
&::before {
left: 25%;
}
&::after {
right: 25%;
}
}
.list{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 490rpx;
.item {
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
.item-image {
width: 120rpx;
height: 120rpx;
image{
height: 100%;
width: 100%;
border-radius: 50%;
}
}
.item-unit {
font-size: 24rpx;
margin-top: 15rpx;
color: #555;
}
}
.gap {
padding: 0 30rpx;
}
}
}
</style>

+ 0
- 5
store/store.js View File

@ -9,14 +9,9 @@ import api from '@/api/api.js'
const store = new Vuex.Store({
state: {
configList: [], //配置列表
shop : false,
userInfo : {}, //用户信息
},
getters: {
// 角色 true为水洗店 false为酒店
userShop(state){
return state.shop
}
},
mutations: {
// 初始化配置


Write Preview
Loading…
Cancel
Save