Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

对接商品详情页

master
52643018@qq.com 4 years ago
parent
1c52d4476a
commit
c238ec0b38
3 changed files with 154 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/lf-indexFind/lf-indexFind.vue
  2. 34
      pages.json
  3. 258
      pages/shop/goodsdetail.vue

2
components/lf-indexFind/lf-indexFind.vue
View File

@ -5,7 +5,7 @@
<view class="find-content">
<view class="find-item" :id="'find_'+ (index+1)"
:class="{'max-item': index+1 == show_item}"
@click="$url('/pages/discover/discoverdetails')"
@click="$url('/pages/discover/discoverdetails?discover_id='+ item.associate.id)"
v-for="(item, index) in list" :key="index">
<image class="img" :src="item.image"></image>
<view class="lf-line-2 info">{{ item.associate.content }}</view>

34
pages.json
View File

@ -15,7 +15,8 @@
{
"path": "pages/business/payment/paystate",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"navigationBarTitleText":"支付结果"
}
},
{
@ -35,19 +36,22 @@
{
"path": "pages/user/my/myregister",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"navigationBarTitleText":"我的报名"
}
},
{
"path": "pages/shop/goodsdetail",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"navigationBarTitleText":"商品详情"
}
},
{
"path": "pages/coupon/index/index",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"navigationBarTitleText":"优惠券"
}
},
{
@ -74,7 +78,7 @@
{
"path": "pages/article/details",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "文章详情",
"navigationStyle":"custom"
}
},
@ -95,63 +99,63 @@
{
"path": "pages/user/my/collect",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "收藏",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/vipinfo",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "会员资料",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/editname",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "修改昵称",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/setting",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "设置",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/center",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "个人中心",
"navigationStyle": "custom"
}
},
{
"path": "pages/discover/discover",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "发现",
"navigationStyle": "custom"
}
},
{
"path": "pages/shop/shopdetail",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "品牌详情",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/my/my",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "个人主页",
"navigationStyle": "custom"
}
},
{
"path": "pages/discover/discoverdetails",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "发现详情",
"navigationStyle": "custom"
}
},
@ -212,7 +216,7 @@
"navigationBarTitleText": "评价"
}
},
{
{
"path": "pages/recharge/balance/balance",
"style": {
"navigationBarTitleText": "余额" ,

258
pages/shop/goodsdetail.vue
View File

@ -26,36 +26,35 @@
</view>
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-row-between">
<view v-if="type == 'point'">
<text class="lf-font-48 lf-color-primary lf-font-bold">8493</text>
<text class="lf-font-48 lf-color-primary lf-font-bold">{{ goods_detail.redeem_point }}</text>
<text class="lf-font-28 lf-color-777 lf-m-l-10">个兑换</text>
</view>
<lf-price :iftext="false" :price="goods_detail.min_price || 0" v-else></lf-price>
<lf-price :iftext="false" :price="goods_detail.sell_price || 0" v-else></lf-price>
<text class="lf-iconfont icon-fenxiang lf-font-40" @click="shareGraphic()"></text>
</view>
<view class="lf-row-between lf-font-24 lf-m-t-20 lf-p-b-20">
<view class="lf-font-bold lf-font-32 lf-color-222">{{ goods_detail.name }}</view>
</view>
<view class="lf-row-between lf-font-24 lf-p-b-30">
<view class="lf-font-28 lf-color-777" v-if="type == 'self'">门店自提</view>
<view class="lf-font-28 lf-color-777 lf-row-between" v-else>可自提/可邮寄</view>
<view v-if="type == 'seckill'">已有38人购买</view>
<view class="lf-font-28 lf-color-777 lf-row-between">可自提/可邮寄</view>
</view>
</view>
<block v-if="type == 'self'">
<!-- 商品优惠 -->
<block v-if="coupons && coupons.length">
<self-line></self-line>
<view class="bg-white" >
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">优惠</text>
<view v-if="orderDetails.coupon == ''">
<text class="lf-color-price lf-font-28 lf-m-l-10" v-for="(item,index) of orderDetails.coupon">{{item.tag}}</text>
</view>
<view v-else>
<text class="lf-color-222 lf-font-26 lf-m-l-30">化妆品教师节满1200减200</text>
<view style="width: 580rpx;">
<view class="lf-color-222 lf-font-26 lf-m-l-30"
v-for="(item, index) in coupons" :key="index">{{ item.title }}
</view>
</view>
</view>
<view>
@ -63,15 +62,18 @@
</view>
</view>
</view>
<self-line></self-line>
</block>
<self-line></self-line>
<!-- 服务tags -->
<block v-if="goods_detail.tags.length">
<view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">服务</text>
<view style="width: 600rpx;flex-wrap: wrap;display: flex;margin-top: 32rpx;">
<view class="lf-m-l-30" v-for="i of 5">
<view class="lf-m-l-30" v-for="(tagItem, tagIndex) in goods_detail.tags" :key="tagIndex">
<text class="lf-iconfont icon-xuanzhong lf-font-30" style="color: #15716E;"></text>
<text class="lf-m-l-10 lf-font-26 lf-color-black">正品保障</text>
<text class="lf-m-l-10 lf-font-26 lf-color-black">{{ tagItem }}</text>
</view>
</view>
</view>
@ -81,38 +83,13 @@
</view>
</view>
</block>
<block v-else>
<self-line></self-line>
<!-- <view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<view class="lf-color-777 lf-font-28">送至</view>
<view class="lf-color-222 lf-font-26 lf-m-l-30" style="width: 550rpx;">广西壮族自治区-南宁市-青秀区-民族大道180号</view>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view> -->
<view class="bg-white">
<view class="cu-bar padding-lr" @click="showFreight">
<view class="lf-flex">
<view class="lf-color-777 lf-font-28">运费</view>
<view class="lf-color-222 lf-font-26 lf-m-l-30 lf-line-1" style="width: 550rpx;">
<text>1KM以内，包含1KM；重量在5KG以内按6元计费，每超出1KG加收2元</text>
</view>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view>
</block>
<!-- 商品选择规格 -->
<view class="bg-white">
<!-- todo 选择后显示 -->
<view class="cu-bar padding-lr" @click="shoot(2)">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">已选</text>
<text class="lf-color-222 lf-font-26 lf-m-l-30">已选500ml x1</text>
<text class="lf-color-777 lf-font-28">选择</text>
<text class="lf-color-222 lf-font-26 lf-m-l-30">选中的商品规格TODO</text>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
@ -120,40 +97,44 @@
</view>
</view>
<self-line></self-line>
<!-- 店铺信息 -->
<view>
<view class="user-top">
<view class="lf-row-between lf-w-100">
<view class="lf-flex" @click="$url('/pages/shop/shopdetail')">
<view class="lf-flex" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
<view class="tag-father">
<image src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill" class="head-img"></image>
<image :src="brand_detail.logo" mode="aspectFill" class="head-img"></image>
</view>
<view class="lf-flex-column lf-m-l-20">
<text class="lf-font-28 lf-color-black lf-font-bold">颐莲官方店</text>
<text class="lf-font-28 lf-color-black lf-font-bold">{{ brand_detail.name }}</text>
<view class="lf-font-24 lf-color-777">
<text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text>
<text class="lf-m-l-10">L2</text>
<text class="lf-m-l-10">{{ brand_detail.floor }}</text>
</view>
</view>
</view>
<view>
<!-- <view>
<button class="head-btn" @click="$url('/pages/user/my/chatonline')">
<!-- <u-icon name="chat" class="lf-m-r-10"></u-icon> -->
<text class="lf-iconfont icon-kefuhdpi lf-font-24"></text>
<text class="lf-m-l-10">客服</text>
</button>
</view>
</view> -->
</view>
</view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type='+ this.type)">
<image class="goods-img"></image>
<view class="goods-item"
v-for="(item, index) in brand_detail.goods"
:key="index"
@click="$url('/pages/shop/goodsdetail?id='+ item.id)">
<image class="goods-img" :src="item.img"></image>
<view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
<view>￥0.5</view>
<view class="lf-line-1">{{ item.name }}</view>
<view>￥{{ item.sell_price }}</view>
</view>
</view>
<view class="goods-item" @click="$url('/pages/shop/shopdetail')">
<view class="goods-item" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
<view class="more-box">
<text>查看更多</text>
<text class="lf-iconfont icon--2 lf-text-vertical"></text>
@ -162,6 +143,7 @@
</view>
</scroll-view>
</view>
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
@ -170,19 +152,20 @@
</view>
<!-- 修饰专用 -->
<view class="extra"></view>
<!-- 吸底操作按钮 -->
<view class="lf-row-between fixed-bottom">
<view class="lf-flex lf-p-t-10 lf-p-b-10">
<view class="lf-flex-column lf-row-center icon-item" open-type="contact">
<!-- <view class="lf-flex-column lf-row-center icon-item" open-type="contact">
<text class="lf-iconfont icon-pinglun- icon-img"></text>
<view class="lf-m-t-1">客服</view>
</view>
</view> -->
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
<text class="lf-iconfont icon-shoucang2 icon-img lf-color-price" v-if="is_collect"></text>
<text class="lf-iconfont icon-shoucang11 icon-img" v-else></text>
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
</view>
<button class="lf-flex-column lf-row-center icon-item">
<button class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/store/cart/cart')">
<text class="lf-iconfont icon-gouwulan icon-img"></text>
<view class="lf-m-t-1">购物车</view>
</button>
@ -198,16 +181,18 @@
<button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button>
</view>
</view>
<!-- 加入购物车、立即购买模态框选规格 -->
<u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20">
<!-- todo 高度问题优化 -->
<view class="popup-content">
<!-- 商品信息及关闭按钮 -->
<view class="popup-head">
<view class="lf-flex">
<image class="goods-img" :src="goods_detail.img"></image>
<view class="goods-info">
<view class="price">¥{{ goods.min_price }}</view>
<view class="goods-name">{{ goods.name }}</view>
<view class="price">¥{{ goods_detail.min_price }}-¥{{ goods_detail.max_price }}</view>
<view class="goods-name">{{ goods_detail.name }}</view>
</view>
</view>
<view @click="show_popup = false">
@ -215,27 +200,29 @@
</view>
</view>
<!-- 规格 -->
<view class="spec-title">重量</view>
<view class="lf-flex-wrap">
<view :class="{
'spec-item': true,
'spec-active': spec_current == index}"
@click="activeSpec(index)"
v-for="(item, index) in 5"
:key="index">{{ item +'0克' }}
<view v-for="(value, key) in goods_stock.specs" :key="key">
<view class="spec-title">{{ value.label }}</view>
<view class="lf-flex-wrap">
<view :class="{
'spec-item': true,
'spec-active': item.spec_current === index}"
@click="activeSpec(key, index)"
v-for="(item, index) in value.list"
:key="index">{{ item.value }}
</view>
</view>
</view>
<!-- 数量 -->
<view class="lf-row-between lf-m-t-40">
<view class="lf-font-28 lf-color-555">数量</view>
<view class="lf-flex">
<view class="num-btn">
<view class="num-btn" @click="changeNum('less')">
<text class="lf-iconfont icon-jian1 lf-font-30"></text>
</view>
<view>
<input class="input" value="1" />
<input class="input" :value="goods_num" :disabled="true" />
</view>
<view class="num-btn lf-text-right">
<view class="num-btn lf-text-right" @click="changeNum('add')">
<text class="lf-iconfont icon-jia lf-font-30"></text>
</view>
</view>
@ -244,18 +231,7 @@
<button class="comfirm-btn" @click="confirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
</view>
</u-popup>
<!-- 运费说明 -->
<u-popup v-model="show_freight" mode="bottom" :round="true" borderRadius="20">
<view class="popup-content">
<view class="lf-row-between lf-m-b-30">
<view class="lf-color-555 lf-font-32 lf-font-bold">店铺运费说明</view>
<view @click="show_freight = false">
<text class="lf-iconfont icon-cuo lf-font-50"></text>
</view>
</view>
<view class="lf-font-28 lf-color-777">1KM以内，包含1KM；重量在5KG以内按6元计费，每超出1KG加收2元</view>
</view>
</u-popup>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop"></u-back-top>
</block>
@ -278,36 +254,33 @@
skeletonLoading: false,
pictures: [],
show_popup: false, // 是否显示选规格模态框
show_freight: false, // 是否显示运费说明模态框
spec_current: null, // 规格下标
click_type: null, // 当前点击的是加入购物车[1]还是立即购买[2]
type: 'mail', // 页面显示类型，mail普通可邮寄商品，self自提商品，point积分商品，seckill秒杀商品
type: 'mail', // 页面显示类型，mail普通可邮寄商品，point积分商品，seckill秒杀商品
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 13:10:00').getTime(),
goods_stock: {
specs: [],
stores: []
}
specs: {},
stores: {}
},
seckill: {}, // 秒杀商品的信息
brand_detail: {},
token: '',
coupons: [], // 优惠
goods_num: 1
}
},
onLoad(options){
console.log("options", options)
this.token = this.$cookieStorage.get('user_token');
this.goods_id = options.id;
this.type = options.type || 'mail';
// this.type = options.type || 'mail'; // TODO 改变思路，不是由外界控制
this.getNewdetail();
this.getGoodsStock();
},
computed: {
isRight() {
return function(val) {
return this.$shared.isRight(val);
}
}
this.getGoodsStock(); // 获取商品库存、规格信息
},
methods: {
// 切换商品收藏
switchCollect(){
let userInfo = this.$cookieStorage.get('user_token') || {};
if(!userInfo){
if(!this.token){
this.$url('/pages/login/index');
return;
}
@ -315,7 +288,6 @@
},
//收藏
addCollcet() {
console.log('当前的商品id',this.goods_detail.id)
this.$http.post({
api: 'api/collect/create',
data: {
@ -323,7 +295,7 @@
collect_id: this.goods_detail.id,
},
header: {
Authorization: this.$cookieStorage.get('user_token')
Authorization: this.token
}
}).then(res => {
this.$msg(res.data.data);
@ -332,30 +304,44 @@
console.log("====", err);
})
},
showFreight(){
this.show_freight = true;
},
// 加入购物车和立即购买
shoot(type){
// TODO 判断type做不同的逻辑
this.click_type = type;
if(this.goods_stock.specs.length){
if(this.$isRight(this.goods_stock.specs)){
this.show_popup = true;
}else{
this.confirm();
}
},
activeSpec(index){
if(this.spec_current == index){
this.spec_current = null;
// 商品选规格
activeSpec(key, index){
let obj = this.goods_stock.specs;
if(obj[key].spec_current == index){
obj[key].spec_current = null;
}else{
this.spec_current = index;
obj[key].spec_current = index;
}
this.$set(this.goods_stock, 'specs', obj);
},
// 商品加减
changeNum(type){
if(type == 'add'){
if(this.goods_num < 10){
this.goods_num++;
}
}else if(type == 'less'){
if(this.goods_num > 1){
this.goods_num--;
}
}
},
// 跳转至下单页TODO
confirm(){
if(this.click_type == 2){
this.$url('/pages/order/confirm/confirm');
}
},
// 点击页面分享按钮
shareGraphic(){
this.getCreateShareImg();
},
@ -398,27 +384,58 @@
})
},
// 商品详情
getNewdetail(){
this.$http.get({
api: 'api/store/detail/'+ this.goods_id,
header: {
Authorization: this.$cookieStorage.get('user_token')
Authorization: this.token
}
}).then(res => {
console.log("===---", res);
this.goods_detail = res.data.data;
let meta = res.data.meta;
let goods_detail = res.data.data;
this.goods_detail = goods_detail;
this.pictures = [res.data.data.img];
this.is_collect = Boolean(res.data.data.is_collect) || false;
console.log("this.pictures", this.pictures);
let type = 'mail';
if(this.$isRight(goods_detail.is_largess)){
type = 'point';
}
if(this.$isRight(meta.seckill)){
type = 'seckill';
this.seckill = meta.seckill;
}
if(type != 'point'){
this.getBrandDetail(goods_detail.brand_id);
}
if(this.$isRight(meta.discounts)){
this.coupons = meta.discounts.coupons;
}
this.type = type;
}).catch(err => {
console.log("====", err);
})
},
// 获取商家信息
getBrandDetail(brand_id){
this.$http.get({
api: 'api/brand/detail',
data: {
brand_id: brand_id
},
header: {
Authorization: this.token
}
}).then(res => {
this.brand_detail = res.data.data;
})
},
// 获取商品库存信息
getGoodsStock(){
this.$http.get({
api: `api/store/detail/${this.goods_id}/stock`
}).then(res => {
console.log("getGoodsStock", res);
this.goods_stock = res.data.data;
})
},
@ -428,7 +445,7 @@
phoneNumber: String(phoneStr)
})
},
// 打开地图
// 打开地图 PS.暂时用不到
openMap(){
let { address, lat, lng } = this.goods_detail?.store || {};
uni.openLocation({
@ -438,16 +455,9 @@
name: address
});
},
// 跳转到确认下单页面
toAddOrder(){
let goods_id = this.goods_detail.id;
this.$url('/pages/order/confirm_order?goods_id='+ goods_id);
},
// 预览图片
lookImg(index){
this.$u.throttle(() => {
// let goods_banner = this.goods_detail.banners || [];
// let banners = goods_banner.map(item => item.cover);
let banners = this.pictures;
uni.previewImage({
urls: banners,
@ -479,8 +489,8 @@
onShareAppMessage(){
let goods = this.goods_detail;
let title = goods.name;
let imageUrl = goods.share_cover || goods.cover;
let path = '/pages/route/index?route=goods_detail&id='+ goods.id;
let imageUrl = goods.share_cover || goods.cover || goods.img;
let path = '/pages/route/index?route=detail&id='+ goods.id;
return {
title,

Write Preview
Loading…
Cancel
Save