gxwebsoft/gxtyzx-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化框架

Browse Source
This commit is contained in:
赵忠林
2024-08-08 01:53:51 +08:00
parent d0adbaff13
commit 24e63cf551
16 changed files with 1454 additions and 493 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/package/goods/checkout.vue
+4 -5
View File
@@ -7,7 +7,7 @@
</view>
</uni-card>
<uni-card :border="false" :is-shadow="false">
<uni-card :border="false" :is-shadow="false" v-if="address.name">
<uv-cell
v-if="deliveryType === 0"
:title="`${address.name} &nbsp; ${address.phone}`"
@@ -23,12 +23,11 @@
</uv-cell>
<uv-cell
v-if="deliveryType === 1"
:title="`${shopAddress.merchantName}`"
:label="`${shopAddress.address}`"
:title="`${cart.shops[0].shopName}`"
:label="`${cart.shops[0].address}`"
icon="map"
:cellStyle="{ padding: '5px 0' }"
:border="false"
@click="openAddressList"
>
<template v-slot:right-icon>
<uv-icon name="arrow-right"></uv-icon>
@@ -302,7 +301,6 @@ export default {
};
},
onLoad(where) {
console.log('where:',where)
this.where = where;
this.reload();
},
@@ -331,6 +329,7 @@ export default {
CartApi.listCart(where).then(data => {
if(data){
app.cart = data
console.log(app.cart.shops);
}
})
src/package/goods/detail.vue
+68 -19
View File
@@ -3,10 +3,9 @@
<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'}">
<uv-cell :border="false" :cellStyle="{padding: '10px 5px'}">
<template v-slot:title>
<view class="pirce-bar" style="display: flex;">
<view class="web-text-danger">￥</view>
@@ -17,20 +16,66 @@
<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 :cellStyle="{padding: '0px 5px 15px 5px'}">
<template v-slot:title>
<view class="flex">
<view class="web-text-heading font-bold" style="font-size: 26rpx; ">{{ form.goodsName }}</view>
</view>
</template>
</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 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>-->
</uv-cell-group>
</uni-card>
<uni-card :border="false" :is-shadow="false" :padding="0">
<uv-cell :cellStyle="{padding: '10px 5px'}" :center="true" @click="openSpecForm">
<template v-slot:title>
<view class="flex" v-if="!skuText">
<view class="web-text-secondary w-15p">可选</view>
<view class="uv-page__tag-item" v-for="(item, index) in form.goodsSpecValue" :key="index">
<uv-tags :text="`${item.value}`" :plain="!item.checked" type="info" :name="index" class="mr-10"
@click="radioClick">
</uv-tags>
</view>
</view>
<view class="flex" v-else>
<view class="web-text-secondary w-15p">已选</view>
<uv-text class="web-text-heading" type="warning" plain :text="skuText" />
</view>
</template>
<template v-slot:value>
<uv-icon name="arrow-right" color="#cccccc"></uv-icon>
</template>
</uv-cell>
<uv-cell :cellStyle="{padding: '10px 5px'}">
<template v-slot:title>
<view class="flex">
<view class="web-text-secondary w-15p">配送</view>
<view class="web-text-heading">啦啦</view>
</view>
</template>
<template v-slot:value>
<uv-icon name="arrow-right" color="#cccccc"></uv-icon>
</template>
</uv-cell>
<uv-cell :border="false" :cellStyle="{padding: '10px 5px'}">
<template v-slot:title>
<view class="flex">
<view class="web-text-secondary w-15p">保障</view>
<view class="web-text-heading value">坏了包赔 假一赔十 七天无理由</view>
</view>
</template>
<template v-slot:value>
<uv-icon name="arrow-right" color="#cccccc"></uv-icon>
</template>
</uv-cell>
</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>
@@ -103,7 +148,7 @@
</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">
@@ -156,6 +201,7 @@ import {
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";
import UvText from "@/uni_modules/uv-text/components/uv-text/uv-text.vue";
const cartStore = useCartStore();
const {
@@ -173,7 +219,7 @@ const {
} = storeToRefs(cartStore)
export default {
components: {UvButton, UvGap, UvAvatar},
components: {UvText, UvButton, UvGap, UvAvatar},
data() {
return {
id: 0,
@@ -247,7 +293,7 @@ export default {
});
// 请求数据
Promise.all([app.getGoods(), app.listCart()]).then(data => {
Promise.all([app.getGoods(), app.listCart()]).then(data => {
const form = data[0]
form.content = this.formatRichText(form.content)
app.form = form;
@@ -268,7 +314,7 @@ export default {
app.cart = data[1]
console.log(app.cart.totalNums)
// 更新购物车角标
if(app.cart?.totalNums){
if (app.cart?.totalNums) {
app.options[1].info = app.cart.totalNums
}
})
@@ -353,6 +399,9 @@ export default {
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
openSpecForm(){
this.$refs.specForm.open('center');
},
onClick({index, content}) {
console.log(index, content)
// 客服按钮
@@ -433,6 +482,7 @@ export default {
})
}
},
gotoBuy() {
const app = this
this.disabled = !this.disabled;
@@ -441,15 +491,14 @@ export default {
spec: app.skuText,
cartNum: 1,
isNew: app.isNew
}).then(data => {
app.options[1].info = data.totalNums
}).then(cardId => {
if (app.isNew) {
// CartApi.removeCart(data.id)
// 跳转页面
uni.navigateTo({
url: `/package/goods/checkout?id=${data.id}`
url: `/package/goods/checkout?id=${cardId}`
})
}else {
} else {
}
})
src/package/goods/index.vue
+307
View File
@@ -0,0 +1,307 @@
<template>
<view class="waterfall">
<!-- search-->
<view class="search" style="padding: 0 10rpx; background-color: #FFFFFF">
<uni-search-bar radius="5" placeholder="搜索商品" v-model="where.keywords" clearButton="auto" cancelButton="none" @confirm="search"/>
</view>
<!-- 推荐美食 -->
<ws-goods :goods="goods" />
</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';
import {getIndex} from "@/api/cms/mp";
const tenantStore = useTenantStore();
export default {
data() {
return {
where: {
},
goods: [],
foods: [],
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({keywords}) {
if(keywords){
this.where.keywords = keywords
uni.setNavigationBarTitle({
title: '商品搜索'
})
}
// 请求数据
await this.reload()
},
methods: {
async reload() {
const app = this
// 获取服务租户信息包
const info = await tenantStore.fetchTenantInfo();
await this.getIndexData()
// 登录状态
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
app.isLogin = true;
}
// 请求数据
Promise.all([app.pageGoods(),app.getGoodsCategory(), app.getIndexData()])
.then((res) => {
app.goodsList = res[0];
app.goodsCategoryList = res[1];
app.hideTools = false
if(res[2]){
app.foods = res[2]?.foods;
app.goods = res[2]?.goods;
}
})
},
getIndexData(){
const app = this;
return new Promise((resolve, reject) => {
getIndex({})
.then((result) => {
resolve(result);
})
.catch(reject);
});
},
pageGoods() {
const app = this
const { categoryId } = this
return new Promise((resolve, reject) => {
GoodsApi.pageGoods(app.where)
.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>