karlcarlo
a5c5d753b6
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
382 lines
11 KiB
Vue
382 lines
11 KiB
Vue
<template>
|
||
<view class="record">
|
||
<!-- #ifdef H5 -->
|
||
<view class="top_nav acea-row row-center-wrapper">
|
||
<view class="navCon acea-row row-middle">
|
||
<view class="text" :class="active == 0 ? 'on' : ''" @click="switchTab(0)">购买记录</view>
|
||
<view class="text" :class="active == 1 ? 'on2' : ''" @click="switchTab(1)">浏览记录</view>
|
||
</view>
|
||
</view>
|
||
<view class="search acea-row row-center row-middle">
|
||
<input type="text" v-model="keywords" class="search_input" placeholder="搜索商品" placeholder-class="text_gray"
|
||
@blur="search()">
|
||
</view>
|
||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||
<view class="goods_list" v-if="goodsList.length">
|
||
<view class="item acea-row" v-for="(item,index) in goodsList" :key="index">
|
||
<view class="picture">
|
||
<image :src="item.image" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="goods_info acea-row row-column row-between">
|
||
<view class="name line2">{{item.store_name}}</view>
|
||
<view class="stork acea-row row-between">
|
||
<text>库存 {{item.stock}}</text>
|
||
<text>销量 {{item.sales}}</text>
|
||
<text class="pushFn" @click="pushFn(item)">推送</text>
|
||
</view>
|
||
</view>
|
||
<view class="price_info acea-row row-column row-between">
|
||
<text class="price">￥{{item.price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-box" v-else>
|
||
<image src="../static/shop_record.png" v-if="active == 0"></image>
|
||
<image src="../static/view_record.png" v-if="active == 1"></image>
|
||
<view>暂无 {{active ? '浏览' : '购买'}}记录</view>
|
||
</view>
|
||
<view class="ht100"></view>
|
||
<tNav :active="2"></tNav>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
<script>
|
||
// #ifdef H5
|
||
import tNav from '../components/tabNav.vue';
|
||
import Loading from '@/components/Loading/index.vue';
|
||
import {
|
||
initWxConfig,
|
||
initAgentConfig,
|
||
} from "@/libs/work.js";
|
||
import {
|
||
getWorkCartList,
|
||
getWorkVisitInfo,
|
||
getWorkAgentConfig
|
||
} from "@/api/work.js"
|
||
// import {
|
||
// wx
|
||
// } from "@/utils/agent.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
keywords: "",
|
||
userId: "",
|
||
loaded: false,
|
||
loading: false, //是否加载中
|
||
loadend: false, //是否加载完毕
|
||
loadTitle: '加载更多', //提示语
|
||
goodsList: [], //商品数组
|
||
active: 0, //选项状态
|
||
page: 1,
|
||
limit: 10,
|
||
}
|
||
},
|
||
components: {
|
||
Loading,
|
||
tNav
|
||
},
|
||
onLoad() {
|
||
this.userId = this.$Cache.get('work_user_id')
|
||
this.getList();
|
||
getWorkAgentConfig(window.location.href.split('#')[0]).then(res => {
|
||
if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(navigator.userAgent)){
|
||
wx.agentConfig({
|
||
corpid: res.data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
|
||
agentid: res.data.agentid, // 必填，企业微信的应用id （e.g. 1000247）
|
||
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
|
||
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
|
||
signature: res.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
|
||
jsApiList: ["getCurExternalContact", "getCurExternalChat", "getContext", "chooseImage", "sendChatMessage", ],
|
||
success: function(res) {
|
||
// console.log(res);
|
||
},
|
||
});
|
||
}else{
|
||
jWeixin.agentConfig({
|
||
corpid: res.data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
|
||
agentid: res.data.agentid, // 必填，企业微信的应用id （e.g. 1000247）
|
||
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
|
||
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
|
||
signature: res.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
|
||
jsApiList: ["getCurExternalContact", "getCurExternalChat", "getContext", "chooseImage", "sendChatMessage", ],
|
||
success: function(res) {
|
||
// console.log(res);
|
||
},
|
||
});
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
// 推送到商品详情
|
||
pushFn(item) {
|
||
if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(navigator.userAgent)){
|
||
wx.invoke('sendChatMessage', {
|
||
msgtype: "news", //消息类型，必填
|
||
enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
|
||
news: {
|
||
link: location.protocol + '://' + location.host + "/pages/goods_details/index?id=" + item.id, //H5消息页面url 必填
|
||
title: item.store_name, //H5消息标题
|
||
desc: "", //H5消息摘要
|
||
imgUrl: item.image, //H5消息封面图片URL
|
||
},
|
||
}, function(res) {
|
||
if (res.err_msg == 'sendChatMessage:ok') {
|
||
console.log('发送成功', res)
|
||
//发送成功
|
||
} else {
|
||
//发送失败
|
||
console.log('发送失败', res)
|
||
}
|
||
})
|
||
}else{
|
||
jWeixin.invoke('sendChatMessage', {
|
||
msgtype: "news", //消息类型，必填
|
||
enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
|
||
news: {
|
||
link: location.protocol + '://' + location.host + "/pages/goods_details/index?id=" + item.id, //H5消息页面url 必填
|
||
title: item.store_name, //H5消息标题
|
||
desc: "", //H5消息摘要
|
||
imgUrl: item.image, //H5消息封面图片URL
|
||
},
|
||
}, function(res) {
|
||
if (res.err_msg == 'sendChatMessage:ok') {
|
||
console.log('发送成功', res)
|
||
//发送成功
|
||
} else {
|
||
//发送失败
|
||
console.log('发送失败', res)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
switchTab(index) {
|
||
if (this.loading) return
|
||
if (index === this.active) return;
|
||
this.active = index;
|
||
this.loadend = false;
|
||
this.page = 1;
|
||
this.$set(this, 'goodsList', []);
|
||
this.getList();
|
||
},
|
||
search() {
|
||
if (this.loading) return
|
||
this.loadend = false;
|
||
this.page = 1;
|
||
this.$set(this, 'goodsList', []);
|
||
this.getList();
|
||
},
|
||
getList() {
|
||
let that = this;
|
||
let params = {};
|
||
if (that.loadend) return;
|
||
if (that.loading) return;
|
||
that.loading = true;
|
||
that.loadTitle = '加载更多';
|
||
params = {
|
||
userid: that.userId,
|
||
store_name: that.keywords,
|
||
page: that.page,
|
||
limit: that.limit,
|
||
}
|
||
if (that.active == 0) {
|
||
getWorkCartList(params).then(res => {
|
||
let list = res.data || [];
|
||
let loadend = list.length < that.limit;
|
||
that.goodsList = that.$util.SplitArray(list, that.goodsList);
|
||
that.$set(that, 'goodsList', that.goodsList);
|
||
that.loadend = loadend;
|
||
that.loading = false;
|
||
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||
that.page = that.page + 1;
|
||
}).catch(err => {
|
||
return that.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
} else if (that.active == 1) {
|
||
getWorkVisitInfo(params).then(res => {
|
||
let list = res.data || [];
|
||
let loadend = list.length < that.limit;
|
||
that.goodsList = that.$util.SplitArray(list, that.goodsList);
|
||
that.$set(that, 'goodsList', that.goodsList);
|
||
that.loadend = loadend;
|
||
that.loading = false;
|
||
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||
that.page = that.page + 1;
|
||
}).catch(err => {
|
||
return that.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
}
|
||
}
|
||
},
|
||
onReachBottom: function() {
|
||
this.getList();
|
||
}
|
||
}
|
||
// #endif
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* #ifdef H5 */
|
||
.top_nav {
|
||
background: #FFFFFF;
|
||
font-size: 28rpx;
|
||
// font-family: PingFangSC-Regular, PingFang SC;
|
||
// font-weight: 400;
|
||
color: #000000;
|
||
|
||
.navCon{
|
||
width: 440rpx;
|
||
height: 60rpx;
|
||
background: #F4FAFF;
|
||
border: 1rpx solid #1A90FE;
|
||
border-radius: 30rpx;
|
||
margin: 30rpx 0 10rpx 0;
|
||
color: #1A90FE;
|
||
|
||
.text{
|
||
width: 50%;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.on {
|
||
color: #fff;
|
||
background-color: #1A90FE;
|
||
border-radius: 30rpx 0 0 30rpx;
|
||
}
|
||
.on2{
|
||
color: #fff;
|
||
background-color: #1A90FE;
|
||
border-radius: 0 30rpx 30rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search {
|
||
height: 100rpx;
|
||
background: #FFFFFF;
|
||
|
||
.search_input {
|
||
width: 690rpx;
|
||
height: 60rpx;
|
||
background: #F5F6F9;
|
||
border-radius: 34rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.text_gray {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #CCCCCC;
|
||
text-align: center;
|
||
}
|
||
|
||
.goods_list {
|
||
.item {
|
||
position: relative;
|
||
width: 710rpx;
|
||
height: 192rpx;
|
||
border-radius: 12rpx;
|
||
margin: 20rpx auto 0;
|
||
padding: 26rpx 24rpx 26rpx;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
|
||
.pushFn {
|
||
position: absolute;
|
||
bottom: 28rpx;
|
||
right: 24rpx;
|
||
width: 112rpx;
|
||
height: 52rpx;
|
||
border-radius: 28rpx;
|
||
border: 2rpx solid #1890FF;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
line-height: 52rpx;
|
||
text-align: center;
|
||
color: #1890FF;
|
||
}
|
||
|
||
.picture {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 8rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.goods_info {
|
||
width: 280rpx;
|
||
margin-left: 22rpx;
|
||
|
||
.name {
|
||
height: 80rpx;
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
.stork {
|
||
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
|
||
}
|
||
}
|
||
|
||
.price_info {
|
||
margin-left: 80rpx;
|
||
|
||
.price {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #E93323;
|
||
}
|
||
|
||
.send_btn {
|
||
width: 112rpx;
|
||
height: 52rpx;
|
||
display: inline-block;
|
||
margin-left: 20rpx;
|
||
line-height: 52rpx;
|
||
text-align: center;
|
||
border-radius: 28rpx;
|
||
border: 1px solid #1890FF;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #1890FF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-box {
|
||
height: 600rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 390rpx;
|
||
height: 264rpx;
|
||
}
|
||
}
|
||
|
||
.ht100 {
|
||
height: 120rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
</style>
|