整理框架完成
This commit is contained in:
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<layout @done="onLayout">
|
||||
<uv-empty :show="cart.totalNums === 0" mode="car" class="none"
|
||||
icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
|
||||
|
||||
|
||||
<block v-for="(item,index) in cart.shops" :key="index">
|
||||
<uni-card :border="false" :padding="0">
|
||||
<template v-slot:title>
|
||||
<view class="title-bar flex items-center">
|
||||
<uv-avatar :src="item.shopLogo" size="24"></uv-avatar>
|
||||
<view class="title ml-1">{{ item.shopName }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- <view class="preferential web-text-secondary">满2件总价9折，还差 1 件</view>-->
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff', marginBottom: '20px'}" :border="false">
|
||||
<uv-cell v-for="(cart,index2) in item.carts" :cellStyle="{padding: '12px 6px'}" :border="false">
|
||||
<template v-slot:icon>
|
||||
<uv-avatar v-if="cart.selected" src="https://oss.wsdns.cn/20240723/cc887e4a1cd749ebb5a1cfa2484c01f2.png"
|
||||
size="16" @click="onSelected(cart)"></uv-avatar>
|
||||
<uv-avatar v-else src="https://oss.wsdns.cn/20240723/2f9ae761ebb343fcbcaccd7441c88e20.png" size="16"
|
||||
@click="onSelected(cart)"></uv-avatar>
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
<view class="goods-title flex items-center w-full">
|
||||
<uv-image
|
||||
:src="cart.image"
|
||||
width="80" height="80" radius="5"/>
|
||||
<view class="goods-info flex w-full flex-col justify-between">
|
||||
<view class="goods-name">
|
||||
<uv-text :lines="1" bold :text="cart.goodsName"></uv-text>
|
||||
<uv-text v-if="cart.spec" class="py-2" type="info" :text="cart.spec" suffixIcon="arrow-down"
|
||||
:iconStyle="{marginLeft: '8px', fontSize: '10px'}" @click="openCarInfo"></uv-text>
|
||||
</view>
|
||||
<view class="goods-price flex justify-between">
|
||||
<view class="price text-red-500">￥{{ cart.price }}</view>
|
||||
<view class="tool-btn">
|
||||
<uv-number-box :min="0" :max="1000" v-model="cart.cartNum"
|
||||
@change="onAdultNum(cart,index)"></uv-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
</block>
|
||||
|
||||
<uv-gap height="100"></uv-gap>
|
||||
|
||||
<view class="cart-count w-full fixed flex bg-white justify-between items-center py-3"
|
||||
:style="'bottom: ' + bottom + 'px;'">
|
||||
<view class="flex flex-row items-center ml-15" @click="onSelectAll">
|
||||
<uv-avatar src="https://oss.wsdns.cn/20240723/2f9ae761ebb343fcbcaccd7441c88e20.png"
|
||||
v-if="cart.totalNums !== cart.selectNums"
|
||||
size="16"></uv-avatar>
|
||||
<uv-avatar src="https://oss.wsdns.cn/20240723/cc887e4a1cd749ebb5a1cfa2484c01f2.png" v-else
|
||||
size="16"></uv-avatar>
|
||||
<text class="ml-10 text-22">全选</text>
|
||||
<view class="text-22 flex flex-col text-red-500 ml-15 items-center"
|
||||
v-if="cart.totalNums === cart.selectNums" @click="onRemove">清空购物车
|
||||
</view>
|
||||
</view>
|
||||
<view class="price-bar flex flex-row items-center">
|
||||
<view class="total-price flex flex-col mr-20 items-center">
|
||||
<view class="text-right">
|
||||
<text class="web-text-heading text-22">合计：</text>
|
||||
<text class="text-22 web-text-danger">￥</text>
|
||||
<uv-count-to :startVal="0" decimals="2" duration="100" color="#ff0000" bold
|
||||
:endVal="cart.totalPrice"></uv-count-to>
|
||||
</view>
|
||||
<!-- <text class="text-red-500 text-22 text-right">已优惠￥0.00</text>-->
|
||||
</view>
|
||||
<view class="go-buy mr-15">
|
||||
<uv-button :text="`去结算(${cart?.selectNums ? cart.selectNums : 0})`"
|
||||
:customStyle="{background: 'linear-gradient(to right, #f5a4a4, #ff0000)',borderRadius: '30px',color: '#ffffff', padding: '0 30px'}"
|
||||
@click="save"></uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="popup" style="margin-bottom: 200px;">
|
||||
<uni-card :title="`规格`" extra="关闭" :border="false" :is-shadow="false" :padding="0" @click="closeCarInfo">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<block v-for="(item,index) in orderInfo" :key="index">
|
||||
<uv-cell :title="`${item.fieldName} ￥${item.price}`" :label="`${item.dateTime}`"
|
||||
:cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:right-icon>
|
||||
<uni-icons type="trash" size="20" color="#f76b4e" @click="remove(item)"></uni-icons>
|
||||
<text class="web-text-secondary" style="font-size: 24rpx;" @click="remove(item)">移除</text>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CartApi from '@/api/shop/cart';
|
||||
import * as OrderApi from '@/api/shop/order'
|
||||
import {
|
||||
getWeek
|
||||
} from '@/utils/common';
|
||||
import {
|
||||
storeToRefs
|
||||
} from 'pinia';
|
||||
import {useMpStore} from "@/store/modules/mp";
|
||||
import Layout from "@/components/layout.vue";
|
||||
import UniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
|
||||
import UvAvatar from "@/uni_modules/uv-avatar/components/uv-avatar/uv-avatar.vue";
|
||||
import UvCell from "@/uni_modules/uv-cell/components/uv-cell/uv-cell.vue";
|
||||
import UvImage from "@/uni_modules/uv-image/components/uv-image/uv-image.vue";
|
||||
import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
|
||||
import UvGap from "@/uni_modules/uv-gap/components/uv-gap/uv-gap.vue";
|
||||
import {useCartStore} from "@/store/modules/cart";
|
||||
|
||||
const mpStore = useMpStore();
|
||||
const cartStore = useCartStore();
|
||||
const {
|
||||
isNew
|
||||
} = storeToRefs(cartStore)
|
||||
|
||||
export default {
|
||||
components: {UvGap, UvButton, UvImage, UvCell, UvAvatar, UniCard, Layout},
|
||||
data() {
|
||||
return {
|
||||
// 购物车搜索条件
|
||||
where: {
|
||||
keywords: undefined,
|
||||
type: 0,
|
||||
limit: 100
|
||||
},
|
||||
index: 0,
|
||||
cart: {
|
||||
totalNums: 0,
|
||||
selectNums: undefined,
|
||||
totalPrice: undefined
|
||||
},
|
||||
shops: [],
|
||||
tabBar: null,
|
||||
safeAreaInsets: {},
|
||||
bottom: 0,
|
||||
isRefresh: false,
|
||||
isLogin: false,
|
||||
userId: 0,
|
||||
config: {},
|
||||
isNew,
|
||||
canReset: false,
|
||||
loadMore: 'more',
|
||||
logo: '',
|
||||
items: ['全部订单', '未支付', '已支付', '已完成', '押金'],
|
||||
orderList: [],
|
||||
styles: [{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
colors: ['#333333', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#108001',
|
||||
styleType: 'text',
|
||||
getWeek,
|
||||
// 骨架屏
|
||||
hideTools: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
onShow() {
|
||||
this.reload();
|
||||
},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this
|
||||
const {
|
||||
where
|
||||
} = this
|
||||
if (app.canReset) {
|
||||
app.where.page = ++where.page;
|
||||
app.reload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
const {where} = this
|
||||
|
||||
// 获取系统信息
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.safeAreaInsets = data.safeAreaInsets;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// #ifdef H5
|
||||
app.bottom = 0;
|
||||
// #endif
|
||||
|
||||
// 获取小程序信息包
|
||||
const info = await mpStore.fetchMpInfo();
|
||||
// 配置信息
|
||||
app.config = info.config
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
app.isLogin = true;
|
||||
}
|
||||
// uni.showLoading({
|
||||
// title: '数据读取中.'
|
||||
// })
|
||||
|
||||
app.loadMore = 'loading'
|
||||
|
||||
// 加载购物车数据
|
||||
CartApi.listCart(where).then(data => {
|
||||
if(data){
|
||||
app.cart = data
|
||||
}
|
||||
}).finally(() => {
|
||||
app.loadMore = 'more'
|
||||
uni.hideLoading()
|
||||
})
|
||||
|
||||
},
|
||||
onLayout({mpMenus}) {
|
||||
this.mpMenus = mpMenus;
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
onDone(index) {
|
||||
this.index = index
|
||||
const {path} = this.tabBar[index]
|
||||
uni.switchTab({url: path})
|
||||
},
|
||||
toPay(orderId) {
|
||||
uni.navigateTo({
|
||||
url: '/package/booking/confirm?id=' + orderId
|
||||
})
|
||||
},
|
||||
closeOrder(item) {
|
||||
uni.showModal({
|
||||
title: '确定取消此订单?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
OrderApi.updateOrder({
|
||||
orderStatus: 2,
|
||||
orderId: item.orderId
|
||||
}).then(msg => {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'none'
|
||||
})
|
||||
item.orderStatus = 2;
|
||||
}).catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 弹出登录提示框
|
||||
async openLogin() {
|
||||
// 当前租户信息
|
||||
const info = await mpStore.fetchMpInfo();
|
||||
// 配置信息
|
||||
this.config = info.config
|
||||
this.userId = uni.getStorageSync('user_id');
|
||||
if (!this.userId) {
|
||||
this.$refs.login.open('bottom')
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 申请开票
|
||||
onInvoice(id) {
|
||||
uni.navigateTo({
|
||||
url: '/package/user/invoice?id=' + id
|
||||
})
|
||||
},
|
||||
showInvoice(id) {
|
||||
uni.navigateTo({
|
||||
url: `/package/user/invoice-show?id=${id}`
|
||||
})
|
||||
},
|
||||
openCarInfo() {
|
||||
this.$refs.popup.open('bottom')
|
||||
},
|
||||
closeCarInfo() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
onAdultNum(cart) {
|
||||
const app = this
|
||||
CartApi.updateCart(cart).then(data => {
|
||||
if (cart.cartNum < 1) {
|
||||
uni.showModal({
|
||||
title: '确定要删除该商品吗?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
CartApi.removeCart(cart.id)
|
||||
app.shops = []
|
||||
app.reload()
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.reload()
|
||||
})
|
||||
},
|
||||
onShopSelected(merchantId) {
|
||||
CartApi.updateCartByMerchantId(merchantId)
|
||||
},
|
||||
onSelected(cart) {
|
||||
cart.selected = !cart.selected
|
||||
CartApi.updateCart(cart).then(data => {
|
||||
this.reload()
|
||||
})
|
||||
},
|
||||
onSelectAll() {
|
||||
const {selectNums, totalNums} = this.cart
|
||||
CartApi.onSelectAll(!(selectNums === totalNums)).then(res => {
|
||||
this.reload()
|
||||
});
|
||||
},
|
||||
onRemove() {
|
||||
const {shops} = this.cart
|
||||
CartApi.removeBatchCart(shops[0]?.carts?.map(d => d.id)).then(res => {
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success',
|
||||
})
|
||||
this.shops = []
|
||||
// 更新购物车角标
|
||||
uni.removeTabBarBadge({
|
||||
index: 2
|
||||
})
|
||||
});
|
||||
},
|
||||
save() {
|
||||
// if (this.shops.length === 0) {
|
||||
// return false
|
||||
// }
|
||||
uni.redirectTo({url: `/package/goods/checkout?selected=true&isNew=false`})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.admin-tools {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 0 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
|
||||
.preferential {
|
||||
margin-left: 52rpx;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
display: flex;
|
||||
margin-left: 8rpx;
|
||||
|
||||
.goods-info {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view class="waterfall">
|
||||
|
||||
<!-- 推荐美食 -->
|
||||
<ws-food :config="config" :foods="foods" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import * as GoodsApi from '@/api/shop/goods';
|
||||
import * as GoodsCategoryApi from '@/api/shop/goodsCategory';
|
||||
import {
|
||||
guid
|
||||
} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
|
||||
import {
|
||||
useTenantStore
|
||||
} from '@/store/modules/tenant';
|
||||
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goods: [],
|
||||
foods: [],
|
||||
config: {},
|
||||
industryName: '',
|
||||
goodsList: [], // 瀑布流全部数据
|
||||
list1: [], // 瀑布流第一列数据
|
||||
list2: [], // 瀑布流第二列数据
|
||||
goodsCategoryList: [], // 商品分类
|
||||
leftGap: 10,
|
||||
rightGap: 10,
|
||||
columnGap: 10,
|
||||
// 小程序导航图标
|
||||
navigation: [],
|
||||
// 骨架屏
|
||||
hideTools: true,
|
||||
// 商品分类
|
||||
categoryId: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
imageStyle(item) {
|
||||
return item => {
|
||||
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
|
||||
const w = v / 2;
|
||||
const rate = w / item.w;
|
||||
const h = rate * item.h;
|
||||
return {
|
||||
width: w + 'px',
|
||||
height: h + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async onLoad({name}) {
|
||||
this.industryName = name
|
||||
|
||||
// 获取服务租户信息包
|
||||
const info = await tenantStore.fetchTenantInfo();
|
||||
|
||||
// 请求数据
|
||||
this.reload()
|
||||
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
|
||||
// 获取服务租户信息包
|
||||
const info = await tenantStore.fetchTenantInfo();
|
||||
|
||||
app.config = info.config
|
||||
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
app.isLogin = true;
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.pageGoods(),app.getGoodsCategory(), app.getFoods()])
|
||||
.then((res) => {
|
||||
app.goodsList = res[0];
|
||||
app.goodsCategoryList = res[1];
|
||||
app.hideTools = false
|
||||
console.log(res)
|
||||
if(res[2]){
|
||||
app.foods = res[2]?.list;
|
||||
}
|
||||
})
|
||||
},
|
||||
getFoods(){
|
||||
const { industryName } = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.pageGoods({type: 1, industryName})
|
||||
.then((result) => {
|
||||
resolve(result);
|
||||
})
|
||||
.catch(reject);
|
||||
});
|
||||
},
|
||||
pageGoods() {
|
||||
const app = this
|
||||
const { categoryId } = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.pageGoods({parentId: categoryId})
|
||||
.then(result => {
|
||||
resolve(result.list)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
getGoodsCategory(){
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsCategoryApi.pageGoodsCategory({parentId: 0})
|
||||
.then(result => {
|
||||
resolve(result.list)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
navTo(item) {
|
||||
uni.navigateTo({
|
||||
url: '/package/goods/detail?id=' + item.goodsId
|
||||
})
|
||||
},
|
||||
onCategory(item){
|
||||
this.categoryId = item.categoryId
|
||||
this.goodsList = []
|
||||
this.list1 = []
|
||||
this.list2 = []
|
||||
this.reload()
|
||||
},
|
||||
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
|
||||
changeList(e) {
|
||||
console.log('e: ', e);
|
||||
this[e.name].push(e.value);
|
||||
},
|
||||
// 模拟的后端数据
|
||||
getData() {
|
||||
return new Promise((resolve) => {
|
||||
const imgs = [{
|
||||
url: 'https://via.placeholder.com/100x110.png/3c9cff/fff',
|
||||
width: 100,
|
||||
height: 110
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff',
|
||||
width: 200,
|
||||
height: 220
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/300x340.png/5ac725/fff',
|
||||
width: 300,
|
||||
height: 340
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/400x400.png/f56c6c/fff',
|
||||
width: 400,
|
||||
height: 400
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/500x510.png/909399/fff',
|
||||
width: 500,
|
||||
height: 510
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/600x606.png/3c9cff/fff',
|
||||
width: 600,
|
||||
height: 606
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/310x422.png/f1a532/fff',
|
||||
width: 310,
|
||||
height: 422
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/320x430.png/3c9cff/fff',
|
||||
width: 320,
|
||||
height: 430
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/330x424.png/f9ae3d/fff',
|
||||
width: 330,
|
||||
height: 424
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/340x435.png/5ac725/fff',
|
||||
width: 340,
|
||||
height: 435
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/350x440.png/f56c6c/fff',
|
||||
width: 350,
|
||||
height: 440
|
||||
},
|
||||
{
|
||||
url: 'https://via.placeholder.com/380x470.png/909399/fff',
|
||||
width: 380,
|
||||
height: 470
|
||||
}
|
||||
];
|
||||
let list = [];
|
||||
const doFn = (i) => {
|
||||
const randomIndex = Math.floor(Math.random() * 10);
|
||||
return {
|
||||
id: guid(),
|
||||
allowEdit: i == 0,
|
||||
image: imgs[randomIndex].url,
|
||||
w: imgs[randomIndex].width,
|
||||
h: imgs[randomIndex].height,
|
||||
title: i % 2 == 0 ? `(${this.list.length + i + 1})体验uv-ui框架` :
|
||||
`(${this.list.length + i +1})uv-ui支持多平台`,
|
||||
desc: i % 2 == 0 ? `(${this.list.length + i + 1})欢迎使用uv-ui，uni-app生态专用的UI框架` :
|
||||
`(${this.list.length + i})开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
|
||||
}
|
||||
};
|
||||
// 模拟异步
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
list.push(doFn(i));
|
||||
}
|
||||
resolve({
|
||||
data: list
|
||||
});
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
/* background: url('https://oss.wsdns.cn/20240505/eaa18a0271fa42aa8395bd5eb874808a.png') no-repeat; */
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
$show-lines: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
|
||||
.waterfall-item {
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
border-radius: 6px;
|
||||
|
||||
&__image {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.waterfall-item__ft {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
|
||||
&__title {
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 700;
|
||||
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
&__desc .value {
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-oreder {
|
||||
width: 720rpx;
|
||||
margin: 20rpx auto 8rpx auto;
|
||||
padding: 28rpx 0;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
|
||||
.web-cell-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.web-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+669
-480
File diff suppressed because it is too large
Load Diff
+539
-326
@@ -1,357 +1,570 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="goods-info">
|
||||
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="750rpx" radius="0"></uv-swiper>
|
||||
</view>
|
||||
<!-- <view class="merchant-name">{{ form.merchantName }}</view> -->
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<uv-cell :cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:title>
|
||||
<view class="pirce-bar" style="display: flex;">
|
||||
<view class="web-text-danger">￥</view>
|
||||
<view class="web-text-danger" style="font-size: 40rpx;">{{ form.price }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<text class="web-text-secondary" style="text-decoration: line-through">划线价￥{{ form.price*2 }}</text>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :title="form.goodsName" label="商品名称" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<uv-cell title="选择款式" :label="`100zz【藏青色】、100zz【古红色】`" isLink
|
||||
:cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:right-icon>
|
||||
<!-- <uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000;"></uv-icon> -->
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="参数" :label="form.goodsName" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<uv-cell title="客服电话" label="0771-8888888" :border="false" :cellStyle="{padding: '10px 5px'}"
|
||||
@click="callPhone('0771-8888888')">
|
||||
<view class="">
|
||||
<view class="goods-info">
|
||||
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="750rpx" radius="0"></uv-swiper>
|
||||
</view>
|
||||
<!-- <view class="merchant-name">{{ form.merchantName }}</view> -->
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<uv-cell :cellStyle="{padding: '10px 5px'}">
|
||||
<template v-slot:title>
|
||||
<view class="pirce-bar" style="display: flex;">
|
||||
<view class="web-text-danger">￥</view>
|
||||
<view class="web-text-danger" style="font-size: 40rpx;">{{ form.price }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<text class="web-text-secondary" style="text-decoration: line-through">划线价￥{{ form.price * 2 }}</text>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :title="form.goodsName" label="商品名称" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<!-- <uv-cell title="选择款式" :label="`100zz【藏青色】、100zz【古红色】`" isLink-->
|
||||
<!-- :cellStyle="{padding: '10px 5px'}">-->
|
||||
<!-- </uv-cell>-->
|
||||
<uv-cell title="参数" :label="form.goodsName" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<uv-cell title="客服电话" label="0771-8888888" :border="false" :cellStyle="{padding: '10px 5px'}"
|
||||
@click="callPhone('0771-8888888')">
|
||||
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
|
||||
<uni-card title="商品详情" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="web-text-heading booking-content">
|
||||
<view v-html="form.content"></view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="商品详情" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="web-text-heading booking-content">
|
||||
<view v-html="form.content"></view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
||||
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link"
|
||||
@click.stop="navTo('/package/article/detail?articleId=503')">《购买协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- {{ goodsList }}-->
|
||||
|
||||
<uv-gap height="50"></uv-gap>
|
||||
<view class="save-btn">
|
||||
<uv-button
|
||||
:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
||||
text="立即购买" @click="save"></uv-button>
|
||||
</view>
|
||||
<!-- <view class="goods-nav-btn">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
|
||||
@buttonClick="buttonClick" />
|
||||
</view> -->
|
||||
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uv-avatar src="https://oss.wsdns.cn/20240723/2f9ae761ebb343fcbcaccd7441c88e20.png" size="20" v-if="!disabled"
|
||||
@click="onDisabled"></uv-avatar>
|
||||
<uv-avatar src="https://oss.wsdns.cn/20240723/cc887e4a1cd749ebb5a1cfa2484c01f2.png" size="20" v-else
|
||||
@click="onDisabled"></uv-avatar>
|
||||
<!-- <uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>-->
|
||||
<!-- <uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>-->
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link"
|
||||
@click.stop="navTo('/package/article/detail?articleId=503')">《购买协议》
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uv-gap height="50"></uv-gap>
|
||||
<!-- <view class="save-btn">-->
|
||||
<!-- <uv-button-->
|
||||
<!-- :customStyle="{background: 'linear-gradient(to right, #f5a4a4, #ff0000)',borderRadius: '30px',color: '#ff6e0c'}"-->
|
||||
<!-- text="立即购买" @click="save"></uv-button>-->
|
||||
<!-- </view>-->
|
||||
<view class="goods-nav-btn">
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
|
||||
@buttonClick="save"/>
|
||||
<uv-gap :height="safeAreaInsets.bottom"/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 活动订场弹窗 -->
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="popup-booking-tel">
|
||||
<text class="title">场馆热线</text>
|
||||
<text class="desc">主体育场、足球训练场：0771-4953380</text>
|
||||
<text class="desc">体育馆、综合训练馆、网球馆：0771-4953380</text>
|
||||
<text class="desc">游泳跳水馆：0771-4736008</text>
|
||||
</view>
|
||||
|
||||
<text class="title">参观接待</text>
|
||||
<text class="desc">预约电话：0771-4736955</text>
|
||||
<text class="desc">传真号码：0771-4736955</text>
|
||||
|
||||
<text class="title">大型活动订场</text>
|
||||
<text class="desc">预约电话：0771-4736970、0771-4736994</text>
|
||||
<!-- 选择规格弹窗 -->
|
||||
<uni-popup ref="specForm" type="center" border-radius="10px 10px 0 0">
|
||||
<uni-card :title="form.goodsName" :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="spec-card" style="width: 660rpx;">
|
||||
<block v-if="form.goodsSpecValue">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(item, index) in form.goodsSpecValue" :key="index">
|
||||
<uv-cell :title="item.value" :cellStyle="{ padding: '10px 0' }" :label="item.address">
|
||||
<template v-slot:label>
|
||||
<view class="tags flex mt-10">
|
||||
<view class="tag mr-15" v-for="value in item.detail">
|
||||
<uv-tags :text="value" v-if="onPlain(value)" plain border-color="#eeeeee" color="#808080"
|
||||
@click="onTag(value,index)"></uv-tags>
|
||||
<uv-tags :text="value" v-else plain color="#ff0000" border-color="#ff0000"
|
||||
@click="onTag(value,index)"></uv-tags>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
<uv-cell :cellStyle="{ padding: '40px 0' }">
|
||||
|
||||
<text class="title">威拓普健身馆</text>
|
||||
<text class="desc">联系电话：0771-5588699</text>
|
||||
</view>
|
||||
<view class="web-cell popup-close" @click="closeBookingTel">
|
||||
<uv-icon name="close-circle" color="#ffffff" size="30"></uv-icon>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</uv-cell>
|
||||
<uv-cell :cellStyle="{ padding: '10px 0', backgroundColor: '#f3f3f3' }">
|
||||
<template v-slot:label>
|
||||
<view class="web-text-secondary">
|
||||
已选规格：{{ skuText }}
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
<view class="flex m-20 justify-between items-center">
|
||||
<view class="total-price web-text-heading">
|
||||
总计{{ isNew }}
|
||||
<text class="text-red-500" style="font-weight: 500; font-size: 36rpx">￥{{ form.price }}</text>
|
||||
</view>
|
||||
<view class="add-cart">
|
||||
<uv-button type="warning" class="add-address" iconSize="16" :customStyle="{ borderRadius: '6px', padding: '5px 20px',
|
||||
backgroundColor: '#ff0000', color: '#ffffff', fontWeight: 'bold' }" :text="isNew ? '立即购买' : '加入购物车'"
|
||||
@click="gotoBuy"></uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
<!-- 活动订场弹窗 -->
|
||||
<!-- <uni-popup ref="popup" type="center">-->
|
||||
<!-- <view class="popup-booking-tel">-->
|
||||
<!-- <text class="title">场馆热线</text>-->
|
||||
<!-- <text class="desc">主体育场、足球训练场：0771-4953380</text>-->
|
||||
<!-- <text class="desc">体育馆、综合训练馆、网球馆：0771-4953380</text>-->
|
||||
<!-- <text class="desc">游泳跳水馆：0771-4736008</text>-->
|
||||
|
||||
<!-- <text class="title">参观接待</text>-->
|
||||
<!-- <text class="desc">预约电话：0771-4736955</text>-->
|
||||
<!-- <text class="desc">传真号码：0771-4736955</text>-->
|
||||
|
||||
<!-- <text class="title">大型活动订场</text>-->
|
||||
<!-- <text class="desc">预约电话：0771-4736970、0771-4736994</text>-->
|
||||
|
||||
<!-- <text class="title">威拓普健身馆</text>-->
|
||||
<!-- <text class="desc">联系电话：0771-5588699</text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="web-cell popup-close" @click="closeBookingTel">-->
|
||||
<!-- <uv-icon name="close-circle" color="#ffffff" size="30"></uv-icon>-->
|
||||
<!-- </view>-->
|
||||
<!-- </uni-popup>-->
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" @done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
storeToRefs
|
||||
} from 'pinia';
|
||||
import * as GoodsApi from '@/api/shop/goods';
|
||||
import {
|
||||
useCarStore
|
||||
} from '@/store/modules/car';
|
||||
const carStore = useCarStore();
|
||||
const {
|
||||
goodsList,
|
||||
orderInfo,
|
||||
totalPrice,
|
||||
carNum,
|
||||
merchantId,
|
||||
merchantName,
|
||||
merchantCode,
|
||||
type,
|
||||
dateTime
|
||||
} = storeToRefs(carStore)
|
||||
import {
|
||||
storeToRefs
|
||||
} from 'pinia';
|
||||
import * as GoodsApi from '@/api/shop/goods';
|
||||
import * as CartApi from '@/api/shop/cart';
|
||||
import {
|
||||
useCartStore
|
||||
} from '@/store/modules/cart';
|
||||
import UvAvatar from "@/uni_modules/uv-avatar/components/uv-avatar/uv-avatar.vue";
|
||||
import UvGap from "@/uni_modules/uv-gap/components/uv-gap/uv-gap.vue";
|
||||
import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
form: {},
|
||||
// 场馆相册
|
||||
photo: [],
|
||||
isLogin: false,
|
||||
disabled: true,
|
||||
orderInfo,
|
||||
goodsList,
|
||||
totalPrice,
|
||||
carNum,
|
||||
merchantId,
|
||||
merchantName,
|
||||
merchantCode,
|
||||
type,
|
||||
dateTime,
|
||||
options: [{
|
||||
icon: 'headphones',
|
||||
text: '客服'
|
||||
}, {
|
||||
icon: 'cart',
|
||||
text: '购物车',
|
||||
info: 2
|
||||
}],
|
||||
buttonGroup: [
|
||||
{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
customButtonGroup1: [{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
|
||||
color: '#fff'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
this.isLogin = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
const cartStore = useCartStore();
|
||||
const {
|
||||
goodsList,
|
||||
orderInfo,
|
||||
totalPrice,
|
||||
carNum,
|
||||
merchantId,
|
||||
merchantName,
|
||||
merchantCode,
|
||||
type,
|
||||
dateTime,
|
||||
isNew,
|
||||
isLogin
|
||||
} = storeToRefs(cartStore)
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.getGoods()]).then(data => {
|
||||
console.log('data: ', data);
|
||||
const form = data[0]
|
||||
app.form = form;
|
||||
carStore.merchantId = form.merchantId
|
||||
carStore.merchantName = form.merchantName
|
||||
carStore.merchantCode = form.merchantCode
|
||||
export default {
|
||||
components: {UvButton, UvGap, UvAvatar},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
form: {},
|
||||
// 场馆相册
|
||||
photo: [],
|
||||
cart: {},
|
||||
safeAreaInsets: {},
|
||||
isLogin: false,
|
||||
disabled: true,
|
||||
specForm: false,
|
||||
sku: [],
|
||||
skuText: '',
|
||||
orderInfo,
|
||||
goodsList,
|
||||
totalPrice,
|
||||
carNum,
|
||||
merchantId,
|
||||
merchantName,
|
||||
merchantCode,
|
||||
type,
|
||||
isNew,
|
||||
dateTime,
|
||||
options: [{
|
||||
icon: 'server-fill',
|
||||
text: '客服'
|
||||
}, {
|
||||
icon: 'bag',
|
||||
text: '购物车',
|
||||
info: 0
|
||||
}],
|
||||
buttonGroup: [
|
||||
{
|
||||
text: '加入购物车',
|
||||
backgroundColor: 'linear-gradient(to right, #ffc940, #ff6e0c)',
|
||||
color: '#fff'
|
||||
}, {
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #ff0000, #ff6767)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
customButtonGroup1: [{
|
||||
text: '立即购买',
|
||||
backgroundColor: 'linear-gradient(90deg, #ccff66, #008e04)',
|
||||
color: '#fff'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
this.isLogin = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
// 获取系统信息
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.safeAreaInsets = data.safeAreaInsets;
|
||||
app.statusBarHeight = data.statusBarHeight + 50;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: form.goodsName
|
||||
})
|
||||
// 加载场馆相册
|
||||
if (form.files) {
|
||||
app.photo = JSON.parse(form.files)
|
||||
}
|
||||
})
|
||||
},
|
||||
getGoods() {
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.getGoods(this.id).then(result => {
|
||||
resolve(result)
|
||||
}).catch(reject)
|
||||
})
|
||||
},
|
||||
onDisabled() {
|
||||
this.disabled = !this.disabled;
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
openBookingTel() {
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('center')
|
||||
},
|
||||
closeBookingTel() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
onMap() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function(res) {
|
||||
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
||||
const latitude = this.merchant.latitude;
|
||||
const longitude = this.merchant.longitude;
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
success: function() {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意订票协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const app = this
|
||||
const { form } = this
|
||||
carStore.totalPrice = form.price
|
||||
app.goodsList = []
|
||||
form.image = JSON.parse(form.image)[0]
|
||||
app.goodsList.push(form)
|
||||
carStore.goodsList = app.goodsList
|
||||
|
||||
// 跳转页面
|
||||
uni.navigateTo({
|
||||
url: '/package/goods/checkout?goodsId=' + this.id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// 请求数据
|
||||
Promise.all([app.getGoods(), app.listCart()]).then(data => {
|
||||
const form = data[0]
|
||||
form.content = this.formatRichText(form.content)
|
||||
app.form = form;
|
||||
cartStore.merchantId = form.merchantId
|
||||
cartStore.merchantName = form.merchantName
|
||||
cartStore.merchantCode = form.merchantCode
|
||||
|
||||
// 修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: form.goodsName
|
||||
})
|
||||
// 加载场馆相册
|
||||
if (form.files) {
|
||||
app.photo = JSON.parse(form.files)
|
||||
}
|
||||
|
||||
// 购物车信息
|
||||
app.cart = data[1]
|
||||
console.log(app.cart.totalNums)
|
||||
// 更新购物车角标
|
||||
if(app.cart?.totalNums){
|
||||
app.options[1].info = app.cart.totalNums
|
||||
}
|
||||
})
|
||||
},
|
||||
getGoods() {
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.getGoods(this.id).then(result => {
|
||||
resolve(result)
|
||||
}).catch(reject)
|
||||
})
|
||||
},
|
||||
listCart() {
|
||||
return new Promise((resolve, reject) => {
|
||||
CartApi.listCart().then(result => {
|
||||
resolve(result)
|
||||
}).catch(reject)
|
||||
})
|
||||
},
|
||||
onDisabled() {
|
||||
this.disabled = !this.disabled;
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
onPlain(text) {
|
||||
const index = this.sku.findIndex(d => d === text)
|
||||
return index < 0;
|
||||
},
|
||||
onTag(text, index) {
|
||||
const app = this
|
||||
const parent = this.sku.findIndex(d => d === text)
|
||||
if (parent < 0) {
|
||||
app.sku.push(text)
|
||||
app.skuText = app.sku.join('、')
|
||||
}
|
||||
},
|
||||
// openBookingTel() {
|
||||
// // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
// this.$refs.popup.open('center')
|
||||
// },
|
||||
// closeBookingTel() {
|
||||
// this.$refs.popup.close()
|
||||
// },
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
onMap() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function (res) {
|
||||
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
||||
const latitude = this.merchant.latitude;
|
||||
const longitude = this.merchant.longitude;
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
formatRichText(html) {
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||||
'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||
return newContent;
|
||||
},
|
||||
onClick({index, content}) {
|
||||
console.log(index, content)
|
||||
// 客服按钮
|
||||
if (index === 0) {
|
||||
uni.contact({
|
||||
type: 'updateCustomerService',
|
||||
success: function () {
|
||||
console.log('客服会话打开成功');
|
||||
},
|
||||
fail: function (err) {
|
||||
console.error('客服会话打开失败:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 前往购物车
|
||||
if (index === 1) {
|
||||
uni.navigateTo({url: `/package/cart/index`})
|
||||
}
|
||||
},
|
||||
save({index, content}) {
|
||||
const app = this
|
||||
const {form} = this
|
||||
if (!app.isLogin && !cartStore.isLogin) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意订票协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
// 加入购物车
|
||||
if (index === 0) {
|
||||
form.cartNum = 1;
|
||||
form.isNew = false;
|
||||
cartStore.isNew = false;
|
||||
// 单规格
|
||||
if (form.specs === 0) {
|
||||
CartApi.addCart(form).then(data => {
|
||||
app.reload()
|
||||
uni.showToast({
|
||||
title: '添加成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}).catch(res => {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
return false
|
||||
}
|
||||
// 多规格
|
||||
if (form.specs === 1) {
|
||||
this.$refs.specForm.open('center');
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
// 立即购买
|
||||
if (index === 1) {
|
||||
form.cartNum = 1;
|
||||
form.isNew = true;
|
||||
cartStore.isNew = true;
|
||||
// 多规格
|
||||
if (form.specs === 1) {
|
||||
form.spec = app.skuText;
|
||||
this.$refs.specForm.open('center');
|
||||
return false;
|
||||
}
|
||||
CartApi.addCart(form).then(cartId => {
|
||||
// 跳转页面
|
||||
uni.navigateTo({
|
||||
url: `/package/goods/checkout?id=${cartId}`
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
gotoBuy() {
|
||||
const app = this
|
||||
this.disabled = !this.disabled;
|
||||
CartApi.addCart({
|
||||
...app.form,
|
||||
spec: app.skuText,
|
||||
cartNum: 1,
|
||||
isNew: app.isNew
|
||||
}).then(data => {
|
||||
app.options[1].info = data.totalNums
|
||||
if (app.isNew) {
|
||||
// CartApi.removeCart(data.id)
|
||||
// 跳转页面
|
||||
uni.navigateTo({
|
||||
url: `/package/goods/checkout?id=${data.id}`
|
||||
})
|
||||
}else {
|
||||
|
||||
}
|
||||
})
|
||||
this.$refs.specForm.close();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
//color: #ff6e0c;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
.container {
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.goods-info {
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
padding: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 42rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.merchant-name {
|
||||
padding: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 42rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
.save-btn {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
|
||||
.booking-tel {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 270px;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
background: linear-gradient(to right, #ccff66, #008e04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.booking-tel {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 270px;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
background: linear-gradient(to right, #f5a4a4, #008e04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.popup-booking-tel {
|
||||
background-color: #ffffff;
|
||||
width: 560rpx;
|
||||
min-height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.popup-booking-tel {
|
||||
background-color: #ffffff;
|
||||
width: 560rpx;
|
||||
min-height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.popup-close {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.booking-content {
|
||||
padding: 10px;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.booking-content {
|
||||
padding: 10px;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
margin-bottom: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
.xieyi {
|
||||
margin-bottom: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.text {
|
||||
margin-left: 5rpx;
|
||||
.text {
|
||||
margin-left: 5rpx;
|
||||
|
||||
.link {
|
||||
color: #0f80ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-nav-btn {
|
||||
width: 750rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
.link {
|
||||
color: #0f80ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-nav-btn {
|
||||
width: 750rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<view class="order" v-if="form.orderId">
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="order-body web-cell web-cell-align-top">
|
||||
<view class="web-cell-content">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<!-- <uv-cell :title="`${form.merchantName}`" :label="` `" :cellStyle="{ padding: '0', paddingBottom: '5px' }" :border="false" />-->
|
||||
<block v-for="(item, index) in form.goodsList" :key="index">
|
||||
<uv-cell
|
||||
:cellStyle="{ padding: '0', paddingBottom: '5px' }"
|
||||
:border="false"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<uv-image :src="item.image" width="100" height="100" />
|
||||
</template>
|
||||
<template v-slot:title>
|
||||
<view class="goods-info flex flex-col">
|
||||
<view class="flex">
|
||||
<uv-text lines="2" bold :text="item.goodsName"></uv-text>
|
||||
<text>￥{{ item.price }}</text>
|
||||
</view>
|
||||
<view class="web-text-secondary">
|
||||
{{ item.comments }}
|
||||
</view>
|
||||
<view class="tools flex justify-between web-text-secondary items-center">
|
||||
<text></text>
|
||||
<text>x {{ item.totalNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
|
||||
<uv-cell :label="`成人票 ￥50`" :value="`x ${item.adultNum}`" v-if="item.isChildren" :cellStyle="{ padding: '0', paddingBottom: '5px' }" :border="false" />
|
||||
<uv-cell :label="`儿童票 ￥35`" :value="`x ${item.childrenNum}`" v-if="item.isChildren" :cellStyle="{ padding: '0', paddingBottom: '5px' }" :border="false" />
|
||||
</block>
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="web-text-heading">合计：￥{{ form.totalPrice }}</view>
|
||||
<view class="web-text-danger">实付：￥{{ form.payPrice }}</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<block v-if="form.orderNo">
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<view class="web-cell web-cell-align-top">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff', padding: '8px 0' }" :border="false">
|
||||
<uv-cell :title="`姓名`" :value="`${form.realName}`" :cellStyle="{ padding: '8px' }" />
|
||||
<uv-cell :title="`手机号码`" :value="`${form.phone}`" :cellStyle="{ padding: '8px' }" />
|
||||
<uv-cell :title="`订单号`" :value="`${form.orderId}`" :cellStyle="{ padding: '8px' }" />
|
||||
<uv-cell :title="`订单编号`" :cellStyle="{ padding: '8px' }">
|
||||
<template v-slot:value>
|
||||
<uv-parse :content="form.orderNo" :selectable="true"></uv-parse>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :title="`订单状态`" :cellStyle="{ padding: '8px' }">
|
||||
<template v-slot:value>
|
||||
<view v-if="form.payStatus == 0">
|
||||
<!-- <uv-count-down :time="form.timestamp" format="mm:ss"></uv-count-down> -->
|
||||
<span style="color: #ff0000">未支付</span>
|
||||
</view>
|
||||
<view v-else>{{ orderStatus[form.orderStatus] }}</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell :title="`下单时间`" :value="`${form.createTime}`" :cellStyle="{ padding: '8px' }" />
|
||||
<uv-cell :title="`支付方式`" :value="`${payType[form.payType]}`" :cellStyle="{ padding: '8px' }" />
|
||||
<uv-cell :title="`优惠说明`" :value="`${form.couponDesc ? form.couponDesc : '无'}`" :cellStyle="{ padding: '8px' }" :border="false" />
|
||||
</uv-cell-group>
|
||||
</view>
|
||||
</uni-card>
|
||||
</block>
|
||||
<uv-gap height="20"></uv-gap>
|
||||
<view class="checkout-car" v-if="form.payStatus == 0">
|
||||
<view class="car-total">
|
||||
<text style="color: #ebcf00">￥</text>
|
||||
<uv-count-to decimals="2" duration="30" color="#ebcf00" bold :endVal="form.payPrice"></uv-count-to>
|
||||
</view>
|
||||
<uv-button
|
||||
class="save-btn"
|
||||
:customStyle="{ background: 'linear-gradient(to right, #70b915, #008e04)', borderRadius: '0 30px 30px 0', color: '#ffffff', border: 'none', padding: '22px 30px' }"
|
||||
text="去支付"
|
||||
@click="navTo(`/package/booking/confirm?id=${form.orderId}`)"
|
||||
></uv-button>
|
||||
</view>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" @done="reload" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as OrderApi from '@/api/shop/order';
|
||||
import { pageWechatDeposit } from '@/api/shop/wechatDeposit';
|
||||
import UvAvatar from "@/uni_modules/uv-avatar/components/uv-avatar/uv-avatar.vue";
|
||||
import UvImage from "@/uni_modules/uv-image/components/uv-image/uv-image.vue";
|
||||
|
||||
export default {
|
||||
components: {UvImage, UvAvatar},
|
||||
data() {
|
||||
return {
|
||||
isLogin: false,
|
||||
orderId: 0,
|
||||
userId: 0,
|
||||
form: {},
|
||||
where: {
|
||||
page: 1
|
||||
},
|
||||
canReset: false,
|
||||
loadMore: 'more',
|
||||
logo: '',
|
||||
items: ['全部订单', '未支付', '已支付', '已完成', '押金'],
|
||||
orderStatus: ['已支付', '已完成', '已取消', '取消中', '退款申请中', '退款被拒绝', '退款成功', '客户端申请退款'],
|
||||
payType: [
|
||||
'余额支付',
|
||||
'微信支付',
|
||||
'会员卡支付',
|
||||
'支付宝',
|
||||
'现金',
|
||||
'POS机',
|
||||
'VIP月卡',
|
||||
'VIP年卡',
|
||||
'VIP次卡',
|
||||
'IC月卡',
|
||||
'IC年卡',
|
||||
'IC次卡',
|
||||
'免费',
|
||||
'VIP充值卡',
|
||||
'IC充值卡',
|
||||
'积分支付',
|
||||
'VIP季卡',
|
||||
'IC季卡'
|
||||
],
|
||||
orderList: [],
|
||||
styles: [
|
||||
{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
h5_url: '',
|
||||
colors: ['#333333', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#108001',
|
||||
styleType: 'text'
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.orderId = option.id;
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
// 加载数据
|
||||
this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this;
|
||||
const { where } = this;
|
||||
if (app.canReset) {
|
||||
app.where.page = ++where.page;
|
||||
app.reload();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
const app = this;
|
||||
const { where, userId, orderId } = this;
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
where.userId = userId;
|
||||
uni.showLoading({
|
||||
title: '数据读取中.'
|
||||
});
|
||||
OrderApi.getOrder(orderId).then((data) => {
|
||||
console.log('data: ', data);
|
||||
app.form = data;
|
||||
|
||||
// 页面标题
|
||||
if (data.orderStatus == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '订单详情（已完成）'
|
||||
});
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
|
||||
// H5版网址
|
||||
const h5_url = uni.getStorageSync('h5_url');
|
||||
const tid = uni.getStorageSync('TenantId');
|
||||
if (h5_url) {
|
||||
app.h5_url = h5_url;
|
||||
} else {
|
||||
app.h5_url = `http://${tid}.h5.wsdns.cn`;
|
||||
}
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
onClickItem(e) {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
const index = e.currentIndex;
|
||||
if (this.current !== e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
// 全部
|
||||
if (index == 0) {
|
||||
where.payStatus = undefined;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 未支付
|
||||
if (index == 1) {
|
||||
where.payStatus = 2;
|
||||
}
|
||||
// 已支付
|
||||
if (index == 2) {
|
||||
where.payStatus = 1;
|
||||
}
|
||||
// 已完成
|
||||
if (index == 3) {
|
||||
where.orderStatus = 1;
|
||||
}
|
||||
// 押金
|
||||
if (index == 4) {
|
||||
pageWechatDeposit({
|
||||
uid: uni.getStorageSync('user_id')
|
||||
}).then((res) => {
|
||||
console.log('res: ', res);
|
||||
app.orderList = res.list;
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.reload();
|
||||
},
|
||||
// 弹出登录提示框
|
||||
async openLogin() {
|
||||
this.userId = uni.getStorageSync('user_id');
|
||||
if (!this.userId) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.uni-list {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order {
|
||||
.order-title {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
|
||||
.merchant-avatar {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
// padding-left: 12rpx;
|
||||
}
|
||||
|
||||
.btn-status {
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.order-body {
|
||||
padding: 16px 0;
|
||||
.goods-info{
|
||||
margin-left: 8rpx;
|
||||
.goods-name{
|
||||
font-weight: 500;
|
||||
}
|
||||
.goods-desc{
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
.goods-image{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
|
||||
.web-text-heading {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.web-text-danger {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.btn-status {
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.close {
|
||||
top: 60rpx !important;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
margin-top: 30rpx;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkout-car {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #000000;
|
||||
border-radius: 100px;
|
||||
align-items: center;
|
||||
|
||||
.car-selected {
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.car-total {
|
||||
display: flex;
|
||||
color: #ebcf00;
|
||||
align-items: center;
|
||||
padding-left: 40rpx;
|
||||
|
||||
.save-btn {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+353
-353
@@ -1,99 +1,99 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="segmented">
|
||||
<uni-segmented-control :current="current" :values="items" :styleType="styleType" :activeColor="activeColor" inActiveColor="#808080" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="order">
|
||||
<block v-if="orderList.length > 0">
|
||||
<block v-for="(item, index) in orderList" :key="index">
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<template v-slot:title>
|
||||
<div class="order-title web-cell">
|
||||
<view class="web-cell web-cell-content">
|
||||
<view class="merchant-avatar">
|
||||
<uv-avatar :src="item.merchantAvatar" size="24"></uv-avatar>
|
||||
</view>
|
||||
<text class="merchant-name">{{ item.merchantName }}</text>
|
||||
</view>
|
||||
<block v-if="item.orderStatus == 2">
|
||||
<text class="btn-status web-text-secondary">已取消</text>
|
||||
</block>
|
||||
<block v-else-if="item.orderStatus == 1">
|
||||
<text class="btn-status web-text-success">已完成</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text v-if="item.payStatus == 1" class="btn-status web-text-success">已支付</text>
|
||||
<view v-if="item.payStatus == 0" class="btn-status web-text-danger">
|
||||
<uv-count-down :time="item.timestamp" format="mm:ss"></uv-count-down>
|
||||
<text class="no-pay" style="margin-left: 10rpx">未支付</text>
|
||||
</view>
|
||||
</block>
|
||||
</div>
|
||||
</template>
|
||||
<view class="order-body web-cell web-cell-align-top">
|
||||
<view class="web-cell-content">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(sub, subIndex) in item.goodsList" :key="subIndex">
|
||||
<uv-cell
|
||||
:title="`${sub.goodsName}`"
|
||||
:label="`${sub.comments}`"
|
||||
:cellStyle="{ padding: '0', paddingBottom: '5px' }"
|
||||
:border="false"
|
||||
@click="openUrl(`/package/order/detail?id=${item.orderId}`)"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<uv-avatar :src="sub.image" fontSize="12" size="50" shape="square"></uv-avatar>
|
||||
</template>
|
||||
<template v-slot:value>
|
||||
<view class="goods-price-bar">
|
||||
<view class="goods-price web-text-heading">￥{{sub.price}}</view>
|
||||
<view class="total-num web-text-secondary" style="font-size: 13px;letter-spacing: 1px;">共{{ item.totalNum }}件</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
</uv-cell-group>
|
||||
<!-- <view class="total-price">
|
||||
<view class="web-text-heading">合计：￥{{ item.totalPrice }}</view>
|
||||
<view class="web-text-heading" style="font-weight: 500">实付：￥{{ item.totalPrice - item.reducePrice }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" v-if="item.payStatus == 0 && item.orderStatus == 0">
|
||||
<button class="mini-btn" size="mini" @click="closeOrder(item)" style="margin-right: 20rpx">取消订单</button>
|
||||
<button class="mini-btn" type="primary" size="mini" @click="toPay(item.orderId)">去支付</button>
|
||||
</view>
|
||||
<view class="card-actions-item" v-if="item.payStatus == 1 && item.isInvoice == 0" @click="onInvoice(item.orderId)">
|
||||
<button class="mini-btn" size="mini">申请开票</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</block>
|
||||
</block>
|
||||
<block v-if="orderList.length == 0 && loadMore != 'no-more'">
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
</block>
|
||||
<uni-load-more v-if="orderList.length > 0" :status="loadMore"></uni-load-more>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="segmented">
|
||||
<uni-segmented-control :current="current" :values="items" :styleType="styleType" :activeColor="activeColor" inActiveColor="#ff0000" @clickItem="onClickItem" />
|
||||
</view>
|
||||
<view class="order">
|
||||
<block v-if="orderList.length > 0">
|
||||
<block v-for="(item, index) in orderList" :key="index">
|
||||
<uni-card :border="false" :is-shadow="false" :padding="0">
|
||||
<template v-slot:title>
|
||||
<div class="order-title web-cell">
|
||||
<view class="web-cell web-cell-content">
|
||||
<view class="merchant-avatar">
|
||||
<uv-avatar :src="item.merchantAvatar" size="24"></uv-avatar>
|
||||
</view>
|
||||
<text class="merchant-name">{{ item.merchantName }}</text>
|
||||
</view>
|
||||
<block v-if="item.orderStatus == 2">
|
||||
<text class="btn-status web-text-secondary">已取消</text>
|
||||
</block>
|
||||
<block v-else-if="item.orderStatus == 1">
|
||||
<text class="btn-status web-text-success">已完成</text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<text v-if="item.payStatus == 1" class="btn-status web-text-success">已支付</text>
|
||||
<view v-if="item.payStatus == 0" class="btn-status web-text-danger">
|
||||
<!-- <uv-count-down :time="item.timestamp" format="mm:ss"></uv-count-down>-->
|
||||
<text class="no-pay" style="margin-left: 10rpx">未支付</text>
|
||||
</view>
|
||||
</block>
|
||||
</div>
|
||||
</template>
|
||||
<view class="order-body web-cell web-cell-align-top">
|
||||
<view class="web-cell-content">
|
||||
<uv-cell-group :customStyle="{ backgroundColor: '#ffffff' }" :border="false">
|
||||
<block v-for="(sub, subIndex) in item.goodsList" :key="subIndex">
|
||||
<uv-cell
|
||||
:title="`${sub.goodsName}`"
|
||||
:label="`${sub.comments}`"
|
||||
:cellStyle="{ padding: '0', paddingBottom: '5px' }"
|
||||
:border="false"
|
||||
@click="openUrl(`/package/goods/order-detail?id=${item.orderId}`)"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<uv-avatar :src="sub.image" fontSize="12" size="50" shape="square"></uv-avatar>
|
||||
</template>
|
||||
<template v-slot:value>
|
||||
<view class="goods-price-bar">
|
||||
<view class="goods-price web-text-heading">￥{{sub.price}}</view>
|
||||
<view class="total-num web-text-secondary" style="font-size: 13px;letter-spacing: 1px;">共{{ item.totalNum }}件</view>
|
||||
</view>
|
||||
</template>
|
||||
</uv-cell>
|
||||
</block>
|
||||
</uv-cell-group>
|
||||
<!-- <view class="total-price">
|
||||
<view class="web-text-heading">合计：￥{{ item.totalPrice }}</view>
|
||||
<view class="web-text-heading" style="font-weight: 500">实付：￥{{ item.totalPrice - item.reducePrice }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view slot="actions" class="card-actions">
|
||||
<view class="card-actions-item" v-if="item.payStatus == 0 && item.orderStatus == 0">
|
||||
<button class="mini-btn" size="mini" @click="closeOrder(item)" style="margin-right: 20rpx">取消订单</button>
|
||||
<button class="mini-btn" size="mini" style="background-color: #ff0000; color: #FFFFFF" @click="toPay(item.orderId)">去支付</button>
|
||||
</view>
|
||||
<!-- <view class="card-actions-item" v-if="item.payStatus == 1 && item.isInvoice == 0" @click="onInvoice(item.orderId)">-->
|
||||
<!-- <button class="mini-btn" size="mini">申请开票</button>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</uni-card>
|
||||
</block>
|
||||
</block>
|
||||
<block v-if="orderList.length == 0 && loadMore != 'no-more'">
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
<uni-card :border="false" :padding="'18px 6px'">
|
||||
<uv-skeleton rows="3" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
||||
<uv-gap height="16"></uv-gap>
|
||||
</uni-card>
|
||||
</block>
|
||||
<uni-load-more v-if="orderList.length > 0" :status="loadMore"></uni-load-more>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" @done="reload" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -102,308 +102,308 @@ import { pageWechatDeposit } from '@/api/shop/wechatDeposit';
|
||||
import { getWeek, getKey } from '@/utils/common';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isRefresh: false,
|
||||
isLogin: false,
|
||||
userId: 0,
|
||||
where: {
|
||||
page: 1,
|
||||
type: 0, // 0商城订单 1场地预定
|
||||
sceneType: 'showOrderGoods' // 查询订单附加场地信息
|
||||
},
|
||||
canReset: false,
|
||||
loadMore: 'more',
|
||||
logo: '',
|
||||
items: ['全部', '待付款', '待发货', '待收货', '已完成'],
|
||||
orderList: [],
|
||||
styles: [
|
||||
{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
colors: ['#333333', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#108001',
|
||||
styleType: 'text',
|
||||
getWeek,
|
||||
// 骨架屏
|
||||
hideTools: true
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
// 加载数据
|
||||
// this.reload()
|
||||
// if(option.isRefresh){
|
||||
// this.isRefresh = true
|
||||
// }
|
||||
},
|
||||
onShow(e) {
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
this.reload();
|
||||
},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this;
|
||||
const { where } = this;
|
||||
if (app.canReset) {
|
||||
app.where.page = ++where.page;
|
||||
app.reload();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
where.userId = userId;
|
||||
// uni.showLoading({
|
||||
// title: '数据读取中.'
|
||||
// })
|
||||
app.loadMore = 'loading';
|
||||
OrderApi.pageOrder(where)
|
||||
.then((res) => {
|
||||
const list = res.list.map((d) => {
|
||||
return d;
|
||||
});
|
||||
if (app.orderList.length < res.count) {
|
||||
console.log('11111: ', 11111);
|
||||
app.orderList = app.orderList.concat(list);
|
||||
app.canReset = true;
|
||||
app.loadMore = 'no-more';
|
||||
} else {
|
||||
app.canReset = false;
|
||||
app.loadMore = 'no-more';
|
||||
console.log('22222: ', 22222);
|
||||
}
|
||||
uni.hideLoading();
|
||||
app.isRefresh = false;
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
app.isRefresh = false;
|
||||
});
|
||||
},
|
||||
onClickItem(e) {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
const index = e.currentIndex;
|
||||
if (this.current !== e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
// 全部
|
||||
if (index == 0) {
|
||||
where.payStatus = undefined;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 未支付
|
||||
if (index == 1) {
|
||||
where.payStatus = 0;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 已支付
|
||||
if (index == 2) {
|
||||
where.payStatus = 1;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 已完成
|
||||
if (index == 3) {
|
||||
where.payStatus = 1;
|
||||
where.orderStatus = 1;
|
||||
}
|
||||
// 押金
|
||||
if (index == 4) {
|
||||
pageWechatDeposit({
|
||||
uid: uni.getStorageSync('user_id')
|
||||
}).then((res) => {
|
||||
app.orderList = res.list;
|
||||
if (res.count == 0) {
|
||||
app.loadMore = 'no-more';
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.where.page = 1;
|
||||
this.orderList = [];
|
||||
this.reload();
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
toPay(orderId) {
|
||||
uni.navigateTo({
|
||||
url: '/package/booking/confirm?id=' + orderId
|
||||
});
|
||||
},
|
||||
closeOrder(item) {
|
||||
uni.showModal({
|
||||
title: '确定取消此订单?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
OrderApi.updateOrder({
|
||||
orderStatus: 2,
|
||||
orderId: item.orderId
|
||||
})
|
||||
.then((msg) => {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'none'
|
||||
});
|
||||
item.orderStatus = 2;
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 弹出登录提示框
|
||||
async openLogin() {
|
||||
this.userId = uni.getStorageSync('user_id');
|
||||
if (!this.userId) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 申请开票
|
||||
onInvoice(id) {
|
||||
uni.navigateTo({
|
||||
url: '/package/user/invoice?id=' + id
|
||||
});
|
||||
}
|
||||
}
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isRefresh: false,
|
||||
isLogin: false,
|
||||
userId: 0,
|
||||
where: {
|
||||
page: 1,
|
||||
type: 0, // 0商城订单 1场地预定
|
||||
sceneType: 'showOrderGoods' // 查询订单附加场地信息
|
||||
},
|
||||
canReset: false,
|
||||
loadMore: 'more',
|
||||
logo: '',
|
||||
items: ['全部', '待付款', '待发货', '待收货', '已完成'],
|
||||
orderList: [],
|
||||
styles: [
|
||||
{
|
||||
value: 'button',
|
||||
text: '按钮',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
value: 'text',
|
||||
text: '文字'
|
||||
}
|
||||
],
|
||||
colors: ['#333333', '#4cd964', '#dd524d'],
|
||||
current: 0,
|
||||
colorIndex: 0,
|
||||
activeColor: '#ff0000',
|
||||
styleType: 'text',
|
||||
getWeek,
|
||||
// 骨架屏
|
||||
hideTools: true
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
// 加载数据
|
||||
// this.reload()
|
||||
// if(option.isRefresh){
|
||||
// this.isRefresh = true
|
||||
// }
|
||||
},
|
||||
onShow(e) {
|
||||
// 判断是否登录
|
||||
this.openLogin();
|
||||
this.reload();
|
||||
},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this;
|
||||
const { where } = this;
|
||||
if (app.canReset) {
|
||||
app.where.page = ++where.page;
|
||||
app.reload();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload() {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
where.userId = userId;
|
||||
// uni.showLoading({
|
||||
// title: '数据读取中.'
|
||||
// })
|
||||
app.loadMore = 'loading';
|
||||
OrderApi.pageOrder(where)
|
||||
.then((res) => {
|
||||
const list = res.list.map((d) => {
|
||||
return d;
|
||||
});
|
||||
if (app.orderList.length < res.count) {
|
||||
console.log('11111: ', 11111);
|
||||
app.orderList = app.orderList.concat(list);
|
||||
app.canReset = true;
|
||||
app.loadMore = 'no-more';
|
||||
} else {
|
||||
app.canReset = false;
|
||||
app.loadMore = 'no-more';
|
||||
console.log('22222: ', 22222);
|
||||
}
|
||||
uni.hideLoading();
|
||||
app.isRefresh = false;
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
app.isRefresh = false;
|
||||
});
|
||||
},
|
||||
onClickItem(e) {
|
||||
const app = this;
|
||||
const { where, userId } = this;
|
||||
const index = e.currentIndex;
|
||||
if (this.current !== e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
if (userId == 0) {
|
||||
app.openLogin();
|
||||
return;
|
||||
}
|
||||
// 全部
|
||||
if (index == 0) {
|
||||
where.payStatus = undefined;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 未支付
|
||||
if (index == 1) {
|
||||
where.payStatus = 0;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 已支付
|
||||
if (index == 2) {
|
||||
where.payStatus = 1;
|
||||
where.orderStatus = undefined;
|
||||
}
|
||||
// 已完成
|
||||
if (index == 3) {
|
||||
where.payStatus = 1;
|
||||
where.orderStatus = 1;
|
||||
}
|
||||
// 押金
|
||||
if (index == 4) {
|
||||
pageWechatDeposit({
|
||||
uid: uni.getStorageSync('user_id')
|
||||
}).then((res) => {
|
||||
app.orderList = res.list;
|
||||
if (res.count == 0) {
|
||||
app.loadMore = 'no-more';
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.where.page = 1;
|
||||
this.orderList = [];
|
||||
this.reload();
|
||||
},
|
||||
openUrl(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
toPay(orderId) {
|
||||
uni.navigateTo({
|
||||
url: '/package/booking/confirm?id=' + orderId
|
||||
});
|
||||
},
|
||||
closeOrder(item) {
|
||||
uni.showModal({
|
||||
title: '确定取消此订单?',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
OrderApi.updateOrder({
|
||||
orderStatus: 2,
|
||||
orderId: item.orderId
|
||||
})
|
||||
.then((msg) => {
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'none'
|
||||
});
|
||||
item.orderStatus = 2;
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: '请检查您的网络.',
|
||||
icon: 'none'
|
||||
});
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 弹出登录提示框
|
||||
async openLogin() {
|
||||
this.userId = uni.getStorageSync('user_id');
|
||||
if (!this.userId) {
|
||||
this.$refs.login.open('bottom');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 申请开票
|
||||
onInvoice(id) {
|
||||
uni.navigateTo({
|
||||
url: '/package/user/invoice?id=' + id
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
padding: 0 12rpx;
|
||||
padding: 0 12rpx;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color-tag {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.uni-list {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order {
|
||||
.order-title {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
.order-title {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
|
||||
.merchant-avatar {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.merchant-avatar {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
// padding-left: 12rpx;
|
||||
}
|
||||
.merchant-name {
|
||||
// padding-left: 12rpx;
|
||||
}
|
||||
|
||||
.btn-status {
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.btn-status {
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.order-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
.order-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ele-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.close {
|
||||
top: 60rpx !important;
|
||||
top: 60rpx !important;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 30rpx;
|
||||
align-items: flex-start;
|
||||
padding-left: 6rpx;
|
||||
margin-left: 450rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 30rpx;
|
||||
align-items: flex-start;
|
||||
padding-left: 6rpx;
|
||||
margin-left: 450rpx;
|
||||
|
||||
.web-text-heading {
|
||||
font-size: 30rpx !important;
|
||||
}
|
||||
.web-text-heading {
|
||||
font-size: 30rpx !important;
|
||||
}
|
||||
}
|
||||
.goods-price-bar{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user