detail-basic.php 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <div class="grid-box">
  2. <el-row :gutter="20">
  3. <el-col :span="4" v-for="(val, key) in statisticsData" :key="key">
  4. <div class="grid-item" flex="dir:top main:center">
  5. <div class="grid-text">
  6. <span>{{ val }}</span>
  7. <el-popover placement="top-start" width="250" trigger="hover" content="门店货款">
  8. <i slot="reference" v-if="key == 'total_settled_amount'" class="el-icon-question grid-icon"></i>
  9. </el-popover>
  10. </div>
  11. <div class="grid-val">{{ basicForm[key] }}</div>
  12. </div>
  13. </el-col>
  14. </el-row>
  15. </div>
  16. <!-- 基础信息 -->
  17. <el-form ref="basicForm" :model="basicForm" label-width="80px" size="small" :rules="basicRules">
  18. <el-card class="store-card" shadow="never">
  19. <div slot="header" class="store-card-head" flex="flex main:justify cross:center">
  20. <span>基础信息</span>
  21. <div class="head-btn">
  22. <el-button :loading="switchStoreLoading" size="small" :type="isDisable ? '' : 'primary'" @click="storeSwitch">{{ isDisable ? '启用' : '禁用' }}门店</el-button>
  23. <el-button size="small" type="primary" @click="storeEdit('baseDialogVisible')">编辑</el-button>
  24. </div>
  25. </div>
  26. <div class="store-card-body">
  27. <el-descriptions :column="2">
  28. <div slot="title" flex="flex cross:center">
  29. <el-image style="border-radius: 50%; height: 80px; width: 80px; overflow: hidden" :src="basicForm.logo_img" :preview-src-list="[basicForm.logo_img]"></el-image>
  30. <span class="store-name">{{ basicForm.store_name }}</span>
  31. </div>
  32. <el-descriptions-item label="店长">{{basicForm.shop_owner}}</el-descriptions-item>
  33. <el-descriptions-item label="手机号">{{basicForm.shop_mobile}}</el-descriptions-item>
  34. <el-descriptions-item label="类目">{{basicForm.cate_name}}</el-descriptions-item>
  35. <el-descriptions-item label="门店介绍">{{basicForm.store_desc}}</el-descriptions-item>
  36. <el-descriptions-item label="营业执照">
  37. <div style="height: 150px">
  38. <el-image style="height: 100%" :src="basicForm.license_img" fit="contain" :preview-src-list="[basicForm.license_img]"></el-image>
  39. </div>
  40. </el-descriptions-item>
  41. <el-descriptions-item label="创建时间">{{basicForm.created_at | dateTimeFormat('Y-m-d H:i:s')}}</el-descriptions-item>
  42. <el-descriptions-item label="到期时间" v-if="basicForm.expire_time==0">无限期</el-descriptions-item>
  43. <el-descriptions-item label="到期时间" v-else>{{basicForm.expire_time | dateTimeFormat('Y-m-d H:i:s')}}</el-descriptions-item>
  44. </el-descriptions>
  45. </div>
  46. </el-card>
  47. <!-- 地址信息/自提点 -->
  48. <el-card class="store-card" body-style="padding: 0;" shadow="never">
  49. <div slot="header" class="store-card-head" flex="flex main:justify cross:center">
  50. <span>地址信息/自提点</span>
  51. <div class="head-btn">
  52. <com-qq-map @map-submit="mapEvent" :address="basicForm.show_address" :lat="basicForm.latitude" :long="basicForm.longitude" style="display: inline-block;">
  53. <el-button type="primary" size="small">经纬度</el-button>
  54. </com-qq-map>
  55. <el-button size="small" type="primary" @click="addressDialogVisible = true">地址编辑</el-button>
  56. </div>
  57. </div>
  58. <div class="store-card-body">
  59. <el-descriptions :column="1">
  60. <!-- <el-descriptions-item label="门店地址">{{basicForm.addr}}</el-descriptions-item>-->
  61. <el-descriptions-item label="门店详细地址">{{basicForm.show_address}}</el-descriptions-item>
  62. <el-descriptions-item label="经纬度"><span style="color: #999999;">{{basicForm.longitude}},{{basicForm.latitude}}</span></el-descriptions-item>
  63. </el-descriptions>
  64. </div>
  65. </el-card>
  66. <!-- 门店分享 -->
  67. <el-card class="store-card" body-style="padding: 0;" shadow="never">
  68. <div slot="header" class="store-card-head" flex="flex main:justify cross:center">
  69. <span>门店分享</span>
  70. <el-button size="small" type="primary" @click="storeEdit('shareDialogVisible')">编辑</el-button>
  71. </div>
  72. <div class="store-card-body">
  73. <el-descriptions :column="2">
  74. <el-descriptions-item label="分享标题">{{basicForm.share_title}}</el-descriptions-item>
  75. <el-descriptions-item label="分享描述">{{basicForm.share_desc}}</el-descriptions-item>
  76. <el-descriptions-item label="分享图片">
  77. <el-image v-if="basicForm.share_pic" style="width: 150px; height: 100px;" :src="basicForm.share_pic"></el-image>
  78. </el-descriptions-item>
  79. </el-descriptions>
  80. </div>
  81. </el-card>
  82. <el-card class="store-card" body-style="padding: 0;" shadow="never">
  83. <div slot="header" class="store-card-head" flex="flex main:justify cross:center">
  84. <span>门店货款结算</span>
  85. </div>
  86. <div class="store-card-body">
  87. <el-form-item label="上传凭证" prop="payment_settlement_type">
  88. <template>
  89. <el-radio v-model="basicForm.payment_settlement_type" :label="0">关闭</el-radio>
  90. <el-radio v-model="basicForm.payment_settlement_type" :label="1">开启</el-radio><br />
  91. </template>
  92. </el-form-item>
  93. </div>
  94. </el-card>
  95. <div style="padding: 20px 0;">
  96. <el-button size="small" type="primary" @click="submit('basicForm')">保存</el-button>
  97. </div>
  98. </el-form>
  99. <!-- 基本信息弹窗 -->
  100. <el-dialog title="基本信息" :visible.sync="baseDialogVisible" width="600px">
  101. <el-form ref="basicForm" :model="basicForm" label-width="80px" size="small" :rules="basicRules">
  102. <el-form-item label="店铺名称">
  103. <el-input class="width-200" v-model="basicForm.store_name"></el-input>
  104. </el-form-item>
  105. <el-form-item label="店铺logo">
  106. <div flex="dir:left;">
  107. <!-- <draggable flex="dif:left">
  108. <div class="card-coverimg">
  109. <el-image class="elImages" style="width: 80px; height: 80px" :src=""></el-image>
  110. <el-button @click="delPic" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
  111. </div>
  112. </draggable> -->
  113. <template v-if="basicForm.logo_img">
  114. <div style="height: 80px">
  115. <el-image class="elImages" style="height: 100%;" :src="basicForm.logo_img"></el-image>
  116. </div>
  117. <el-button class="delele-img-btn" size="mini" type="danger" icon="el-icon-close" circle @click="storeDetailDeletePic('logo_img')"></el-button>
  118. </template>
  119. <template v-else>
  120. <com-attachment :multiple="false" :max="1" type="images" @selected="storeDetailSelectedImg($event, 'logo_img')">
  121. <div class="card-upload">
  122. <i class="el-icon-plus"></i>
  123. </div>
  124. </com-attachment>
  125. </template>
  126. </div>
  127. </el-form-item>
  128. <el-form-item label="手机号">
  129. <el-input class="width-200" v-model="basicForm.shop_mobile"></el-input>
  130. <p style="color:red;"><span style="color:black;">注意</span>:如果修改门店手机号,门店后台登录将自动重置为手机号的后六位数字</p>
  131. </el-form-item>
  132. <!-- <el-form-item label="验证码">
  133. <div flex="cross:center">
  134. <el-input class="width-200" v-model="form.name"></el-input>
  135. <div class="store-send-code" @click="sendCode">{{ captcha > 0 ? captcha + 's' : captcha }}</div>
  136. </div>
  137. </el-form-item> -->
  138. <!--<el-form-item label="类目">
  139. <el-select v-model="basicForm.c_id" placeholder="请选择门店分类">
  140. <el-option :label="item.name" :value="item.id" :key="index" v-for="(item, index) in categorys"></el-option>
  141. </el-select>
  142. </el-form-item>-->
  143. <el-form-item label="类目:" prop="c_id">
  144. <el-cascader
  145. ref="cascaderRef"
  146. v-model="basicForm.c_id"
  147. placeholder="试试搜索:指南"
  148. :options="category"
  149. filterable
  150. @change="handleCascaderChange">
  151. </el-cascader>
  152. </el-form-item>
  153. <el-form-item label="营业执照">
  154. <div flex="dir:left;">
  155. <!-- <draggable flex="dif:left">
  156. <div class="card-coverimg">
  157. <el-image class="elImages" style="width: 80px; height: 80px" :src=""></el-image>
  158. <el-button @click="delPic" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
  159. </div>
  160. </draggable> -->
  161. <template v-if="basicForm.license_img">
  162. <div style="height: 80px">
  163. <el-image class="elImages" style="height: 100%;" :src="basicForm.license_img"></el-image>
  164. </div>
  165. <el-button class="delele-img-btn" size="mini" type="danger" icon="el-icon-close" circle @click="storeDetailDeletePic('license_img')"></el-button>
  166. </template>
  167. <template v-else>
  168. <com-attachment :multiple="false" :max="1" type="images" @selected="storeDetailSelectedImg($event, 'license_img')">
  169. <div class="card-upload">
  170. <i class="el-icon-plus"></i>
  171. </div>
  172. </com-attachment>
  173. </template>
  174. </div>
  175. <div class="tips-text" style="padding-left: 10px;">建议上传686*485图片</div>
  176. </el-form-item>
  177. <el-form-item label="到期时间">
  178. <div>
  179. <span v-if="basicForm.expire_time">{{basicForm.expire_time | dateTimeFormat('Y-m-d H:i:s')}}</span>
  180. <span v-else>无限期</span>
  181. <template>
  182. <el-button size="mini" type="primary" @click="editExpireTime=true" style="padding: 6px;margin-left: 10px;">修改有效期</el-button>
  183. </template>
  184. </div>
  185. <div v-if="editExpireTime" style="margin-top: 10px;">
  186. <el-date-picker v-model="expireDate" type="date" placeholder="选择日期" format="yyyy-MM-dd" align="center" value-format="timestamp" @change="expireDateChange"> </el-date-picker>
  187. </div>
  188. </el-form-item>
  189. <el-form-item>
  190. <div flex="main:right;">
  191. <!-- <el-button @click="baseDialogVisible=false">取消</el-button> -->
  192. <el-button type="primary" @click="baseDialogVisible=false">确定</el-button>
  193. </div>
  194. </el-form-item>
  195. </el-form>
  196. </el-dialog>
  197. <!-- 门店分享弹窗 -->
  198. <el-dialog title="门店分享" :visible.sync="shareDialogVisible" width="600px">
  199. <el-form ref="basicForm" :model="basicForm" label-width="80px" size="small" :rules="basicRules">
  200. <el-form-item label="分享标题">
  201. <el-input class="width-200" v-model="basicForm.share_title"></el-input>
  202. </el-form-item>
  203. <el-form-item label="分享描述">
  204. <el-input class="width-200" v-model="basicForm.share_desc"></el-input>
  205. </el-form-item>
  206. <el-form-item label="分享图片">
  207. <div flex="cross:bottom;">
  208. <div flex="dir:left;">
  209. <!-- <draggable flex="dif:left;">
  210. <div class="card-coverimg">
  211. <el-image class="elImages" style="width: 80px; height: 80px;" :src=""></el-image>
  212. <el-button @click="delPic" class="icon-close" type="primary" size="mini" icon="el-icon-close" circle></el-button>
  213. </div>
  214. </draggable> -->
  215. <template v-if="basicForm.share_pic">
  216. <el-image class="elImages" style="width: 80px; height: 80px;" :src="basicForm.share_pic"></el-image>
  217. <el-button class="delele-img-btn" size="mini" type="danger" icon="el-icon-close" circle @click="storeDetailDeletePic('share_pic')"></el-button>
  218. </template>
  219. <template v-else>
  220. <com-attachment :multiple="false" :max="1" type="images" @selected="storeDetailSelectedImg($event, 'share_pic')">
  221. <div class="card-upload">
  222. <i class="el-icon-plus"></i>
  223. </div>
  224. </com-attachment>
  225. </template>
  226. </div>
  227. <div class="tips-text" style="padding-left: 10px;">建议上传200px*200px图片</div>
  228. </div>
  229. </el-form-item>
  230. <el-form-item>
  231. <div flex="main:right;">
  232. <!-- <el-button @click="shareDialogVisible=false">取消</el-button> -->
  233. <el-button type="primary" @click="shareDialogVisible=false">确定</el-button>
  234. </div>
  235. </el-form-item>
  236. </el-form>
  237. </el-dialog>
  238. <!--门店地址设置-->
  239. <el-dialog title="门店地址" :visible.sync="addressDialogVisible" width="972px">
  240. <el-form ref="basicForm" :model="basicForm" class="option-pd-5" label-width="80px" size="small" :rules="basicRules">
  241. <el-form-item label="所在区域" prop="province_id">
  242. <div class="flex flex-y-center">
  243. <el-select v-model="provinceInfo.name" value-key='id' class="pd-5" placeholder="请选择省" @change="regionChange($event, 1)">
  244. <el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item"></el-option>
  245. </el-select>
  246. <el-select v-model="cityInfo.name" value-key='id' class="pd-5" placeholder="请选择市" @change="regionChange($event, 2)">
  247. <el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item"></el-option>
  248. </el-select>
  249. <el-select v-model="districtInfo.name" value-key='id' class="pd-5" placeholder="请选择区" @change='regionChange($event, 3)'>
  250. <el-option v-for="item in districts" :key="item.id" :label="item.name" :value="item"></el-option>
  251. </el-select>
  252. <el-select v-model="streetInfo.name" value-key='id' class="pd-5" placeholder="请选择街道" @change='regionChange($event, 4)'>
  253. <el-option v-for="item in streets" :key="item.id" :label="item.name" :value="item"></el-option>
  254. </el-select>
  255. <el-select v-model="communityInfo.name" v-if="community_status" value-key='id' class="pd-5" placeholder="请选择社区" @change="regionChange($event, 5)">
  256. <el-option v-for="item in communitys" :key="item.id" :label="item.community_name" :value="item"></el-option>
  257. </el-select>
  258. </div>
  259. </el-form-item>
  260. <el-form-item class="detail_address" label="详细地址">
  261. <el-input class="width-350" v-model="address"></el-input>
  262. </el-form-item>
  263. <el-form-item>
  264. <div style="display:flex;justify-content:end" flex="main:right">
  265. <el-button @click="handleCancel">取消</el-button>
  266. <el-button type="primary" @click="addressDialog()">确定</el-button>
  267. </div>
  268. </el-form-item>
  269. </el-form>
  270. </el-dialog>
  271. <!--<style>-->
  272. <!-- .pd-5{padding: 5px !important;}-->
  273. <!-- .option-pd-5 .el-select{padding: 5px}-->
  274. <!-- .option-pd-5 .detail_address{margin-top:10px}-->
  275. <!--</style>-->